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:

1. Download Magic Magnify Plus™ - get the trial version or buy the full version.
2. Upload the magicmagnifyplus folder to your site.
3. 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>

4. 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>

5. Finished!

Your code should look something like this:

• 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:

Change the magnifier shape with a magnifier parameter:

Magnifier border

Change the border color by adding a magnifier-border-color to the the rel attribute to your <a> tag. Example code:

Change the thickness of the magnifier border using a magnifier-border-width option:

Caption

You can add text underneath the enlarged image using span, alt or title.

Add a caption using span:

Add a caption using alt:

Add a caption using title:

You can add a link to the caption by changing the <a> to [a]. Example:

Background

Darken or lighten the background behind the expanded image with the background-opacity paramater:

The default backgound color is black and fades in 0.2 seconds. Apply your own settings using background-color and background-speed:

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: