eBay integration

Our tools can be used on your eBay listings to zoom into images and show beautiful detail.

Before you start, you must have a place to host your images. For example, on your own website or other webspace or in your Dropbox public folder. Contact us with any questions you have about adding our image tools to your eBay listings.

Instructions

Follow these 3 screenshots then read the step-by-step instructions below.

1. Click the HTML tab:

2. Paste the code (see below):

3. Create the rest of your listing:

Now see the tutorial guide for each tool below.

Magic Zoom™  |  Magic Zoom Plus™  |  Magic Magnify™  |  Magic Magnify Plus™
Magic Thumb™  |  Magic Touch™  |  Magic Slideshow™

Magic Zoom™

1. Download the Magic Zoom™ demo or buy the full version.
2. Unzip it and upload the magiczoom folder to your website.
3. Login to eBay and create your listing as normal.
4. lick the HTML tab and enter the following code at the top:
   <link rel="stylesheet" type="text/css" href="http://example.com/magiczoom.css" />
   
   <script type="text/javascript">
   var _sc = document.createElement('SCRIPT');
   _sc.setAttribute('type','text/javascript');
   document.getElementsByTagName('head')[0].appendChild(_sc);
   _sc.setAttribute('src', 'http://example.com/magiczoom.js');
   </script>
5. In the code above, replace the example.com URLs with the URLs of the location where you uploaded your JS and CSS files.
6. Now you can use Magic Zoom™ on your images. Just reference your small image and link it to your large image. For example:
   <a href="http://www.example.com/largeimage.jpg" class="MagicZoom"><img src="http://www.example.com/smallimage.jpg"/></a>
7. To upgrade to the full version, buy a license and upload your licensed files, overwriting the demo files.

Magic Zoom Plus™

1. Download the Magic Zoom Plus™ demo or buy the full version.
2. Unzip it and upload the magiczoomplus folder to your website.
3. Login to eBay and create your listing as normal.
4. Click the HTML tab and enter the following code at the top:
   <link rel="stylesheet" type="text/css" href="http://example.com/magiczoomplus.css" />
   
   <script type="text/javascript">
   var _sc = document.createElement('SCRIPT');
   _sc.setAttribute('type','text/javascript');
   document.getElementsByTagName('head')[0].appendChild(_sc);
   _sc.setAttribute('src', 'http://example.com/magiczoomplus.js');
   </script>
5. In the code above, replace the example.com URLs with the URLs of the location where you uploaded your JS and CSS files.
6. Now you can use Magic Zoom Plus™ on your images. Just reference your small image and link it to your large image. For example:
   <a href="http://www.example.com/largeimage.jpg" class="MagicZoomPlus" rel="expand-align: image;"><img src="http://www.example.com/smallimage.jpg"/></a>
7. To upgrade to the full version, buy a license and upload your licensed files, overwriting the demo files.

Magic Magnify™

1. Download the Magic Magnify™ demo or buy the full version.
2. Upload the magicmagnify.js and magicmagnifyplus.swf files to your website.
3. Login to eBay and create your listing as normal.
4. Click the HTML tab and enter the following code at the top:
   <script type="text/javascript">
   var _sc = document.createElement('SCRIPT');
   _sc.setAttribute('type','text/javascript');
   document.getElementsByTagName('head')[0].appendChild(_sc);
   _sc.setAttribute('src', 'http://example.com/magicmagnify.js');
   </script>
5. In the code above, replace the example.com URLs with the location where you uploaded your JS and CSS files.
6. Now you can use Magic Magnify™ on your images. Just reference your small image and link it to your large image. For example:
   <a href="http://www.example.com/largeimage.jpg" class="MagicMagnify"><img src="http://www.example.com/smallimage.jpg"/></a>
7. To upgrade to the full version, buy a license and upload your licensed files, overwriting the demo files.

Magic Magnify Plus™

1. Download the Magic Magnify Plus™ demo or buy the full version.
2. Upload these files/folders to your webspace:
   magicmagnifyplus.js
   magicmagnifyplus.swf
   magicmagnifyplus.css
   cursor
   graphics
3. Login to eBay and create your listing as normal.
4. Click the HTML tab and enter the following code at the top:
   <link rel="stylesheet" type="text/css" href="http://example.com/magicmagnifyplus.css" />
   
   <script type="text/javascript">
   var _sc = document.createElement('SCRIPT');
   _sc.setAttribute('type','text/javascript');
   document.getElementsByTagName('head')[0].appendChild(_sc);
   _sc.setAttribute('src', 'http://example.com/magicmagnifyplus.js');
   </script>
5. In the code above, replace the example.com URLs with the URLs of the location where you uploaded your JS and CSS files.
6. Now you can use Magic Magnify Plus™ on your images. Just reference your small image and link it to your large image. For example:
   <a href="http://www.example.com/largeimage.jpg" class="MagicMagnifyPlus" rel="expand-align: image;"><img src="http://www.example.com/smallimage.jpg"/></a>
7. To upgrade to the full version, buy a license and upload your licensed files, overwriting the demo files.

