Magnifying glass for image zoom using Jquery and CSS3

nodexy

So cooooooool !

jdev

not working on my side… latest chrome on w7

jdev

i mean after the video has stopped… anyway, this is brilliant!!!

Ajdin

Thanks for sharing, will definitely use

@andi1984

Really nice, but the small iphone picture change it’s position if I fade out the magnifier to the bottom. But I didn’t found the bug itself. But, nevertheless: Really nice work!

James

Hey there,

How do i get this to run on my webpage?

how do i intialize the Java on my webpage?

Does anyone have a live example? or can anyone help?

Thanks
James

Robert

This is very cool, and worked first time when I experimented with it.
One question: what if I want to replicate the magnifying glass across numerous images?
One observation: on older IE versions the magnifying effect works, but without the glass around it – because older IE doesn’t support one or both of the border-radius or the box-shadow in CSS3. But that’s always the issue with older IE of course.

Really well done, and thanks for really eye-opening tutorial.

Jamison

I have most of it working, but the large image is not moving, can some one check out my test page and tell me what im doing wrong http://sterlingridge.turnpostadmin.com/interactive-map/

Thanks
Jamie

Jamison

Actually it works ok in firefox and safari but chrome is the issue

John Bash

This is awesome. Just playing with it…

Imran Latif

Nice Work. I have done a similar thing by using HTML5 Canvas and it also works fine, I used Canvas because it gives us a lot of flexibility and we can even zoom-in other Canvases. If you like to see my work, I would love to share it with you. :-)

Andrew

This is just beautiful! Thank you.

Could anyone tell me how to get the magnifying glass to offset about 50px above the click? I am trying to use this on a touch device and my thumb keeps getting in the way.

todi

@Andrew: Did you know you can play with the code directly here on the site?
Look for the following line in js and subtract by 50, done!

var my = e.pageY – magnify_offset.top;

Stijn

Marvellous work!
By adding cursor:crosshair; it becomes even cooler ;-)

Thanks for sharing!

Flavio

In IE9 doesn’t work.

satbir

doesn’t work in IE 8

lee

so cool ,awesome

mikec

Beautiful effect.
Any one got a fix for IE9 ?

Patrick

I’ve got it working well, but the zoomed image doesn’t follow the small one beneath it. Any insights?

martin

how do i use this for a website

Eid Shkhaidem

I don’t know who you are, I don’t know what you do.. but what I know is that who share knowledge with others deserve the best respect ever!!!!

chints

awesome & it is free!!!

moni kumar sinha

i tried this type zoom

Yap Kwang Yik

Is it able to make this workable in mobile browser?

lucky

help …..
i need help to add the code so that mor ethan one image can be zoomed into. i have tried for the past couple days but this only works for one image??

need help asap.

Dan

I’m trying to use a square image (large=1200px and small=200px) instead of rectangular like in your example.
When I hover the image, only the top left side can be viewed.
What do I have to change in coding to make it work with a square image?

Regards,
Dan

m.karthi

i apply the code fully but it not working. image is appear but zooming is not working