Una galleria immagini in jQuery molto semplice da usare e veloce da modificare

In questo articolo troverete una piccola guida su come creare una galleria di immagini con l'aiuto di jQuery.

Come funziona la galleria di immagini in jQuery?

Partiamo subito con il funzionamento della galleria con un esempio pratico. Qui sotto trovate la galleria. Abbiate presente che l'intento principale di questa guida è quello di creare un esempio funzionale senza soffermarsi troppo sull'aspetto o sulla grafica. Se volete modificare la grafica potrete benissimo modificare il poco css di cui questa galleria è composta.

La galleria è composta da immagini piccole o thumbnail, che una volta cliccate aprono una visualizzazione in modalità slider, con un immagine grande centrale. In questa modalità di visualizzazione dell'immagine grande (tipo slider) si possono scorrere le immagini grandi corrispondenti agli thumbnail della galleria. La galleria in modalita slider è composta da un unica immagine che si può scorrere avanti e indietro con degli appositi bottoni e un bottone che serve alla chiusura della modalità in visualizazione slider.

Per potere essere usata la galleria deve avere la forma:

<div id="div-gallery">
	<a href="#url-immagine-grande"><img src="url-thumbnail" alt=""></a>
	...
</div>

Abbiamo un div con un id="div-gallery", questo div racchiude delle immagini che a loro volta sono racchiuse da degli anchor a, con href.

Il valore del href è molto importante. Esso è composto da un hash contrasegnato con il simbolo # dopo il quale viene inserito l'url dell'immagine grande.
In pratica si passa l'url dell'immagine grande come hash dell'ancor che racchiude l'immagine del thumbnail.

Si capisce? Magari guardando l'esempio il tutto diventa più chiaro. :D

Vanno inclusi il CSS e il JavaScript che trovate seguendo il link in fondo alla pagina. Che vi rimanda nella mia pagina github.
Ci siamo quasi...

Ultima cosa da fare è creare una variabile JavaScript di vostra scelta che conterrà la galleria e richiamare due codici JavaScript. Il primo serve per costruire la galleria jQuery vera e propria, il secondo serve nel caso in cui la dimensione della finestra cambi, per adattare la visualizzazione della modalità slider.
Il codice è:

var myGallery;
$(window).on('load', function() {
	myGallery = new CreateGallery({
		element: $('#div-gallery'),
		galleryTitle: 'Elemento della galleria numero',
		maxMobileWidth: 768,
		numMobileImg: 2,
		maxTabletWidth: 1024,
		numTabletImg: 3
	});
});
$(window).on('resize', function() {
	myGallery.sizeGallery();
});

La variabile in questo caso è var myGallery; ma potete chiamarla come vi pare. Non và cambiato invece il nome della classe CreateGallery ammeno che non si voglia mettere mano al codice della galleria.

La classe CreateGallery accetta 5 parametri.

  1. element: $('#div-gallery'), si passa come parametro obbligatorio l'elemento jQuery che corrisponde al div contenente la galleria.
  2. galleryTitle: 'Elemento della galleria numero', si passa come parametro facoltativo il titoletto che compare nella galleria in modalità slider.
  3. maxMobileWidth: 768 e numMobileImg: 2 sono due valori facoltativi che vanno impostati in coppia. Il primo valore indica la grandezza della finestra nella quale verranno visualizzati al massimo "numMobileImg" immagini. Si tratta della modalita mobile, piccoli schermi generalmente degli smartphone.
  4. maxTabletWidth: 1024 e numTabletImg: 3 hanno lo stesso comportamento ma per i tablet.

Questi valori sono liberamente modificabili per ottenere combinazioni che più vi interessano.

L'ultima parte sizeGallery è una funzione richiamata se la finestra viene ridimensionata. La galleria in questo caso si ridisegnera e avra un aspetto che si adatta, definito Fluido o Fluid in Inglese.

Galleria di immagini

Dove scaricare il codice della galleria di immagini?

Vi rimando a questa pagina GitHub per il codice che potrete liberamente scaricare.