tags:

views:

40

answers:

1

i am creating a photo gallery and am currently stuck on recognizing which thumbnail links to which pic. im using an addEventListener function, kindly suggest the method to go about.

A: 

Not entirely sure what you mean here, but let me make a suggestion:

If your thumbnails all link directly to their larger counter-part, you can prevent them from navigating away from the page, and instead bring the larger image in asynchronously:

<ul class="thumbnails">
  <li><a href="bigImg1.jpg"><img src="bigimg1_thumb.jpg" /></a></li>
  <li><a href="bigImg2.jpg"><img src="bigimg2_thumb.jpg" /></a></li>
</ul>

With that markup, we could have the following jQuery:

$(".thumbnails a").click(function(e){
  e.preventDefault(); /* keeps us from actually leaving the page */
  alert($(this).attr("href")); /* tells us the path to our img */
});

Rather than having the alert, you could fade the big image in over the rest of the page, modally.

Jonathan Sampson