Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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