Ever wanted to add a magnifying glass effect to your product images for an awesome zoom-in and a great user experience ? You’ll be surprised to know that using CSS3 and jQuery, it’s really easy to integrate this effect to your website or webapp.
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
Demo First
Let’s Start
Well, the entire idea is based on this Walkthrough from TCP. I just had the time to convert the code from the walkthrough into a dead simple plugin and that’s what I would like to talk about. Although the walkthrough does an excellent job at explaining how things work, I would still like to quickly skim over the basic concept in the plugin’s context, that I developed.
The Logic
The basic idea is to have a large image, say 800×400 that we scale down to say 400×200 using the width
html attribute or the CSS property. Having the class magniflier
is important, as it is what our Javascript code is going to check for. The simple markup:
<img class="magniflier" src="http://mysite.com/myimage.png" width="400" />
Then on mousehover
we bring on a magnifying glass over the image. The glass effect is simply achieved with basic CSS3 shadows and rounded corners:
.glass { width: 175px; height: 175px; position: absolute; border-radius: 50%; cursor: crosshair; /* Multiple box shadows to achieve the glass effect */ box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25); /* hide the glass by default */ display: none; }
The glass is initially created using jQuery which is basically just a div.glass
element. It remains hidden until the mouse is hovered over the image, which is when it appears using the jQuery fadeIn
method. It is interesting to note that if we use 10 images, then we’ll only have 1 glass element instead of 10s. This is how we create the element dynamically:
// Add the magnifying glass if ($('.magniflier').length) { var div = document.createElement('div'); div.setAttribute('class', 'glass'); var glass = $(div); // For later reference/usage $('body').append(div); }
Remember, when the mouse is hovered over an image, the glass’s background-image
is set to the original image that has larger dimensions compared to our scaled down version or you can also specify a different image in the data-large
attribute if you would like to:
<img class="magniflier" src="http://mysite.com/myimage.png" data-large="http://mysite.com/mylargeimage.png" />
It is important to calculate the dimensions of the large version of the image used for the zoomed-in preview. I have explained how to do it in one of my earlier posts. The calculated width and height are stored in native_width
and native_height
respectively.
When you have the exact size of the larger version, all you need to do is use a simple little formula to calculate the proper background-position
offsets for the magnifying glass based on the mouse positions.
var magnify = function(e) { // The background position of div.glass will be // changed according to the position // of the mouse over the img.magniflier // // So we will get the ratio of the pixel // under the mouse with respect // to the image and use that to position the // large image inside the magnifying glass var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1; var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1; var bg_pos = rx + "px " + ry + "px"; // Calculate pos for magnifying glass // // Easy Logic: Deduct half of width/height // from mouse pos. var glass_left = e.pageX - ui.glass.width() / 2; var glass_top = e.pageY - ui.glass.height() / 2; // Now, if you hover on the image, you should // see the magnifying glass in action ui.glass.css({ left: glass_left, top: glass_top, backgroundPosition: bg_pos }); return; };
The formula to calculate the position of the magnifying glass based on the mouse position (relative to the document) was easy. All we had to do is deduct half of the width and height of the glass from the mouse positions and use those values as the left and top offsets of the glass.
But the key part of this entire thing, is the formula to calculate the background’s position for the glass that places the large preview of the image properly, leading to the magnification. Let’s break that down:
// Breakdown of: // var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1; // var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1; // var bg_pos = rx + "px " + ry + "px"; // The background position of div.glass will be changed // according to the position of the mouse over img.magniflier // So, first lets get the ratio of the pixel // under the mouse pointer with respect to the image var rx = mouse.x/$("img.magniflier").width(); // Corresponding pixel on the large image var large_x = rx * native_width; // Centering the background inside the glass large_x = large_x - $('div.glass').width() / 2; // Finally, since we're specifying px offsets we'll // have to negate the x/y offset large_x = large_x * -1; // Repeat the same for `large_y` // `large_x` will be the `left` offset // `large_y` will be the `top` offset
Read the comments in the above code for proper understanding of the logic behind the formula.
Boom! That’s all for our simple little feature. No one is stopping you from digging through the code in the Demo ;-).
Usage
- Put the Javascript and CSS code in different files and load them using
script
andlink
tags. - Use the class
magniflier
to enable the effect on any image you want to. - Use the
data-large
attribute if you would like to use a different image for the zoomed version. So basically, the jquery code checks forimg.attr('data-large')
with a fallback toimg.attr('src')
.
and… we’re done! \o/
Final Words
It was a quick work from me and I am sure the code can be improved massively. Feel free to use it and share any improvements that you make.
Now you have an uber simple-to-use magnifying glass plugin for your next project!
Sir, If we make a magnifier extension for Chrome, then what should be the code to magnify any image we like or see on the webpages. Please reply.
Thank you.
Add the
magniflier
class to the images via JSThe best Image Zoom! Thank you very much. Clean Code, good comments and excellent design. I’m using at my site.
Hi I can get the css and the html to work, as in the images are where they should be however I can’t seem to get the mouse over and enlarge js to work. Is there any advice you can give on what I may be doing wrong? Thank you
Hi, this is really great article, i have implemented & this works fine for desktops but for ipad it has issue of touch event. Is there any solution?
how can i make this work for background images pls?