Was ist das beste jQuery "Klicken Sie auf ein Thumbnail und ändern Sie das Hauptbild" Modul?

Question

Hier ist, was ich habe (alle dynamisch erzeugt, wenn das einen Unterschied macht):

• Eine Liste der Bilder
• Eine Beschriftung für jedes Bild
• Eine Miniaturansicht für jedes Bild

Die Seite sollte mit einem Bild voller Größe und allen Miniaturansichten geladen werden. Wenn ein Benutzer auf ein Miniaturbild klickt, zeigt das Bild in voller Größe dieses neue Bild mit seiner Beschriftung an. Wenn sie auf ein anderes Thumbnail klicken, ändert sich das Bild (und die Beschriftung) erneut.

Es ist nicht sehr komplex. Ich habe vor ein paar Monaten eine Lösung gehackt, aber ich muss es noch einmal machen und ich schaue mir diesen beschissenen Code an und denke, dass es einen besseren Weg geben muss (und zu wissen, dass jemand anderes es schon getan hat und getan hat) es gut).

Gedanken? Links?

Danke!

Answer 1

Hier ist eine, die ziemlich gut aussieht und ist in jQuery geschrieben: Photo Slider

Und hier ist eine andere, die ich ein bisschen besser gefällt: Galleria

Answer 2

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

Eine Seite mit 9 verschiedenen Fotodiavorführungen in jQuery gebrauchsfertig

Answer 3

Haben Sie versucht Lightbox? http://leandrovieira.com/projects/jquery/lightbox/

Answer 4

Schauen Sie sich meine galleria Umsetzung: Garden design Landscaper in Essex Gallery

Answer 5

Galleriffic Versuchen Sie, es hat alles, was man braucht.

Answer 6

Die meisten Antworten hier sind wie eine Fliege mit einem Canon zu schießen !!

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

das ist alles was Sie brauchen .. 4 Zeilen Code.

hier: gallery-in-4-lines

Answer 7

Gebäude weg von krembo99's answer he linked here, wollte ich meine Lösung teilen, wie ich bereits Hunderte von Fotos hochgeladen hatte, als mein Client eine Funktion wie diese gebeten hatte. In diesem Sinne konnte ich durch Hinzufügen einiger zusätzlicher Zeilen zum bereitgestellten Code eine Lösung finden, die zu meinen Parametern passt.

Ich arbeitete auch mit kleineren Bildern, so hatte ich keine Notwendigkeit, kleine & große Versionen der gleichen Datei zu erstellen.

$('.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')); 

}); 

So sieht mein HTML aus.

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