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

Posted by Davis Rousseau
Davis Rousseau
6,670 Points

Magnifying glass for images

Trying to add a magnifying glass for images. How can I get it to change when the image is swap for another? Here's the codepen http://codepen.io/davisrousseaudesign/pen/fCEcm

1 Answer

bleedcmyk
bleedcmyk
5,945 Points

Where do you want the magnifying glass to be?

Davis Rousseau
Davis Rousseau
6,670 Points

On every image on the right side. Click on the Oatmeal then rollover the large image on the right. I have it working on the first one but can seem to make it work on the other image.

bleedcmyk
bleedcmyk
5,945 Points

If I'm understanding what you're trying to do right, it looks like you are using #rightDisplay for your zoom, but because you arent swapping out the image in that div, you're only getting a single image (oatmeal) because its static?

<div id="rightDisplay">
  <img src="http://www.medline.com/media/mkt/products/furnishings/textiles/cubicle-curtains/allegro/allegro-oatmeal-large.jpg" class="zoom_07" id="currentImg" title="Oatmeal"></div>
<!--- End rightDisplay -->

You could maybe swap #currentImg to a class, and add/remove it from a bunch of div's with the other images in them?