Question

I’m creating an image gallery just for fun to expand my introductory knowledge of JQUERY. The gallery has a bunch of thumbnails which, when clicked on, will show a large image just below in an image viewer div. In addition, when a thumbnail is active (image is being viewed) the thumbnail animates from 75px to 100px.

I’ve got it working manually by plugging in id’s to all the images, and then passing that through each images anchor. Structure below:

<div class="thumbnails" id="thumbnail_1">
    <a href="#" class="thumb_link" onclick='loadImage("#thumbnail_1","#image_1", "1");'>
    <img src="image-url-#.png" alt="Image 1"  border="0"  id="image_1" class="thumb_img"  /></a> 
  </div>

This is repeated for all thumbnails. When a user clicks, the image gets loaded into
<div id="image_viewer"></div>

My problem is that I want to make my gallery as dynamic as possible. I want to have some way of knowing which link a user clicked on without having to create an id for every thumbnail.

I can get the number of links by using $(".thumb_link").length; which will give me the number of thumbnail links there are. But how can I tell which one is being clicked on in order to show the image relevant to that thumbnail?

Example: User clicks on 3rd thumbnail, show Large image for Thumb 3.

loadImage function:

function loadImage(thumb, id, imgNum){  
    $(thumb).animate({width:100, height:100},500); 
            $(id).animate({width:100, height:100},500); 
            $(thumb + " a").animate({width:100, height:100},500);


            $("#image_viewer").html('<img src="imagesurl-'+ imgNum + '.jpg" border="0" alt="image: '+ imgNum+'" />');



    }

I want to be able to load the image by the class that each tag has assigned to it like this:

$(".thumbnails").eq(whatever_the_index_value_is).animate({width:100, height:100},500);

I need to know the array value of the click so I can access this information.

—

One of the reasons I want to do this is so I can find the specific thumbnail attributes (image alt title src etc) and plug them in elsewhere.

Any help would be welcome!

Answer 1

 $(document).ready(function(){
   $(".thumb_link").click(function(event){
     event.preventDefault();
     check_image($(this));
   });
 });

The $(this) in the code above is a JavaScript object that contains whatever image was clicked on. You can then query it for whatever info you need.