Magnify, a jQuery plugin
What Is It?
Examples/Demos
Configuration
Download
History
Contact
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:
- Windows: IE6, IE7, FF2, Safari 3.1
- Mac: FF2, Safari 3.1
Some notes on usage:
- You do not need to specify a width and height for your small image -- Magnify will figure this out for you.
- The aspect ratio of the small and large images should match up. For example, if your small image is 300px wide by 400px high, you have an aspect ratio of 3:4. Your large image should also have this aspect ratio, so it could be 900px wide by 1200px high, 1500px wide by 2000px, etc.
- The size of the stage (where the larger image is displayed) is calculated as the scaling factor times the lens width & height. So, you can fine tune the size of the stage by changing the lens width and height. For example, if your scaling factor is 3 (the large image width and height is 3 times the small image width and height), and the lens is 100px by 100px, your stage size will be 300px by 300px.
- If you have a particularly big large image, you may want to set preload to false. This delays loading the large image until the show event (click or mouseover).
Examples/Demos
Example 1: using defaultsMouse over image to magnify, mouse out to hide. |
||
|
Markup: <a href="pages/jquery/magnify/britbig.jpg" id="d1" > Javascript: $("#d1").magnify(); |
|
Example 2: custom optionsClick image to magnify, click to hide. |
||
| Markup: <a href="pages/jquery/magnify/flowerbig.jpg" id="d2"> <img src="pages/jquery/magnify/flowersmall.jpg" border="0"> </a> Javascript:
}); |
|
|
Configuration
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.
Markup
The basic html configuration is as follows:
<a href="path/to/larger/image.jpg" id="example1"><img src="path/to/smaller/image.jpg">
</a>
Javascript
To use the default settings:
$(document).ready(function() {
$("#example1").magnify();
}
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.
$("#myimageid").magnify({
onBeforeShow : function() {
if ($.browser.msie && $.browser.version == '6.0')
$("select").css("visibility","hidden");
},
onAfterHide : function() {
if ($.browser.msie && $.browser.version == '6.0')
$("select").css("visibility","visible");
}
});
Download
jquery.magnify-1.0.2.js (13K)
jquery.magnify-1.0.2.pack.js (8K)
jquery.magnify-1.0.2.min.js (10K)
History
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
Contact
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.