New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE6+ Opr9+

jQuery Image Magnify v1.11

  Author: Dynamic Drive

Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4). Only .js file changed.

Description: jQuery Image Magnify enables any image on the page to be magnified by a desired factor when clicked on, via a sleek zoom in/out effect. The enlarged image is centered on the user's screen until dismissed. It works on both images with and without explicit width/height attributes defined. This means you can take a large image that by default would look out of place when shown, shrink it using explicit width/height attributes, then enable users to magnify it on demand to its original dimensions when the image is clicked on using this script.

This script is extremely easy to set up- to enable the "magnify" effect on any image, just give it a CSS class of "magnify". You can also call imageMagnify() dynamically on an image to apply the magnify effect to it, or even reapply the affect after its src has been changed, for example. It's time to let you users take a closer look at images on your page!

Demos

Magnify by 3x, duration=0.5 second:

Magnify by 3.5x, duration=0.5 second:

Reapplying magnification to image after each image change:

Directions Developer's View

Simply add the below code inside the <HEAD> section of the page:

Select All

The above code references two external files which you should download below (right click, and select "Save As"):

Step 2: Then, to apply enable the magnify effect on an image just insert a CSS class of "magnify" inside it, for example:

<img src="ocean.gif" class="magnify" style="width:200px; height:150px" />

<img src="forest.gif" class="magnify" border="0" />

If your image contains explicit width/height attributes, then the script will magnify the image relative to those dimensions. Typically this is what you want to do- shrink a rather large image on the page and allow the user to magnify it only on demand. On the other hand if your image doesn't contain explicit width/height attributes, then its natural dimensions will be used as the basis of the magnification.

The default magnification power, among a few other settings, are set globally at the top of jquery.imageWarp.js, which you can customize:

dsettings: {
 magnifyby: 3, //default increase factor of enlarged image
 duration: 500, //default duration of animation, in millisec
 mgopacity: 0.2 //opacify of original image when enlarged image overlays it
},
cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image

A "magnifyby" value of 3 means 3x magnification, while 1.5 means 1.5x times etc. Note the value in red- this should be set to the complete URL where "magnify.cur" is located on your server. The "url()" CSS attribute is supported in IE and changes the cursor to a magnifying glass when the mouse moves over images with the CSS class "magnify" in that browser.

Available Image attributes

You can easily specify a different magnification and animation duration for a specific image that deviates from the global default, by inserting special attributes inside the image. Beside the prerequisite CSS class of "magnify", the following attributes are supported that let you customize the effect for that particular image:

"Magnify" images attributes
HTML Attribute Description
class="magnify"

required

 Required. Give all images you wish to have the magnify capability this CSS class name.
data-magnifyby="number"

optional

 Lets you set the magnification power for this particular image. Value should be a number above 1, such as 1.5 or 3 etc. Defaults to 3 if not defined.

Example:

<img src="ocean.gif" class="imagewarp" data-magnifyby="2.5" style="width:200px; height:150px" />
data-magnifyto="number"

optional. v1.1 attribute

 Lets you set the explicit width in pixels the image should expand to (the height is resized accordingly). This attribute if defined overrides "magnifyby" above.

Example:

<img src="ocean.gif" class="imagewarp" data-magnifyto="900" style="width:200px; height:150px" />
data-magnifyduration="number"

optional

 Lets you set the duration of the animation for this particular image. Value should be a number denoting milliseconds, such as 500 for 1/2 second, 2000 for 2 seconds etc. Defaults to 500 if not defined.

Example:

<img src="forest.gif" class="imagewarp" data-magnifyby="4" data-magnifyduration="1000" />

Links that expand a particular "magnify" image

For image that carry the CSS class "magnify", clicking on them obviously triggers the magnifying effect. However, if that's not enough, you can also add arbitrary links on the page that expand a particular "magnify" image as well. Given the following "magnify" image:

<img id="sarah" src="girl.gif" class="imagewarp" data-magnifyby="5" style="width:200px; height:150px" />

The following arbitrary link will also magnify the above when the link is clicked:

<a href=#" rel="magnify[sarah]">Zoom in on Sarah</a>

The syntax is simply rel="magnify[imageid]", added inside the link, where imageid is the ID of the "magnify" image you wish to associate the link with. Of course, be sure to give your "magnify" image a unique ID first.

Here's an example:

Enlarge Sarah

Dynamically applying the magnify effect to an image

So far everything above pertains to adding the magnify effect to a static image on the page, by modifying its markup. You can, however, also apply the magnify effect to an image dynamically, or reapply the effect to the same image, such as after the image's src has been changed, for example.

To add the magnify effect to an image on demand, call the method imageMagnify(options) on the desired images' jQuery wrapper object, such as:

jQuery("#myimage").imageMagnify({ //apply effect to image with ID="myimage"
 magnifyby:5
})

or

jQuery("div#mygallery img").imageMagnify({ //apply effect to image with ID="myimage"
 magnifyto:750,
 magnifyduration: 1000 //<--No trailing comma after last option!
})

If you're unfamiliar with selecting elements using jQuery, please see jQuery Selectors. When calling imageMagnify(options), the following options can be passed into the method, serving the same purpose as their HTML attributes counterparts above:

"imageMagnify()" parameter options
HTML Attribute Description
magnifyby: "number" Same as attribute counterpart above.
magnifyto: "number" Same as attribute counterpart above. If defined overrides magnifyby setting above.
magnifyduration: "number" Same as attribute counterpart above.
thumbdimensions: [width, height] Informs the script of the image's "thumbnail" dimensions before the image is enlarged. This is required when you're calling imageMagnify() on an image that doesn't have any explicit dimensions defined (either via CSS or scripting) at the time of calling imageMagnify() on it. This can happen for images that are dynamically added to the page or has just had its src property updated, in which the new image's thumbnail dimensions may be different from the old one's. For example:

var myimg=document.createElement("img")
myimg.src="test.gif"
jQuery(myimg).imageMagnify({
 magnifyby: 2,
 humbdimensions: [150, 200] //specify image's pre magnification dimensions, as at this point image does not return any dimensions info
})
document.body.appendChild(myimg)

Lets see a practical example now. Lets say you want to apply the magnify effect to an image that can be changed via a drop down menu. With each image change it's necessary to reapply the magnify effect to the image again, as both its src and dimensions will have changed. So we call imageMagnify() on the image each time the image is changed inside our code:

<form>
<select id="imageselect">
<option>Select a Picture and click to enlarge</option>
<option>Amsterdam 1</option>
<option>Amsterdam 2</option>
<option>Amsterdam 3</option>
<option>Amsterdam 4</option>
</select>
</form>

<img id="imagebox" src="amster1.jpg" class="magnify" data-magnifyby="2" style="width:200px" />

<script type="text/javascript">

var imagebox=document.getElementById("imagebox")
var imageselect=document.getElementById("imageselect")
var imagelist=["amster1.jpg", "amster2.jpg", "amster3.jpg", "amster4.jpg"]

imageselect.onchange=function(){
if (this.selectedIndex!=0){
imagebox.src=imagelist[this.selectedIndex-1]
jQuery(imagebox).imageMagnify({
magnifyby: 2
})
}
}

</script>

The result: