Menu
Google has the coolest effects - once it was a Pac-man game, today is apparently the 160th anniversary of the first World Fair, and Google's logo has an image of it. They also turn the mouse into a magnifying glass that can sweep over the picture (the gold ring).
I'm wondering how they do that. It's obviously Javascript, and I looked at the page source, but it's not especially readable (no surprise).
833
To create image magnifier glass , you must add attribute data-magnifier-mode="glass" . You can use attribute data-lens-type to set type of magnifier lens . To set circle magnifier lens, use value circle . To change size of the lens, use attribute data-lens-size .
function magnify(imgID, zoom) { var img, glass, w, h, bw; img = document. getElementById(imgID); /*create magnifier glass:*/ glass = document. createElement("DIV"); glass. setAttribute("class", "img-magnifier-glass"); /*insert magnifier glass:*/ img.
Tap the three-dot Menu button found in the top-right corner of the screen. From the share sheet, select the “Markup” option. Now, tap the “+” button and choose the “Magnifier” option. You'll now see a magnifying circle in the middle of the image.
They draw an extra layer just on top of your product title, make it invisible, and force the customer to look at somewhere else instead of the cursor area. Image Magnifier is simple and neat, it works like a real magnifying glass. Set Up In Seconds, No Coding.
Looking at their source code, it seems they are using rather basic techniques to achieve this.
Ignoring all the embedded nifty animated gif's, there are basically two images - large, and small of the entire scene. The larger image is repeated thrice in the document. Look at the annotated image below to get a better idea of how the zoom works.
The portion inside the magnifying circle is split up in three div's - top, mid, and bottom. The overflow for each div should be hidden. Each div is relatively positioned inside the zoom circle. On mouse move, change the absolute position of the zoom circle to the mouse coordinates. Their example also uses CSS3 for the scaling and adding some animation delays.
Here's a sorta minimal reconstructed example.
Another example where we don't hide the div overflow to reveal the entire thing as a square.
200
Well, firstly, for anyone who wants to use such an effect, there are loads of jQuery plugins. Here are just a few:
Secondly, it's quite easy to achieve. Just load the full-size image, but give it a width smaller than it's actual width, so it is scaled by CSS. Then, use JavaScript+CSS to create a Div (the magnifying glass) with the same image as background, but change the background-position property to the corresponding scaled x,y coordinate that the user's mouse is currently on.
There are other ways of doing it I suppose, and Google might be doing it differently, but this is the most obvious way for me that comes to mind.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
