JQUERY Cliquez sur les événements pour plusieurs images

Question

Je crée une galerie d'images juste pour le plaisir d'élargir mes connaissances d'introduction de JQUERY. La galerie a un tas de vignettes qui, lorsqu'on clique dessus, montrera une grande image juste en dessous dans un diviseur d'image. De plus, lorsqu'une vignette est active (l'image est en cours de visualisation), la vignette est animée de 75px à 100px.

Je l'ai fait travailler manuellement en branchant des identifiants à toutes les images, puis en passant cela à travers chaque image d'ancrage. Structure ci-dessous:

<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> 

Ceci est répété pour toutes les vignettes. Quand un utilisateur clique, l'image est chargée dans <div id="image_viewer"></div>

Mon problème est que je veux rendre ma galerie aussi dynamique que possible. Je veux avoir un moyen de savoir sur quel lien un utilisateur a cliqué sans avoir à créer un identifiant pour chaque vignette.

Je peux obtenir le nombre de liens en utilisant , ce qui me donnera le nombre de liens miniatures qui existent. Mais comment puis-je savoir sur lequel on clique afin de montrer l'image pertinente à cette vignette?

Exemple: L'utilisateur clique sur 3 vignettes, montrer l'image Grand pour le pouce 3.

fonction loadImage:

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+'" />'); 



    } 

Je veux être en mesure de charger l'image de la classe que chaque étiquette a attribué à elle comme ceci:

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

J'ai besoin de connaître la valeur de tableau du clic, je peux accéder à ces informations.

-

L'une des raisons pour lesquelles je veux faire est que je puisse trouver les attributs spécifiques des vignettes (images titre alt src etc) et les brancher ailleurs.

Toute aide serait la bienvenue!

Answer 1

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

Le $(this) dans le code ci-dessus est un objet JavaScript qui contient une image quelconque a été cliqué. Vous pouvez ensuite l'interroger pour obtenir toutes les informations dont vous avez besoin.