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('
');
}
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('');
}
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;
});
31 comments
Callum Chapman wrote on
Great little tutorial
Chimpanzee wrote on
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)
Leonardo wrote on
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.
Nouveller wrote on
Yeah that would work, it’d just mean more work for the browser.
twe4ked wrote on
Cheers, just chucked this in the photo theme for evoke
Pingback: 15 Handpicked Fresh and Useful jQuery Tutorials
Mathias Bynens wrote on
It sucks you can’t just click the magnifying glass to magnify the picture, though.
Nouveller wrote on
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!
Pingback: 15 hand picked Jquery Tutorials :: Reflex Stock Photo Blog
fenderflip wrote on
I can’t get the code to work, let’s start with where do you put the code?
Nouveller wrote on
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
fenderflip wrote on
Troy Olson wrote on
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
Nouveller wrote on
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.
Webmaster Blog wrote on
Works Great! Thanks for this, will write an article about it on my Blog!
Rob S. wrote on
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.
Zuzu wrote on
Hello. Great tut.
But I don’t know where I should apply the codes to. I’m using blogger.
James wrote on
This would be a sweet WordPress plugin.
Roy wrote on
Just what I was looking for. But I have the same problem too the magnifying glass appears on the header.
thumbnail wrote on
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…
thumbnail wrote on
just got another thought, can’t you just set the [code]$('a.zoom img').hover(function(){[/code] for the magnifying glass div as well?
Pingback: 10 Must See JQuery Latest Tutorials Beginners and Advance Level
Pingback: 10个既绚又实用的JQuery特效教程 | 末路深蓝
Ross wrote on
Thanks, perfect colour magnifying glass image that I wanted too! Thank you very much Ben
Popcorn Design wrote on
Thanks for the great resources, I am just getting stuck into jQuery.
Привет.. здесь можно не плохо скачать на телефон wrote on
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.
Pingback: Photoshop
Pingback: 雁南飞的博客 » 10个既绚又实用的jQuery特效教程
Pingback: what are the effects Of smoking to Irritable Bowel Syndrome sufferers
wifi printer wrote on
whoah this blog is wonderful i like studying your posts. Keep up the great work! You know, lots of persons are looking round for this info, you could aid them greatly.
dave wrote on
hi, i wasn’t able to get it to work. could you help? not sure what I’m doing wrong. I’ve tried adding to a js file (see below) and also tried putting it on the post.php page, since I want this to work with posts.
here is a sample page: http://www.offpeakdesign.com/wp12/michael-shulman/
/* <![CDATA[ */
var jqu = jQuery.noConflict();
jqu( function () {
/* Fancybox */
/*jqu( "a[href$='.jpg'], a[href$='.jpeg'], a[href$='.png'], a[href$='.gif']” ).attr( ‘rel’, ‘lightbox’ );
jqu( “a[rel^='lightbox']” ).fancybox( { titleShow: false, overlayOpacity: .8, overlayColor: ‘#000′ } ); */
/* FitVids */
jqu( “.entry-content” ).fitVids();
} );
/*magnify glass*/
var loadGlass = 1;
$(‘a.zoom img’).hover(function(){
if(loadGlass == 1) {
$(‘body’).prepend(”);
}
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;
});
/* ]]> */