Have Geek Brain

Hot spot image

I want to replicate image scaling on this site: http://www.endless.com/adidas-Originals-adiracer-Trefoil-Sneaker/dp/B001I44OIG/183-5587133-4823042?ie=UTF8&cAsin=B001I44O2W&qid=124142066506612&asin % 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 hover over the boot on the left, an image with a large image appears on the right and shows the exact location that you are copying. Any idea on how I would go about doing this? The library that I can use iswill provide this functionality?

+1


source to share


2 answers


this is probably what you are looking for, have a look at the standard scaling example:



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

+2


source


I think it's pretty simple and you could write yourself something cool. I'll just give pointers here, feel free to ask questions if I don't understand.

With the mouse on the full shoe, set its position (X, Y) relative to it and change the position of the background in the zoom window. The zoom box will have a full size shoe as a background image.

You will need to do some calculations, for example if the mouse is at (10,10) and the image is twice as large as the preview, you want to display it at (20,20), something like this. The same goes for specific cases (corners, borders ...) and if you want the mouse pointer to be in the center of the window. This is more math than programming ^^



Hope it helps

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

0


source






More articles:


All Articles