jQuery: galleria di thumbnail con anteprima

Realizzare una galleria di thumbnail (miniature) di immagini con jQuery sarebbe semplice se volessimo che la nostra anteprima (l'immagine ingrandita) comparisse sempre nella stessa posizione al centro o al di sotto della galleria stessa. Invece vogliamo che quando l'utente fa click su una miniatura, l'anteprima dell'immagine compaia vicino alla miniatura stessa. Inoltre quando l'utente cliccherà sull'anteprima, vogliamo che questa scompaia da destra verso sinistra con un effetto di accelerazione. Quello che ci serve per il nostro esempio sono il posizionamento contestuale dei CSS e alcuni metodi delle animazioni jQuery. Vediamone i dettagli.

Nel CSS definiamo la galleria (il contenitore principale) come posizionata in modo relativo. Inoltre l'elemento che conterrà l'anteprima dovrà essere posizionato in modo assoluto e nascosto. Dato che il suo genitore ha position: relative, tutte le future posizioni dell'anteprima saranno calcolate in base al contenitore, non alla finestra del browser:

#gallery {
	width: 715px;
	margin: 0 auto;
	position: relative;
}

div.thumbs {
	height: 100%;
	padding-bottom: 1em;
	overflow: hidden;
}

div.thumbs img {
	float: left;
	width: 50px;
	margin-right: 5px;
	height: 55px;
	cursor: pointer;
}

#preview {
	width: 180px;
	height: 230px;
	position: absolute;
	display: none;
	border: 2px solid #ccc;
}

#preview img {
	width: 100%;
	height: 100%;
	display: block;
	cursor: pointer;
}

Con jQuery la prima cosa da fare è inserire un'immagine vuota all'interno dell'anteprima:

var preview = $('#preview', '#gallery');

$('<img/>').appendTo(preview);
  
var img = $('img', preview);

Le due variabili definite si riferiranno all'elemento di anteprima e all'immagine ivi contenuta (vuota perchè priva dell'attributo src). Ora dobbiamo eseguire un ciclo sulle miniature, prendere il loro attributo src e usarlo sull'immagine d'anteprima. Quindi dobbiamo associare due eventi click, uno per le miniature e uno per l'anteprima:

$('img', '#gallery').each(function() {
  
    var $img = $(this);
    var src = $img.attr('src');
    
    $img.click(function() {
    
      img.attr('src', src);
      
      preview.css({
        top: $img.position().top + 60,
        left: $img.position().left + 20
      }).fadeIn('slow');
    
    });
    
    preview.click(function() {
    
      $(this).stop().animate({
        left: - 9999
      }, 800, function() {
      
        $(this).hide().css({
          top: 0,
          left: 0
        });
      
      
      
      });
      
    
    });
  
});

Il click sulle miniature esegue queste azioni:

1. l'attributo src dell'immagine d'anteprima viene impostato su quello della miniatura corrente
2. l'elemento d'anteprima viene posizionato in modo assoluto usando le coordinate delle miniature e aggiungendo 60 pixel per l'asse verticale (una miniatura è alta 55 pixel) e 20 pixel per quello orizzontale
3. l'anteprima viene mostrata in assolvenza con il metodo fadeIn()

Il click sull'anteprima usa il metodo animate() per lo spostamento verso sinistra (meno 9999 pixel, ossia l'elemento esce dalla finestra del browser) e nella sua funzione di callback l'elemento viene prima nascosto e quindi riposizionato nell'angolo superiore sinistro della galleria.

Abbiamo scelto di usare eventi click perchè a livello di usabilità è problematico per un utente gestire i movimenti del mouse qualora avessimo scelto di utilizzare mouseover o mouseout.

Potete visionare l'esempio finale in questa pagina.