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
2009-06-24 12:31:22