How to add a magnifying glass to your lightbox enabled images

Posted on

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.

large-droplet

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?

  • 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 :D

    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;

    });

    /* ]]> */

Add your comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>