Simple magnifier / zoom effect by jQuery & CSS3

October 28, 2011 Filed under: CSS,jQuery

Did you ever see a magnifier glass in a web page? When your mouse move over a small image, you could see the details in the magnifier glass? And would do you like to make the zoom effect in your own web page? Let’s write some simple lines by jQuery to have the task done.

Click here to see the demo page
Download the Demo pages

First, let’s put the image in the page, and give it a width and height to make it smaller.

HTML
<div class="zoom">
	<img  src="blueDoor.jpg" width="400" height="265" />
</div>

We will show the big image in the magnifier glass as background image, and change background image position while user move the mouse. If the mouse move out of the small image, we fade out the magnifier glass, vice versa. There is an illustration to show how we calculation the positions.

Let start the jQuery code:
$(document).ready( function(){
        var zoom = $(".zoom")
        var smallImg = $(".zoom img")
        //Add magnifier div in zoom container
        zoom.append("<div class='magnifierGlass'></div>");

        var glass = $(".magnifierGlass");
        var bgImg = "url(" + smallImg.attr("src") + ")";

        // Initial magnifer position
        var leftInitial = smallImg.offset().left - zoom.offset().left - glass.width()/2;
        var topInitial = smallImg.offset().top - zoom.offset().top - glass.height()/2 ;
        glass.css({
              backgroundImage: bgImg,
              backgroundRepeat: "no-repeat",
              backgroundPosition: "0px 0px",
              left: leftInitial,
              top: topInitial
                  });

        //get image's real width and height by creat a new image with same src attribution
        // then compare with the small image's width and height
        var newImage = new Image();
        newImage.src= smallImg.attr("src");
        var Wrate= (newImage.width - glass.width())/smallImg.width() ;
        var Hrate= (newImage.height - glass.height()) /smallImg.height();

        // magnifer moves with mouse move
        zoom.mousemove( function(e){

              var	Pleft  = e.pageX - zoom.offset().left-glass.width()/2;
              var	Ptop   = e.pageY -zoom.offset().top-glass.height()/2;
              var	left   = e.pageX-smallImg.offset().left;
              var	top    = e.pageY-smallImg.offset().top;
              var	bgLeft = left  * Wrate;
              var	bgTop  = top * Hrate;
              //Adding 15px is for seeing the zoom better while mouse in the edge.
              var	imgW   = smallImg.width() +15;
              var	imgH   = smallImg.height() +15;

             // if mouse position within the small image, magnifier shows
            if ( left > 0 & left < imgW &  top > 0  & top < imgH ){
                   glass.fadeIn().css({
                              left: Pleft,
                              top: Ptop,
                              backgroundPosition: "-" + bgLeft + "px -" + bgTop +"px",
                             })
                                                                    };
            //if mouse is outside of the small image, magnifier hides
            if ( left < 0 || left > imgW ||  top < 0  || top > imgH ){
                                                         glass.fadeOut();
                                                                      };																

                        }
            )
		})

In order to make the magifier glass looks round and crisp, we can try some new features of CSS3: the border-radius. The div is a square, and we make the border-radius as half of the width, so, the div will look like a perfect round shape. ( for IE8 and below, it’s still square, I think we can call it graceful degradation)

CSS
.magnifierGlass{
	-moz-border-radius:100px;
    -webkit-border-radius:100px;
    border-radius:100px;
	-moz-box-shadow:0 1px 9px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow:0 1px 9px rgba(0, 0, 0, 0.5);
    box-shadow:0 1px 9px rgba(0, 0, 0, 0.5);
    border:4px solid #f3f3f3;
    width:200px;
    height:200px;
    cursor:default;
    position:absolute;
    }
 

Note: The image I used here is from here

{12 Comments}

  1. David Says:

    Nice tutorial, thanks for sharing!

  2. Brandie Says:

    Thanks for writing such an easy-to-undesratnd article on this topic.

  3. Nico Says:

    This doesn’t work for me. I assume the portion in the circle needs to update continuously while hovering over the image. But it keeps static.

  4. PPI reclaim Says:

    Thank you for your article post. Fantastic.

  5. work and travel 2013 Says:

    Very good blog post. Much obliged.

  6. Smoke Says:

    Thanks for sharing… But as Nico, it didn’t work for me. The magnifier remains static, no matter where i place the pointer the image is the same…

  7. jamal ahmed Says:

    i place this script on my home page but i have different images in same page how its work in dirrent images with same div class zoom

  8. Nordin Says:

    Why is chaat so well-known amongst Indians? The tagsenins affiliated is the major tempting element in the many chaat objects you will normally arrive across roadside stalls crowded with men and women, all possessing chaat! Several a sweets store also sell chaat ready the hygienic way thereby drawing a lot more clients in contrast to roadside stalls. Few of the common chaat products involve dahi bhalla, paneer masala chilla, aloo tikki, kachori with sabji, paneer tikka, raj kachori, bhalla papri, lachha tokri, pani puri, bhel puri, matar kulcha, pao bhaji, and papri chaat. Most of these objects are prepared from flour dough with a mix of numerous other ingredients these as potato items, crispy fried bread, gram or chickpeas, tangy-salty spices, chilly and tamarind sauce. Each chaat item is served in a plate garnished with yogurt, clean green coriander leaves, and additional except the pani puri. Aloo tikki is a bit distinctive wherein boiled potatoes are smashed and created into small doughs and then fried in butter. After it is accommodated in a plate, it is garnished with yogurt, onion, spices, and coriander. So, check out your preferred sweets store and have chaat ready the hygienic way!

  9. loss weight pills Says:

    ZYQMnN I value the blog article.Much thanks again. Fantastic.

  10. buy clomid Says:

    Dqtyzb Thanks so much for the blog article.Thanks Again. Awesome.

  11. Romeo se Says:

    |

  12. Nachman rne Says:

    |

Leave a Reply

IMPORTANT!

To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)

Please leave these two fields as-is:

© All right reserved by Jessie Su. Powered by WordPress