Comment changer d'image avec jquery?

Question

J'ai une configuration simple avec un grand conteneur d'image et 3 petits conteneurs d'onglets. Maintenant, quand je clique sur la vignette, je veux changer la grande image et la petite vignette, de sorte que le grand conteneur d'image a maintenant la plus grande vignette et le conteneur de vignettes affiche la vignette de la grande image avant.

<div class="thumbnailFloat"> 
    <img src="data/img_2.jpg" width="60" > 
    <img src="data/img_3.jpg" width="60" > 
    <img src="data/img_4.jpg" width="60" > 
</div> 

<div class="imageFloat"> 
    <img src="data/img_1.jpg" width="180" height="250"> 
</div> 

Merci de votre aide.

Answer 1

Essayez cet exemple non testé:

Je vous suggère d'utiliser une carte d'identité pour la grande image.

<div class="thumbnailFloat"> 
    <img src="data/img_2.jpg" width="60" > 
    <img src="data/img_3.jpg" width="60" > 
    <img src="data/img_4.jpg" width="60" > 
</div> 

<div class="imageFloat"> 
    <img id="bigImage" src="data/img_1.jpg" width="180" height="250"> 
</div> 

---

$(function() { 
    $('.thumbnailFloat img').click(function() { 
     var oldSource = $('#bigImage').attr('src'); 
     var newSource = $(this).attr('src'); 
     $(this).attr('src', oldSource); 
     $('#bigImage').attr('src', newSource); 
    }); 
}); 

Answer 2

$(function() { 
    $("div.thumbnailFloat img").click(function() { 

     var thumbElement = $(this); 
     var imageElement = $("div.imageFloat img"); 

     // Capture the src of the thumbnail we clicked. 
     var thumbSrc = thumbElement.attr('src'); 
     var imageSrc = imageElement.attr('src'); 

     // and now swap the image src attributes 
     imageElement.attr('src', thumbSrc); 
     thumbElement.attr('src', imageSrc); 

    } 
}); 

Si vous faites cela dans la production, vous avez probablement également besoin optimisé miniatures et les versions pleine taille de vos images dans des dossiers séparés, dans ce cas, vous aurez besoin pour modifier le SRC attributs quelque chose comme:

var thumbSrc = thumbElement.attr('src').replace('/thumbs/', '/images/');