I wrap each thumbnail with a link:
<a href="javascript:;" id="tnLink01"><img src="thumbnail01.jpg"
alt="" /></a>
This is the amateurish jQuery code I've conjured up:
$("a#tnLink01").click(function() {
$("#mainImage").attr({src:"another_large_image.jpg"});
});
I'll need one of these functions for every thumbnail and that seems
wrong somehow, so I'd really appreciate any helpfil tips and
strategies for switching a larger image when clicking thumnails.
You could make your css query less specific.
You could also automatically generate a large image url based on the content
of your thumbnail ie.
$("div.thumbnails img").click(function() {
var large_img = $(this).attr('src').split(".").shift() + '_large.jpg'
//gets image src part before period, adds suffix
$("#mainImage").attr('src'.large_img);
}
Above example is simple and assumes image on has 1 period in it!
Hope that helps,
Will
