Magnify, a jQuery plugin

What Is It?

What is it?

Magnify allows you to easily create a "magnifier" on your images. You just need to create a small and large image which are proportionally sized, configure your markup accordingly and let Magnify do the rest.

Tested on:

Some notes on usage:


Example 1: using defaults

Mouse over image to magnify, mouse out to hide.


<a href="pages/jquery/magnify/britbig.jpg" id="d1" >
    <img src="pages/jquery/magnify/britsmall.jpg" border="0">





Example 2: custom options

Click image to magnify, click to hide.

<a href="pages/jquery/magnify/flowerbig.jpg" id="d2">
    <img src="pages/jquery/magnify/flowersmall.jpg" border="0">



showEvent: 'click',
hideEvent: 'click',
lensWidth: 60,
lensHeight: 60,
preload: false,
stagePlacement: 'left',
loadingImage: 'pages/jquery/ajax-loader_gray.gif',
lensCss: { backgroundColor: '#cc0000',
border: '0px',
opacity: 0.5 },
stageCss: { border: '4px solid #33cc33' }




First, make sure you are including the jQuery file. It is strongly recommended to use the latest version of jQuery, which is 1.2.6 as of this writing. jQuery 1.2.6 includes changes that make the mousemove event more efficient on Firefox - in previous versions the mousemove event would tend to hog the CPU in Firefox.

Then, include the jquery.magnify.js plugin file somewhere after the jQuery include.


The basic html configuration is as follows:

<a href="path/to/larger/image.jpg" id="example1">
   <img src="path/to/smaller/image.jpg">


To use the default settings:

$(document).ready(function() {

To use customized settings: pass in arguments in an object with key/value pairs. The available parameters are described below. See example 2 above as an example of passing in custom settings.

Param Type Default Description
lensWidth integer 100 sets lens width
lensHeight integer 100 sets lens height
showEvent string 'mouseover' event which shows magnified image
hideEvent string 'mouseout' event which hides magnified image
stagePlacement string 'right' may be 'right' or 'left', determines placement of stage
preload boolean true if set to true, magnified will be loaded when page is loaded; if false, magnified image will be loaded on show event
loadingImage string empty string path to loading image (ajax spinner) - if left empty, "Loading..." will appear over small image
stageCss object empty object additional style properties for stage
lensCss object empty object additional style properties for lens
onBeforeShow function empty function function to run before magnified image is shown
onAfterShow function empty function function to run after magnified image is shown
onBeforeHide function empty function function to run before magnified image is hidden
onAfterHide function empty function function to run after magnified image is hidden


A hack to fix the IE6 select menu show-through bug

If you have select menus under your magnified image, you will need to hide them so they will not show through the div on IE6. Here's a little hack so you don't have to include the bgIframe plugin if you don't want to. This will hide any selects when the magnified image is shown, and show them again after the magnified image is hidden.

      onBeforeShow : function() {
          if ($.browser.msie && $.browser.version == '6.0')
     onAfterHide : function() {
          if ($.browser.msie && $.browser.version == '6.0')


jquery.magnify-1.0.2.js (13K)
jquery.magnify-1.0.2.pack.js (8K)
jquery.magnify-1.0.2.min.js (10K)



Version 1.0.2 Released June 1, 2008

- Fixed left placement regression from 1.0.1
- Improved memory management

Version 1.0.1 Released May 31, 2008

- Fixed preload=true bug
- Stage placement below bottom of screen rectified
- Fixed Safari/Mac stage placement bug


Version 1.0.0 Released May 30, 2008



Bugs, questions, suggestions? joshnathanson {at} gmail {dot} com
Also I'm on the Google Groups jQuery mailing list daily so feel free to post there.