jQuery charge de l'image

Question

J'ai besoin d'aide dans jQuery. Ce que je veux faire est de créer une sorte de galerie de photos petite, très, très facile.

Je veux avoir quelques petites photos sur le côté gauche de ma page. En cliquant sur l'une de ces petites images, je voudrais charger cette image dans une autre div où elle est affichée en taille réelle.

<a href="image1_big.jpg" class="smallpics" /><img src="image1_small" /></a> 
<a href="image2_big.jpg" class="smallpics" /><img src="image2_small" /></a> 
<a href="image3_big.jpg" class="smallpics" /><img src="image3_small" /></a> 
<div id="bigpic" /><img src="image1_big" /></div> 

Tous mes attemts jQuery a échoué que je ne pouvais pas changer la source de l'image dans ce bigpic div.

Answer 1

Cela devrait le faire pour vous:

$(function(){ 
    $("a.smallpics").click(function(e){ 
     $("#bigpic").html('<img src="' + this.href + '" />'); 
     e.preventDefault(); 
    }); 
}); 

je aurais pu utiliser cette (au lieu de la ligne similaire dans l'exemple précédent):

$("#bigpic").empty().append($("<img />").attr('src', this.href)); 

Mais la première option sera effectivement exécuter c'est un peu plus rapide. Avec un seul appel, vous ne serez pas en mesure de faire la différence, donc si l'option deux est plus facile à lire ou à écrire, vous pouvez l'utiliser.