Magic Zoom Plus™ installation
£39
$63 / €43
Installation is simple. Follow the instructions below, or use a module: VirtueMart, Joomla, osCommerce, CRE Loaded, Magento, X-Cart, xt:commerce, Zen Cart, CubeCart, CS-Cart, WordPress, Drupal, Gallery, WYSWIYG, OSCMax, OXID.
Instructions
- Download the Magic Zoom Plus™ demo.
- Upload the magiczoomplus folder to your website.
- Reference the magiczoomplus.js and magiczoomplus.css files in the <head> of your page. Example:
<link type="text/css" rel="stylesheet" href="magiczoomplus/magiczoomplus.css"/>
<script type="text/javascript" src="magiczoomplus/magiczoomplus.js"></script> - Link your small image to your large image with a class of MagicZoomPlus. Example:
<a href="big.jpg" class="MagicZoomPlus"><img src="small.jpg"/></a>
- To upgrade, buy a license then overwrite the magiczoomplus.js file with the one from your licensed version.
Questions? Contact us and we'll help you.
Try these examples of Magic Zoom Plus™ or download more examples (zip).
Customize
There are 75 options (listed below) to customize Magic Zoom Plus™. Apply your options with the <script> tag, for example:
<script type="text/javascript">
MagicZoomPlus.options = {
'opacity':'65',
'expand-effect':'bounce',
'hotspots':'just-an-example'
}
</script>
Do not put a comma after your last option or Internet Explorer will throw a JavaScript error (a well documented IE bug).
Alternatively, you can set your options by using the rel attribute. Example:
<a href="big.jpg" class="MagicZoomPlus" rel="hotspots:just-an-example; opacity:65; expand-effect:bounce"><img src="small.jpg"/></a>
Zoom / enlarge only
Magic Zoom Plus™ combines the two most popular effects from Magic Zoom™ and Magic Thumb™. It zooms on hover and expands on click.
You can disable the zoom like so:
'disable-zoom':'true'
You can disable the expand like so:
'disable-expand':'true'
Multiple images
You can display different images of a product by adding an id attribute to the main image link and a rel attribute to the alternative image links.
In the example below, the unique id is rabbit. There are 3 images - large, small and tiny.
<a href="dress1large.jpg" class="MagicZoomPlus" id="rabbit"><img src="dress1small.jpg"></a>
<p>Click to change dress color:</p>
<a href="dress1large.jpg" rel="zoom-id:rabbit" rev="dress1small.jpg"><img src="dress1tiny.jpg"/></a>
<a href="dress2large.jpg" rel="zoom-id:rabbit" rev="dress2small.jpg"><img src="dress2tiny.jpg"/></a>
<a href="dress3large.jpg" rel="zoom-id:rabbit" rev="dress3small.jpg"><img src="dress3tiny.jpg"/></a>
<a href="dress4large.jpg" rel="zoom-id:rabbit" rev="dress4small.jpg"><img src="dress4tiny.jpg"/></a>
This is how it looks:
You can place images anywhere on the page and as many as you like. You can switch the images via thumbnail images or text or even a form object (e.g. dropdown or button).
You can set the images to swap on mouseover, instead of on click. Example:
<a href="dress1large.jpg" class="MagicZoomPlus" id="rabbit" rel="thumb-change:mouseover"><img src="dress1small.jpg"></a>
<p>Click to change dress color:</p>
<a href="dress1large.jpg" rel="zoom-id:rabbit" rev="dress1small.jpg"><img src="dress1tiny.jpg"/></a>
<a href="dress2large.jpg" rel="zoom-id:rabbit" rev="dress2small.jpg"><img src="dress2tiny.jpg"/></a>
<a href="dress3large.jpg" rel="zoom-id:rabbit" rev="dress3small.jpg"><img src="dress3tiny.jpg"/></a>
<a href="dress4large.jpg" rel="zoom-id:rabbit" rev="dress4small.jpg"><img src="dress4tiny.jpg"/></a>
There are 3 effects for changing the medium-size image. Dissolve will fade one image into the other; fade will brighten the image to white and dissolve it at the same time; false will remove the effect so the images swap immediately. You can also choose the speed of the effect. Example:
<a href="dress1large.jpg" class="MagicZoomPlus" id="rabbit" rel="selectors-effect:fade; selectors-effect-speed:700"><img src="dress1small.jpg"></a>
<p>Click to change dress color:</p>
<a href="dress1large.jpg" rel="zoom-id:rabbit" rev="dress1small.jpg"><img src="dress1tiny.jpg"/></a>
<a href="dress2large.jpg" rel="zoom-id:rabbit" rev="dress2small.jpg"><img src="dress2tiny.jpg"/></a>
<a href="dress3large.jpg" rel="zoom-id:rabbit" rev="dress3small.jpg"><img src="dress3tiny.jpg"/></a>
<a href="dress4large.jpg" rel="zoom-id:rabbit" rev="dress4small.jpg"><img src="dress4tiny.jpg"/></a>
Hotspots
Special areas on your image can be assigned certain functions. We call these hotspots.
Click on a hotspot and something happens. The most popular action is to open an image - here is a good example.
Use the hotspots parameter in the rel and place your hotspot images inside a div with an id of your choice and a class of MagicHotspots. The example below will create 2 hotspots on the image:
<a href="big.jpg" class="MagicZoomPlus" rel="hotspots:just-an-example"><img src="small.jpg"/></a>
<div id="just-an-example" class="MagicHotspots">
<a href="image2.jpg" coords="115,145,135,165" class="MagicThumb"></a>
<a href="image3.jpg" coords="130,75,196,110" class="MagicThumb"></a>
</div>
The coords attribute lets you set the exact location of the hotspot, from the top corner of the image.
For help using hotspots, look at the two hotspot examples in the zip file or contact us.
API
Make AJAX calls to control your images. Four options are available:
- MagicZoomPlus.start(); - enable the zoom on images.
- MagicZoomPlus.stop(); - stop the zoom.
- MagicZoomPlus.refresh(); - reload the images.
- MagicZoomPlus.update(); - update a particular image.
Example:
<script type="text/javascript">
MagicZoomPlus.refresh();
</script>
Parameters
A whopping 75 parameters are available to customize the JavaScript. All 75 are listed below.
Use these 3 parameters, exclusive to Magic Zoom Plus™:
| Parameter | Default | Options | Description |
|---|---|---|---|
| hotspots | any text | The id of the div with your hotspots. | |
| disable-zoom | false | true/false | Enlarge the image on click only. |
| disable-expand | false | true/false | Zoom the image on hover only. |
Use the following 34 parameters to control the Magic Zoom™ features:
| Parameter | Default | Options | Description |
|---|---|---|---|
| zoom-width | 300 | Width of zoom window (px) | |
| zoom-height | 300 | Height of zoom window (px) | |
| zoom-position | right | left / right / top / bottom / inner /custom | Position of zoom window |
| zoom-distance | 15 | Distance from small image to zoom window (px) | |
| smoothing | true | true / false | Enable smooth zoom movement |
| smoothing-speed | 40 | 1-99 | Speed of smoothing |
| opacity | 50 | 0-100 | Opacity of hovered area |
| opacity-reverse | false | true / false | Add opacity outside mouse box |
| click-to-initialize | false | true / false | Click to fetch the large image |
| click-to-activate | false | true / false | Click to show the zoom |
| show-title | top | top / bottom / false | Show the title of the image in the zoom window |
| thumb-change | click | click / mouseover | Multiple images change on click/mouseover |
| selectors-mouseover-delay | 200 | Delay before switching thumbnails (ms) | |
| selectors-effect | dissolve | dissolve / fade / false | Dissolve or cross fade thumbnails |
| selectors-effect-speed | 400 | Speed of dissolve/fade effect (ms) | |
| preload-selectors-small | true | true / false | Multiple images, preload small images |
| preload-selectors-big | false | true / false | Multiple images, preload large images |
| zoom-fade | false | true / false | Zoom window fade effect |
| zoom-fade-in-speed | 400 | Zoom window fade-in speed (ms) | |
| zoom-fade-out-speed | 200 | Zoom window fade-out speed (ms) | |
| fps | 25 | Frames per second for zoom effect | |
| show-loading | true | true / false | Loading message |
| loading-msg | Loading zoom... | Loading message text | |
| loading-opacity | 75 | 0-100 | Loading message opacity |
| loading-position-x | -1 | Loading message X-axis position, -1 is center | |
| loading-position-y | -1 | Loading message Y-axis position, -1 is center | |
| drag-mode | false | true / false | Click and drag to move the zoom |
| move-on-click | true | true / false | Click to move the zoom (in drag mode) |
| x | -1 | Initial X-axis position for drag mode, -1 is center | |
| y | -1 | Initial Y-axis position for drag mode, -1 is center | |
| always-show-zoom | false | true / false | Make zoom window always visible. (Automatically true in drag-mode.) |
| preserve-position | false | true / false | Remember position of zoom for multiple images and drag mode |
| fit-zoom-window | true | true / false | Resize zoom window if big image is smaller than zoom window |
| entire-image | false | true / false | Show the entire large image on hover |
Use the following 38 parameters to control the Magic Thumb™ features:
| Parameter | Default | Options | Description |
|---|---|---|---|
| expand-speed | 500 | 0-10000 | Expand duration (ms) |
| restore-speed | 0-10000 | Restore duration (ms), optional | |
| expand-effect | linear | linear / cubic / back / elastic / bounce | Effect for expanding image |
| restore-effect | auto | linear / cubic / back / elastic / bounce | Effect for restoring image |
| expand-trigger | click | click / mouseover | Trigger for the enlarge effect |
| expand-trigger-delay | 500 | 0-1000 | Delay before mouseover enlargement (ms) |
| restore-trigger | auto | auto / click / mouseout | Trigger for the shrink effect |
| expand-align | screen | screen / image | Align image relative to screen or small image |
| expand-position | center | center / coordinates examples: top:0, right:25 or bottom:100, left:100 |
Precise position of enlarged image (px) |
| image-size | fit-screen | fit-screen / original | Size of the enlarged image |
| keep-thumbnail | true | true / false | Show/hide thumbnail when image enlarged |
| click-to-initialize | false | true / false | Click to fetch large image |
| background-color | #000000 | Background color behind large image | |
| background-opacity | 0 | 0-100 | Opacity of the background, 0 = disabled |
| background-speed | 200 | 0-10000 | Duration of background fade (ms) |
| caption-source | a:title | span / img:alt / img:title / a:title / #id | Source of caption text |
| caption-speed | 250 | 0-10000 | Speed of caption slide effect (ms) |
| caption-position | bottom | bottom / right / left | Where to position the caption |
| caption-height | 300 | Max height of bottom caption (px) | |
| caption-width | 300 | Max width of left/right caption (px) | |
| buttons | show | show / hide / autohide | Whether or not to show buttons |
| buttons-position | auto | auto / top left / top right / bottom left / bottom right | Corner position of buttons |
| buttons-display | previous, next, close | previous / next / close | Show all three buttons or just one or two |
| group | any name | Group images together into a set | |
| slideshow-effect | dissolve | dissolve / fade / expand | Slideshow effect from one image to next |
| slideshow-speed | 500 | 0-10000 | Speed of slideshow effect (ms) |
| slideshow-loop | true | true / false | Restart slideshow after last image |
| link | http://www.example.com | Link the enlarged image to a URL | |
| link-target | _self | _blank / _self / _parent / _top | Open link in browser window/frame |
| thumb-id | id of main image | Choose multiple images to be swapped | |
| swap-image | click | click / mouseover | Method to switch between multiple images |
| swap-image-delay | 100 | 0-1000 | Delay before switching images (ms) |
| show-loading | true | true / false | Show or not loading box |
| loading-msg | Loading | Text of the loading message | |
| loading-opacity | 75 | 0-100 | Opacity of the loading box |
| keyboard | true | true / false | Ability to use keyboard shortcuts |
| keyboard-ctrl | false | true / false | Require the Ctrl key to permit shortcuts |
| css-class | any name | Apply different styles to different images | |
| z-index | 10001 | The z-index for the enlarged image |
Installation guides
Use Magic Zoom Plus™ on any website. Download a module/plugin for a specific platform:
©2010 Magic Toolbox About | Contact | Support | Affiliates | Newsletter | Testimonials | License Agreement | Terms | Privacy