Magic Magnify Plus™ integration

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

1. Install

If you're using one of these platforms, click your platform and follow the instructions to install the Magic Magnify Plus™ module:


If you're not using one of the platforms above, install Magic Magnify Plus™ like so:

  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!

Nike trainers

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>

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:

<a href="big.jpg" class="MagicMagnifyPlus" rel="magnifier-size: 100%"><img src="small.jpg"/></a>

Nike trainers

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:

<a href="big.jpg" class="MagicMagnifyPlus" rel="magnifier: square"><img src="small.jpg"/></a>

Nike trainers

5. Magnifier border

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

<a href="big.jpg" class="MagicMagnifyPlus" rel="magnifier-border-color: #4C6C9A"><img src="small.jpg"/></a>

Nike trainers

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

<a href="big.jpg" class="MagicMagnifyPlus" rel="magnifier-border-color: #4C6C9A; magnifier-border-width: 5;"><img src="small.jpg"/></a>

Nike trainers

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:

<a href="big1.jpg" class="MagicMagnifyPlus" id="trainers"><img src="main1.jpg"/></a><br/>
<a href="big1.jpg" rel="trainers" rev="main1.jpg"><img src="tiny1.jpg"/></a>
<a href="big2.jpg" rel="trainers" rev="main2.jpg"><img src="tiny2.jpg"/></a>
<a href="big3.jpg" rel="trainers" rev="main3.jpg"><img src="tiny3.jpg"/></a>

Nike trainers

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

<a href="big1.jpg" class="MagicMagnifyPlus" id="hello"><img src="main1.jpg"/></a><br/>
<a href="big1.jpg" rel="thumb-id:hello; swap-image:mouseover" rev="main1.jpg"><img src="tiny1.jpg"/></a>
<a href="big2.jpg" rel="thumb-id:hello; swap-image:mouseover" rev="main2.jpg"><img src="tiny2.jpg"/></a>
<a href="big3.jpg" rel="thumb-id:hello; swap-image:mouseover" rev="main3.jpg"><img src="tiny3.jpg"/></a>

Nike trainers

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

Nike trainersHere 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:

<a href="big.jpg" class="MagicMagnifyPlus" rel="caption-source:img:alt"><img src="small.jpg" alt="Here is some text"/></a>

Alternatively, 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 links within the caption by using [a], for 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>

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

Nike trainers

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>

Nike trainers

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:

<a href="big.jpg" class="MagicMagnifyPlus" rel="expand-effect:back"><img src="small.jpg"/></a>

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:

<a href="big.jpg" class="MagicMagnifyPlus" rel="expand-speed:400; restore-speed: 200"><img src="small.jpg"/></a>

Nike trainers

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:

<a href="big.jpg" class="MagicMagnifyPlus" rel="expand-align:screen; expand-position:top:0,right:0"><img src="small.jpg"/></a>

Nike trainers

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:

<a href="big.jpg" class="MagicMagnifyPlus" rel="image-size:original"><img src="small.jpg"/></a>

Nike trainers

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:

<a href="big.jpg" class="MagicMagnifyPlus" rel="keyboard:false"><img src="small.jpg"/></a>

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

<a href="big.jpg" class="MagicMagnifyPlus" rel="keyboard-ctrl:true"><img src="small.jpg"/></a>

14. Parameters

Entire list of 59 parameters available to you:

List of Magic Magnify Plus™ parameters.
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