22
Sep

How to add a magnifying glass to your lightbox enabled images

I’ve recently installed Fancybox (my new favourite lightbox plugin for jQuery) so you guys can zoom in on selected images on the blog rather than squinting and trying to view images that are only 448px wide. The only problem was, it wasn’t obvious that you could click an image to zoom in on it.

So I thought it’d be nice that when you roll over an image that you could zoom in on, a magnifying glass icon would appear on top of the image indicating you can zoom in. I did a few searches first to check that I wasn’t re-inventing the wheel but had no luck, I’m sure there is something similar or better out there though, if there is let me know.

An example of what the code does

Go ahead, roll over the image, see the magnifying glass, then click the image to zoom in. Please remember, my code doesn’t do the image zooming, Fancybox does.

The jQuery code

This is the full code, but I suggest you read on for an explanation. If you just want to get this to work on your own site, change the img src (on line 7) to your own magnifying glass image, add this around your images : <a class="zoom">...image code...</a> and make sure you’ve got the jQuery code below on your page somewhere.

var loadGlass = 1;
 
$('a.zoom img').hover(function(){
 
	if(loadGlass == 1) {
 
		$('body').prepend('<img id="magnify" style="position: absolute;" src="http://www.nouveller.com/wordpress/wp-content/themes/maroon-moon/images/icons/magnify.png" alt="" width="32" height="32" />');
 
	}
 
	var p = $(this);
 
	var position = p.position();
 
	$('img#magnify').css({'top' : position.top+20, 'left' : position.left+20});
 
	$('img#magnify').show();
 
},function(){
 
	$('img#magnify').hide();
 
	loadGlass = 2;
 
});

The explanation

Right first we create a variable. This will make sure that we don’t load the magnifying image onto the page more than once as we use jQuery to load the image on line 7.

var loadGlass = 1;

Now we create a function that will activate when we hover over an image that has a link around it with the class of zoom

$('a.zoom img').hover(function(){

If the loadGlass variable is equal to 1 we will load the magnifying image.

	if(loadGlass == 1) {
 
		$('body').prepend('<img id="magnify" style="position: absolute;" src="http://www.nouveller.com/wordpress/wp-content/themes/maroon-moon/images/icons/magnify.png" alt="" width="32" height="32" />');
 
	}

Then we get the position of the image using these two variables.

	var p = $(this);
 
	var position = p.position();

All that’s left for the roll over to do is to position the magnifying image 20 pixels more the than rolled over image’s y position and 20 pixels more than it’s x position, then show it, if it’s been previously loaded and hidden.

	$('img#magnify').css({'top' : position.top+20, 'left' : position.left+20});
 
	$('img#magnify').show();

Lastly we set a function to run for when you roll off the image. We hide the maginifying image and then set loadGlass to 2 so that the if statement on line 5 won’t load the image again. As the image is a transparent PNG it will add several images over the top of each other causing the transparent black to become solid.

},function(){
 
	$('img#magnify').hide();
 
	loadGlass = 2;
 
});

Author: Benjamin Reid

My name is Benjamin Reid, I live in the UK and keep the magic locked into this site.

Subscribe to the RSS feed some design goodness, get in on the upcoming software give-aways!

This entry was posted on Tuesday, September 22nd, 2009 at 12:56 pm and is filed under jQuery & tagged with Glass, jQuery, Lightbox, Magnifying, Zoom. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

28 Responses | Make a comment

Callum Chapman wrote on September 22, 2009

Great little tutorial

Reply
Chimpanzee wrote on September 28, 2009

That’s really nice and very useful. Just one thing - the magnifying glass flickers as you move your cursor over the actual icon. I guess this is because the mouse is no longer over the picture but is instead over the icon - this causes the icon to disappear, leaving the mouse over the picture again, making the icon re-appear. (Firefox 3.5)

Reply
Leonardo wrote on October 3, 2009

I think, but please correct me if I’m wrong, that the flickering of the magnifying glass can be taken care of if the image is placed in a DIV and then the DIV is used as the trigger for the hover event.

Reply
- Nouveller wrote on October 4, 2009
  
  Yeah that would work, it’d just mean more work for the browser.
  
  Reply
twe4ked wrote on October 10, 2009

Cheers, just chucked this in the photo theme for evoke

Reply
15 Handpicked Fresh and Useful jQuery Tutorials wrote on December 2, 2009

