Qual è il miglior jQuery "fai clic su una miniatura e cambia l'immagine principale" modulo?

Question

Ecco quello che ho (tutti generati dinamicamente, se questo fa la differenza):

• un elenco di immagini
• una didascalia per ciascuna immagine
• Una miniatura per ogni immagine

La pagina dovrebbe caricare con un'immagine a dimensione intera e tutte le miniature. Quando un utente fa clic su una miniatura, l'immagine a dimensione intera mostra quella nuova immagine con la sua didascalia. Se fanno clic su un'altra miniatura, l'immagine (e la didascalia) cambiano di nuovo.

Non è molto complesso. Ho messo insieme una soluzione un paio di mesi fa, ma ho bisogno di farlo di nuovo e sto guardando questo codice schifoso e pensando che ci deve essere un modo migliore (e conoscendo jQuery, qualcun altro l'ha già fatto, e fatto bene).

Pensieri? Link?

Grazie!

Answer 1

Qui è uno che sembra molto carino ed è scritto in jQuery: Photo Slider

Ed ecco un altro che mi piace un po 'meglio: Galleria

Answer 2

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

Una pagina con 9 diverse presentazioni di foto in jQuery pronto per l'uso

Answer 3

Hai provato Lightbox? http://leandrovieira.com/projects/jquery/lightbox/

Answer 4

Partenza mia implementazione galleria: Garden design Landscaper in Essex Gallery

Answer 5

Prova Galleriffic, che ha tutto il necessario.

Answer 6

Molte delle risposte qui sono come sparare una mosca con un cannone !!

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

questo è tutto ciò che serve .. 4 linee di codice.

un'occhiata qui: gallery-in-4-lines

Answer 7

costruzione al largo di krembo99's answer he linked here, ho voluto condividere la mia soluzione, come avevo già caricato centinaia di foto quando il mio cliente aveva chiesto una funzione come questa. Con questo in mente, aggiungendo alcune righe extra al codice fornito, sono riuscito a ottenere una soluzione che si adattava ai miei parametri.

Stavo anche lavorando con immagini più piccole, quindi non ho avuto bisogno di passare attraverso la creazione di piccole versioni dello stesso file &.

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

}); 

Ecco come appare il mio HTML.

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