Magic Thumb™

1. Download the Magic Thumb™ demo or buy the full version.
2. Upload the magicthumb folder to your website.
3. Login to eBay and create your listing as normal.
4. Click the HTML tab and enter the following code at the top:
   <link rel="stylesheet" type="text/css" href="http://example.com/magicthumb.css" />
   
   <script type="text/javascript">
   var _sc = document.createElement('SCRIPT');
   _sc.setAttribute('type','text/javascript');
   document.getElementsByTagName('head')[0].appendChild(_sc);
   _sc.setAttribute('src', 'http://example.com/magicthumb.js');
   </script>
5. In the code above, replace the example.com URLs with the location where you uploaded your JS and CSS files.
6. Now you can use Magic Thumb™ on your images. Just reference your small image and link it to your large image. For example:
   <a href="http://www.example.com/largeimage.jpg" class="MagicThumb" rel="expand-align: image;"><img src="http://www.example.com/smallimage.jpg"/></a>
7. To upgrade to the full version, buy a license and upload your licensed files, overwriting the demo files.

Magic Touch™

1. Login to eBay and create your listing as normal.
2. Click the HTML tab and enter the following code at the top:
   <script type="text/javascript">
   var _sc = document.createElement('SCRIPT');
   _sc.setAttribute('type','text/javascript');
   document.getElementsByTagName('head')[0].appendChild(_sc);
   _sc.setAttribute('src', 'http://www.magictoolbox.com/mt/{Your ID}/magictouch.js');
   </script>
3. In the code above, replace the {Your ID} with your Magic Touch™ ID. To get your ID, either login or sign up.
4. To zoom an image, you must have a small version and a large version of an image, available to access somewhere (e.g. on your website or in your Dropbox public folder). Simply reference your small image and link it to your large image with a class of MagicTouch™. For example:
   <a href="http://www.example.com/largeimage.jpg" class="MagicTouch"><img src="http://www.example.com/smallimage.jpg"/></a>
5. Go to your list of permitted domains in your Magic Touch™ account and add the domain where your eBay images are served from. Ebay normally serves pages from a country specific domain such as:
   • vi.ebaydesc.com
   • vi.ebaydesc.co.uk
   • vi.ebaydesc.es
   • vi.ebaydesc.it
6. Example of Magic Touch™ on use in an eBay listing: http://www.ebay.co.uk/itm/110745920033

Magic Slideshow™

1. Download the Magic Slideshow trial.
2. Unzip the file, keeping the folder structure intact.
3. Upload the magicslideshow folder to your website (view screenshot). If you don't have a website where you can upload files, create a Dropbox account and upload the magicslideshow folder to your Public folder.
4. Check that you can access magicslideshow.js and magicslideshow.css to the place where you uploaded them (either on your site or in your Dropbox public folder). For example:
   • http://www.EXAMPLE.com/magicslideshow/magicslideshow.js
   • http://www.EXAMPLE.com/magicslideshow/magicslideshow.css
   If you can see them, you can move to the next step.
5. Copy the code below and paste it into your eBay listing.
   <link rel="stylesheet" type="text/css" href="http://www.EXAMPLE.com/magicslideshow/magicslideshow.css"/>
   <script type="text/javascript">
   var _sc = document.createElement('SCRIPT');
   _sc.setAttribute('type','text/javascript');
   document.getElementsByTagName('head')[0].appendChild(_sc);
   _sc.setAttribute('src', 'http://www.EXAMPLE.com/magicslideshow/magicslideshow.js');
   </script>
   
   <div class="MagicSlideshow">
   <img src="http://www.EXAMPLE.com/images/your-image-1.jpg"/>
   <img src="http://www.EXAMPLE.com/images/your-image-2.jpg"/>
   <img src="http://www.EXAMPLE.com/images/your-image-3.jpg"/>
   </div>
   
6. Edit all the URLs in the code above to the correct URLs for your files. These URLs are wherever you uploaded your images, the JS and the CSS files. These are the URL names you must edit:
   • http://www.EXAMPLE.com/magicslideshow/magicslideshow.css
   • http://www.EXAMPLE.com/magicslideshow/magicslideshow.js
   • http://www.EXAMPLE.com/images/your-image-1.jpg
   • http://www.EXAMPLE.com/images/your-image-2.jpg
   • http://www.EXAMPLE.com/images/your-image-3.jpg
   Your file names can be anything you like and you can add as many images as you wish.
7. Your eBay slideshow will now work! Please contact us with any questions.

Installation of Magic Scroll™

To install Magic Scroll™, follow the same process as above. Download the zip file, upload the required files and images to your webspace, reference the the JS and CSS files in the same method above, insert the images for your slideshow.

Contact us for if you need help.

About

These instructions explain how to add powerful image zoom tools to your eBay listings. Use them when creating listings directly on the eBay website and also for Turbo Lister and other listing managers. Add them in your templates so save time when creating future auction listings.

Each tool adds a different effect, including image zoom on hover/mouseover; image lightbox (enlarge image to full screen); image slideshows in JavaScript; image carousels; and image magnifiers.