Magic Magnify Plus™ integration

Install it on your site with just 3 lines of code!

1. Install

To install on a popular shopping cart, download a module on the right.

To install on any other website:

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, for example:
   <link type="text/css" rel="stylesheet" href="magicmagnifyplus/magicmagnifyplus.css"/>
   <script type="text/javascript" src="magicmagnifyplus/magicmagnifyplus.js"></script>

   (If you cannot access the head section of your page, reference the files elsewhere such as the main content of your page.)

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.

2. 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 below.

3. Magnifier size

The magnifier is 66% of the width of the main image. Change the magnifier size by adding a magnifier-size option to the rel attribute. For example, make it the full width of the image like so:

The magnifier size can also be adjusted by the user, simply through scrolling the mousewheel up/down to make the magnifier wider/narrower.

4. Magnifier shape

Change the magnifier shape with a magnifier parameter:

5. Magnifier border

Change the border color with the magnifier-border-color attribute, for example:

Change the thickness of the magnifier border with the magnifier-border-width option:

6. Multiple images

Switch between different images of the same product by using 3 sizes of images (called tiny, main, big in the example below). Give the main image an id, and apply a rel tag with the same id to the tiny images. For example:

You can swap the main image on mouseover instead of on click. Example:

7. Caption

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

Add a caption using span:

Here is some text! It can have formatting such as bold and [a href="/magicmagnifyplus/"]can contain links[/a] too.

Alternatively, add a caption using alt:

Alternatively, add a caption using title:

You can add links within the caption by using [a], for example:

8. 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:

9. Enlarge effect

Five effects can be used to enlarge the image:

• Linear - expands at steady rate.
• Cubic - starts fast, then slows down.
• Back - shrinks, then enlarges too much, then shrinks to correct size.
• Elastic - enlarges too much, then shrinks to correct size.
• Bounce - enlarges then contacts, twice.

Try the effects:

Change the effect using the expand-effect option like so:

10. Enlarge speed

Define how long the enlarge and restore effects take (in milliseconds). The default is 500ms and the restore effect is the same unless you define it separately. Example:

11. Enlarge 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:

12. Enlarge size

If the enlarged image is taller or wider than the users screen, it will automatically scale down to fit the screen. This lets the user see the entire image without scrolling. Instead, you can show the image at its original size like so:

13. Keyboard navigation

Users can swap between enlarged images with key strokes like so:

• Left arrow or Up arrow or Page up - previous image
• Right arrow or Down arrow or Page down - next image
• Space bar - next image
• Escape - close

You can disable keyboard shortcuts like so:

Or you can require the user to also press the Ctrl key (e.g. Ctrl + Left arrow) like so: