Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Zoom Effect on a Product Image

I was wondering if someone knows how to implement a simple zoom that lets you hover over an image in a products detail page and see the whole product zoomed in. If so, how could I implement this?

5 Answers

Sorta what I am after. Maybe I wasnt clear, I am going to have a product which is a smaller image. I need to zoom in on that but at the same time i should be able to move my mouse from one end of the product to the other.

http://www.basspro.com/Bass-Pro-Shops-Johnny-Morris-CarbonLite-Baitcast-Reels/product/1110020501438/ Here is a example

Richard Duncan
Richard Duncan
5,568 Points

That's not what you asked for ;)

sorry, It was kind of hard to explain. The link is what I need to achieve

Richard Duncan
Richard Duncan
5,568 Points

You're looking at something along to the lines of drawing a box for the magnifying glass over the images and then expanding that section based on coordinates.

There a multiple map a zoom plugins available for jQuery out there, probably not worth the time to develop a new solution. This was the top hit on my google search, looks pretty decent to me.

possible using css? My project is a bit complex and cant figure out how to implement it.

Richard Duncan
Richard Duncan
5,568 Points

No unfortunately not possible with CSS