Magic Magnify Plus™ integration
Install it on your site with just 3 lines of code.
Install
To integrate with a shopping cart, download a module on the right.
To install manually:
- Download Magic Magnify Plus™ - get the trial version or buy the full version.
- Upload the magicmagnifyplus folder to your site.
- Reference magicmagnifyplus.js and magicmagnifyplus.css before the </head> of your page:
<link type="text/css" rel="stylesheet" href="magicmagnifyplus.css"/>
<script type="text/javascript" src="magicmagnifyplus.js"></script>
- Reference your small image with <img>, link it with <a> to your big image and add a CSS class of "MagicMagnifyPlus":
<a href="big.jpg" class="MagicMagnifyPlus"><img src="small.jpg"/></a>
- Finished!
Your code should look something like this:
<html>
<head>
<title>Magic Magnify Plus demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="magicmagnifyplus/magicmagnifyplus.css" type="text/css"/>
<script src="magicmagnifyplus/magicmagnifyplus.js" type="text/javascript"></script>
</head>
<body>
<a href="big.jpg" class="MagicMagnifyPlus"><img src="small.jpg"/></a>
</body>
</html>
- Like it? Buy a license or apply for a free license.
- Questions? Ask us and we'll help you.
Customization
Change the colors, borders, sizes, titles and other things. See more examples of Magic Magnify Plus™ and refer to the list of 34 parameters.
Magnifier size and shape
Adjust the magnifier size by adding a magnifier-size option to the rel attribute. For example:
<a href="big.jpg" rel="magnifier-size: 200px" class="MagicMagnifyPlus"><img src="small.jpg"/></a>
Change the magnifier shape with a magnifier parameter:
<a href="big.jpg" rel="magnifier-size: 200px; magnifier: square" class="MagicMagnifyPlus"><img src="small.jpg"/></a>
Magnifier border
Change the border color by adding a magnifier-border-color to the the rel attribute to your <a> tag. Example code:
<a href="big.jpg" rel="magnifier-border-color: #6e8c0e" class="MagicMagnifyPlus"><img src="small.jpg"/></a>
Change the thickness of the magnifier border using a magnifier-border-width option:
<a href="big.jpg" rel="magnifier-border-color: #6e8c0e; magnifier-border-width: 5;" class="MagicMagnifyPlus"><img src="small.jpg"/></a>
Caption
You can add text underneath the enlarged image using span, alt or title.
Add a caption using span:
<a href="big.jpg" class="MagicMagnifyPlus"><img src="small.jpg"/><span>Here is some text</span></a>
Add a caption using alt:
<a href="big.jpg" class="MagicMagnifyPlus" rel="caption-source:img:alt"><img src="small.jpg" alt="Here is some text"/></a>
Add a caption using title:
<a href="big.jpg" class="MagicMagnifyPlus" rel="caption-source:img:title"><img src="small.jpg" title="Here is some text"/></a>
You can add a link to the caption by changing the <a> to [a]. Example:
<a href="big.jpg" class="MagicMagnifyPlus"><img src="small.jpg"/><span>This is the caption text. And [a href="http://www.example.com/example.html"]this is a link[/a]</span></a>
Background
Darken or lighten the background behind the expanded image with the background-opacity paramater:
<a href="big.jpg" class="MagicMagnifyPlus" rel="background-opacity:50"><img src="small.jpg"/></a>
The default backgound color is black and fades in 0.2 seconds. Apply your own settings using background-color and background-speed:
<a href="big.jpg" class="MagicMagnifyPlus" rel="background-opacity:80; background-color:#00485F; background-speed:500"><img src="small.jpg"/></a>
Image position
The image will enlarge into the center of the screen by default. You can change it to enlarge to a fixed position. In this example, it will enlarge to the top right of the screen:
<a href="big.jpg" class="MagicMagnifyPlus" rel="expand-align:screen; expand-position:top:0,right:0"><img src="small.jpg"/></a>
Parameters
Entire list of all parameters available to you:
| Parameter name | Default | Options | Description |
|---|---|---|---|
| Magnify mode | |||
| magnifier | circle | circle / square / inner / custom(x1,y1,x2,y2,..) | Magnifier shape |
| magnifier-size | 66% | Numeric or % | Magnifier size: % of small image width or fixed size in px |
| magnifier-size-x | 66% | Numeric or % | Magnifier width: % of small image width or fixed size in px |
| magnifier-size-y | 66% | Numeric or % | Magnifier height: % of small image width or fixed size in px |
| magnifier-effect | fade | none / pulse / fade | Magnifier appearing effect |
| magnifier-filter | glow | glow / shadow | Magnifier effect |
| magnifier-time | 200 | milliseconds | Time for magnifier effect |
| magnifier-simulate | false | % ('false'=off) | Create enlarged images from small ones with specified scale |
| magnifier-border-color | #CCCCCC | Magnifier border color | |
| magnifier-border-width | 1 | Numeric, px | Magnifier border thickness |
| border-color | #CCCCCC | Outside border color | |
| border-width | 0 | Numeric, px | Outside border width |
| progress-color | #CCCCCC | Color of the loading bar | |
| progress-height | 0 | Numeric, px | Height of the loading bar |
| wheel-effect | 20% | 0-100% | Wheel effect for changing magnifier size |
| lense-url | Custom image URL | ||
| lense-offset-x | 0 | Numeric, px | Custom image x-offset |
| lense-offset-y | 0 | Numeric, px | Custom image y-offset |
| lense-position | top | top / bottom | Custom image position |
| disable-auto-start | false | true / false | Disable magnify effect until clicked |
| blur | 0 | Numeric, px | Blur effect of the main image when magnifier is shown |
| transparency | 100% | 0-100% | Transparency of the main image when magnifier is shown |
| hide-cursor | false | true / false | Hide mouse pointer |
| callback | JavaScript function name for mouse click callback | ||
| Thumbnails | |||
| thumb-change | click | click / mouseover | Method to switch between multiple images |
| thumb-change-delay | 200 | milliseconds | Delay before switching images |
| thumb-change-time | 500 | milliseconds | Speed of changing size of multiple images |
| change-time | 500 | milliseconds | Speed of changing opacity of multiple images |
| Expand mode | |||
| 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 | auto / linear / cubic / back / elastic / bounce | Effect for restoring image |
| restore-trigger | auto | auto / click / mouseout | Trigger to restore image to its small state |
| 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 | false | true / false | Show/hide thumbnail when image enlarged |
| 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 | span | 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 |
| slideshow-effect | dissolve | dissolve / fade / expand | Slideshow effect to move between large images |
| 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 enlarged image to a URL | |
| link-target | _self | _blank / _self / _parent / _top | Open link in browser window/frame |
| keyboard | true | true / false | Ability to use keyboard shortcuts |
| keyboard-ctrl | false | true / false | Require the Ctrl key to permit shortcuts |
| disable-expand | false | true / false | Disable/Enable expand effect |
| z-index | 10001 | The z-index for the enlarged image | |
| css-class | any name | Apply different styles to different images | |
30 day money-back guarantee.
Free license for non-commercial use
30 minutes free technical support.
Download a module:
- Magic Magnify Plus™ for CS-Cart
- Magic Magnify Plus™ for Magento
- Magic Magnify Plus™ for redSHOP
- Magic Magnify Plus™ for Joomla
- Magic Magnify Plus™ for VirtueMart
- Magic Magnify Plus™ for PrestaShop
- Magic Magnify Plus™ for osCommerce
- Magic Magnify Plus™ for Zen Cart
- Magic Magnify Plus™ for CRE Loaded
- Magic Magnify Plus™ for CubeCart
- Magic Magnify Plus™ for X-Cart
- Magic Magnify Plus™ for xt:Commerce
- Magic Magnify Plus™ for VEYTON 4
- Magic Magnify Plus™ for OpenCart
- Magic Magnify Plus™ for Avactis
- Magic Magnify Plus™ for LiteCommerce
- Magic Magnify Plus™ for Drupal
- Magic Magnify Plus™ for WordPress
- Magic Magnify Plus™ for WP e-Commerce
- Magic Magnify Plus™ for Gallery
- Magic Magnify Plus™ for WYSIWYG
- Magic Magnify Plus™ for OXID
- Magic Magnify Plus™ for osCMax
- Ecommerce Templates
- NetSuite
- AspDotNetStorefront
- BlueVoda
- Miva Merchant
- Shopify

