jQuery Magnifier
What?
A small plugin to magnify images when you hover over them.
Demo
How?
You need 2 images, a small one used to hover, and a large one to link to.
<a href="img/large.jpg" rel="magnify">
<img src="img/small.jpg alt="My small image" width="500" height="335">
</a>
Make sure you add a width and a height on the image. On the link you put a rel-attribute with the value of “magnify”.
In your javascript code you can trigger the plugin like this:
jQuery(function($)
{
$('a[rel*=magnify]').magnify();
});
There's a few options you can define in the magnify() function:
jQuery(function($)
{
$('a[rel*=magnify]').magnify(
{
lensWidth: 160, // width of the lens
lensHeight: 160, // height of the lens
link: true, // clicking goes to the large image
delay: 500 // time before lens is shown
});
});
To change the look and feel of the lens, sensor or preloader, open up jquery.magnifier/css/jquery.magnifier.css and do your thing.
Troubleshooting
If you have any trouble with the plugin behaving weird, you can do the following:
- Check if your html is correct, all tags nested correctly.
- Make sure you specified a width and a height on the image (eg width="400" height="300" not: width="400px")
- Try using $(window).load(function(){ $('a[rel*=magnify]').magnify(); }); instead of the $(document).ready() function.
- Still issues after that, contact me, I'm happy to help whenever there's a spare moment. (See below.)
Download
The download is a zip package with a fully working sample.
Changelog
0.2: added 'delay', better image preloading, rewrote the whole plugin for nicer code.
Feedback
Please send all feedback to jquery-magnifier@dio5.com.