CODEWITHSUNDEEP
javascript
SacramentoJoe
SacramentoJoe

Reputation: 1229

image hot spot zoom

I'm looking to replicate the image zooming on this site: http://www.endless.com/adidas-Originals-adiracer-Trefoil-Sneaker/dp/B001I44OIG/183-5587133-4823042?ie=UTF8&cAsin=B001I44O2W&qid=1241466506612&asinTitle=adidas%20Originals%20adiracer%20Trefoil%20HG%20Sneaker&ref_=sw_1&asins=B001I44O2W%2CB001I457WS%2CB001LDJ2MM%2CB001HBH5LS%2CB001O9BJ4C%2CB001VNCNI2%2CB001LDJ7M2%2CB001LNNY44%2CB001LDJ2UE%2CB001OONDCS%2CB001HBH4FA%2CB001OOMWUW&refURL=%252Fb%252F241993011%253F&contextTitle=Search%20Results&fromPage=asinlist&suppressRedirect=1 When you mouse over the shoe on the left, it shows a box on the right that has a bigger image and shows the exact spot that you are copying. Any idea on how I would do this? A library that I can use that would provide this functionality ?

Upvotes: 1

Views: 1459

Answers (2)

John Boker
John Boker

Reputation: 83709

this is probably what you're looking for, look at the standard zoom example:

http://www.mind-projects.it/projects/jqzoom/

Upvotes: 2

marcgg
marcgg

Reputation: 66445

I think that's it's quite simple and you could code yourself something cool. I'll just give pointers here, feel free to ask questions if I'm not clear.

When the mouse is on the full picture of the shoe, get its position(X, Y) relative to that and change the background position of the "zoom box". The zoom box will have as a background image the full size image of the shoe.

You will need to do some calculation, like if the mouse is at (10,10) and the image is twice as big as the preview, you want to display it at (20,20), things like that. Same thing to handle specific cases (corners, borders...) and if you want the mouse pointer to be at the center of the box. Here it's more maths than programming ^^

Hope that helps

edit: of course if you don't want to do it manually, John's answer will be better suited for you !

Upvotes: 0

Related Questions