background-position<\/code> offsets for the magnifying glass based on the mouse positions.<\/p>\n\r\n var magnify = function(e) {\r\n\r\n \/\/ The background position of div.glass will be\r\n \/\/ changed according to the position\r\n \/\/ of the mouse over the img.magniflier\r\n \/\/\r\n \/\/ So we will get the ratio of the pixel\r\n \/\/ under the mouse with respect\r\n \/\/ to the image and use that to position the\r\n \/\/ large image inside the magnifying glass\r\n\r\n var rx = Math.round(mouse.x\/cur_img.width()*native_width - ui.glass.width()\/2)*-1;\r\n var ry = Math.round(mouse.y\/cur_img.height()*native_height - ui.glass.height()\/2)*-1;\r\n var bg_pos = rx + "px " + ry + "px";\r\n\r\n \/\/ Calculate pos for magnifying glass\r\n \/\/\r\n \/\/ Easy Logic: Deduct half of width\/height\r\n \/\/ from mouse pos.\r\n\r\n var glass_left = e.pageX - ui.glass.width() \/ 2;\r\n var glass_top = e.pageY - ui.glass.height() \/ 2;\r\n\r\n \/\/ Now, if you hover on the image, you should\r\n \/\/ see the magnifying glass in action\r\n ui.glass.css({\r\n left: glass_left,\r\n top: glass_top,\r\n backgroundPosition: bg_pos\r\n });\r\n\r\n return;\r\n };\r\n<\/pre>\nThe 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.<\/p>\n
But the key part<\/strong> 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:<\/p>\n\r\n\/\/ Breakdown of:\r\n\/\/ var rx = Math.round(mouse.x\/cur_img.width()*native_width - ui.glass.width()\/2)*-1;\r\n\/\/ var ry = Math.round(mouse.y\/cur_img.height()*native_height - ui.glass.height()\/2)*-1;\r\n\/\/ var bg_pos = rx + "px " + ry + "px";\r\n\r\n\/\/ The background position of div.glass will be changed\r\n\/\/ according to the position of the mouse over img.magniflier\r\n\r\n\/\/ So, first lets get the ratio of the pixel\r\n\/\/ under the mouse pointer with respect to the image\r\nvar rx = mouse.x\/$("img.magniflier").width();\r\n\r\n\/\/ Corresponding pixel on the large image\r\nvar large_x = rx * native_width;\r\n\/\/ Centering the background inside the glass\r\nlarge_x = large_x - $('div.glass').width() \/ 2;\r\n\r\n\/\/ Finally, since we're specifying px offsets we'll\r\n\/\/ have to negate the x\/y offset\r\nlarge_x = large_x * -1;\r\n\r\n\/\/ Repeat the same for `large_y`\r\n\r\n\/\/ `large_x` will be the `left` offset\r\n\/\/ `large_y` will be the `top` offset\r\n<\/pre>\nRead the comments<\/em> in the above code for proper understanding of the logic behind the formula.<\/p>\nBoom! That’s all for our simple little feature. No one is stopping you from digging through the code in the Demo ;-).<\/p>\n
Usage<\/h2>\n\n- Put the Javascript and CSS code in different files and load them using
script<\/code> and link<\/code> tags.<\/li>\n- Use the class
magniflier<\/code> to enable the effect on any image you want to.<\/li>\n- Use the
data-large<\/code> attribute if you would like to use a different image for the zoomed version. So basically, the jquery code checks for img.attr('data-large')<\/code> with a fallback to img.attr('src')<\/code>.<\/li>\n<\/ol>\nand… we’re done! \\o\/<\/p>\n
Final Words<\/h2>\n
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.<\/p>\n
Now you have an uber simple-to-use magnifying glass plugin for your next project!<\/p>\n","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[52,62,61],"_links":{"self":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/578"}],"collection":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/comments?post=578"}],"version-history":[{"count":16,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/578\/revisions"}],"predecessor-version":[{"id":184675,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/578\/revisions\/184675"}],"wp:attachment":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/media?parent=578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/categories?post=578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/tags?post=578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"http:\/\/codetheory.in\/wp-content\/uploads\/2012\/10\/magnify.jpg\")
<\/p>\n