Quel est le meilleur module jQuery "cliquez sur une vignette et changez l'image principale"?

Voici ce que j'ai (tous les générées dynamiquement, si cela fait une différence) :

  • Une liste d'images
  • Une légende pour chaque image
  • Une vignette pour chaque image

La page de chargement avec une image plein taille et de toutes les vignettes. Lorsqu'un utilisateur clique sur une vignette, l'image plein taille montre que la nouvelle image avec sa légende. S'ils cliquent sur une autre vignette, l'image (et de la légende) de changer à nouveau.

Ce n'est pas très complexe. J'ai bidouillé une solution il y a quelques mois, mais j'ai besoin de le faire à nouveau et je suis en train de regarder cette merde de code et de penser qu'il y a à être une meilleure façon (et savoir jQuery, quelqu'un d'autre l'a déjà fait, et bien fait).

Pensées? Les liens?

Merci!

source d'informationauteur Eileen

  1. 3

    Voici un qui a l'air assez sympa, et il est écrit en jQuery: Photo Slider

    Et voici un autre que j'aime un peu mieux:
    Galleria

  2. 46

    La plupart des réponses ici sont comme tirer sur une mouche avec un canon !!

    $('#thumbs img').click(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
});

    c'est tout ce que vous devez .. 4 lignes de code .

    regardez ici : galerie-en-4-lignes

  4. 2

    Construction de krembo99 de la réponse qu'il a lié icije voulais partager ma solution que j'avais déjà mis en ligne des centaines de photos quand mon client a demandé une fonctionnalité de ce genre. Avec cela à l'esprit, en ajoutant quelques lignes supplémentaires pour le code fourni, j'ai été capable de trouver une solution qui conviennent à mon paramètres.

    J'ai également travaillé avec des images plus petites, donc je n'avais pas besoin de passer par la création de petites & de grandes versions d'un même fichier. 

    $('.thumbnails img').click(function(){

 //Grab img.thumb class src attribute
 //NOTE: ALL img tags must have use this class, 
 //otherwise you can't click back to the first image.

 var thumbSrc = $('.thumb').attr('src');

 //Grab img#largeImage src attribute
 var largeSrc = $('#largeImage').attr('src');

  //Use variables to replace src instead of relying on file names.
  $('#largeImage').attr('src',$(this).attr('src').replace(thumbSrc,largeSrc));
  $('#description').html($(this).attr('alt'));

});

    Voici comment mon code HTML ressemble.

        <img src="path/to/file1.jpg" id="largeImage" class="thumb">
    <div id="description">1st image Description</div>

    <div class="thumbnails">

     <img src="path/to/file1.jpg" class="thumb" alt="1st image description">
     <img src="path/to/file2.jpg" class="thumb"alt="2nd image description">
     <img src="path/to/file3.jpg" class="thumb" alt="3rd image description">
     <img src="path/to/file4.jpg" class="thumb" alt="4th image description">
     <img src="path/to/file5.jpg" class="thumb" alt="5th image description">

    </div>
  5. 1

    http://bradblogging.com/jquery/9-jquery-slideshow-applications-you-cannot-miss/

    Une page avec 9 différentes des diaporamas en jQuery prêt à utiliser

  6. 1

    Check out my galleria mise en œuvre: La conception de jardin de Paysagiste dans l'Essex Galerie

  7. 0

    Essayer Gallerifficil a tout ce dont vous avez besoin.