[...] 9. Add a Magnifying Glass Lightbox Enabled Images [...]

Reply
Mathias Bynens wrote on December 3, 2009

It sucks you can’t just click the magnifying glass to magnify the picture, though.

Reply
- Nouveller wrote on December 3, 2009
  
  It would be possible. I’ll do a revised version that doesn’t have the buggy flash magnifying glass and the ability to click it too!
  
  Reply
15 hand picked Jquery Tutorials :: Reflex Stock Photo Blog wrote on December 7, 2009

[...] 9. Add a Magnifying Glass Lightbox Enabled Images [...]

Reply
fenderflip wrote on January 19, 2010

I can’t get the code to work, let’s start with where do you put the code?

Reply
- Nouveller wrote on January 20, 2010
  
  It needs to be included in script tags in the head, check mine for an example. http://www.nouveller.com/wordpress/wp-content/themes/maroon-moon/scripts/global.js
  
  Reply
  - fenderflip wrote on January 22, 2010
    
    Thank you so much!
Troy Olson wrote on March 12, 2010

Hmm, am I doing something wrong here? The magnifying glass shows up, but near the header and not over the image. It’s like there is a problem with the position, but I’m not quite sure what to edit. Any ideas/help would be fantastic.

Example: http://olsonfamilymatters.blogspot.com/2010/03/new-picture-of-madelyn.html

Reply
- Nouveller wrote on March 12, 2010
  
  It may be due to the parent div of the image’s anchor tag set to either absolute or relative position, as this may affect the positions picked up by the jQuery.
  
  I’m working on a plugin similar to this, so keep an eye out.
  
  Reply
Webmaster Blog wrote on June 21, 2010

Works Great! Thanks for this, will write an article about it on my Blog!

Reply
Rob S. wrote on July 20, 2010

I am using the “FancyBox for Wordpress” plugin to add the lightbox functionality to my blog (I agree it is the best lightbox effect out there… super smooth). Anyway I added your script to the header of my theme but to no avail. Thought maybe the plugin was loading its scripts to my header after the your script already loaded so I moved your script to the footer but that didn’t work either. I feel like I am missing something simple here but I just can’t figure out what that is.

Reply
Zuzu wrote on August 2, 2010

Hello. Great tut. But I don’t know where I should apply the codes to. I’m using blogger.

Reply
James wrote on August 12, 2010

This would be a sweet Wordpress plugin.

Reply
Roy wrote on September 7, 2010

Just what I was looking for. But I have the same problem too the magnifying glass appears on the header.

Reply
thumbnail wrote on April 4, 2011

what you also could do is a ajax callback to a php script, that makes a magnifying glass onto your image, saves it in a thumbnail folder.
and on a hover it just changes the src attribute, to the one with the magnifying glass.
maybe with a little fade in/out

would cost way more server load anyway…

Reply
thumbnail wrote on April 4, 2011

just got another thought, can’t you just set the [code]$(’a.zoom img’).hover(function(){[/code] for the magnifying glass div as well?

Reply
10 Must See JQuery Latest Tutorials Beginners and Advance Level wrote on June 15, 2011

[...] Imitating the WordPress Comment Backend9. Image replacement gallery10. Styling different link types How to Add a Magnifying Glass To Your Lightbox Enabled Images Very professional and interesting tutorial for creating your own zooming images system. [...]

Reply
10个既绚又实用的JQuery特效教程 | 末路深蓝 wrote on June 22, 2011

[...] 5.如何添加图片放大镜效果 [...]

Reply
Ross wrote on August 16, 2011

Thanks, perfect colour magnifying glass image that I wanted too! Thank you very much Ben

Reply
Popcorn Design wrote on October 17, 2011

Thanks for the great resources, I am just getting stuck into jQuery.

Reply
Привет.. здесь можно не плохо скачать на телефон wrote on November 4, 2011

I?m no longer sure the place you’re getting your info, however good topic. I must spend some time finding out much more or working out more. Thank you for wonderful info I was in search of this info for my mission.

Reply
Photoshop wrote on November 16, 2011

Photoshop…

[...]How to add a magnifying glass to your lightbox enabled images | Nouveller[...]…

Reply
雁南飞的博客 » 10个既绚又实用的jQuery特效教程 wrote on December 6, 2011

[...] 5.如何添加图片放大镜效果 [...]

Reply