jQuery Magnifier

This project is now on GitHub: https://github.com/dio5/jquery.magnifier

What?

A small plugin to magnify images when you hover over them.

Demo

boat

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

Please find this project on GitHub: https://github.com/dio5/jquery.magnifier

For reference the older files are still available here:

Version 0.1
Version 0.2

Feedback

Please send all feedback to jquery-magnifier@dio5.com.

Note that if you got the plugin working, but need special features or want to use it for purposes that it wasn't intended for, that I'm currently not able to help, mostly because of lack of time. Your best bet is to open the source and change the script to your needs. Maybe someday I'll combine all the feature requests into a new release.

Thanks,

Dieter

Stuff

Search