Tutorial jQuery (WordPress) – Carousel Gallery

Appuntamento che ritorna con i tutorial jQuery, dove andiamo a studiare tecniche per migliorare la user experience dell’utente finale.

Oggi andiamo a vedere in particolare come creare una gallery di miniature in jQuery sfruttando il plugin jScrollPane. L’intenzione è quella di creare una gallery facilmente adattabile poi a WordPress e in particolare al plugin nextgen gallery.

Guarda subito la demo per capire quello che si vuole realizzare.

In generale per realizzare gallery di questo tipo il plugin ideale è jCarousel: questo utilizza le liste non ordinate (<li></li>) per i vari elementi, mentre il plugin nextgen gallery utilizza dei div, e quindi non riusciamo ad utilizzarlo per lo scopo di questo tutorial.

E ora entriamo nei dettagli del tutorial.

Passo 1. Scaricare i file necessari.

Prima di iniziare procurati la libreria jQuery e scarica il plugin jScrollPane e poi andiamo a richiamarli tra i tag head.

Passo 2. Codice HTML.

Vediamo il codice HTML che andremo ad usare per creare la gallery.

Come vedi sono per ogni miniatura è stato utilizzato un div. Questa non è la tecnica più giusta in quanto l’ideale sarebbe utilizzare una lista non ordinata, ma il plugin nextgen gallery genera le gallerie fotografiche utilizzando i div e quindi noi ci adattiamo.

Passo 3. Codice CSS.

Vediamo ora come modificare il file jquery.jscrollpane.css: dovremo in particolare modificare queste righe di codice.

.jspPane 
{
	position: absolute;
	width:690px !important; /*larghezza carousel */
}

.jspTrack
{
	background: #dde;
	position: relative;
	display:none; /*nascondo la barra di scorrimento */
}
.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 335px; /*posizione frecce */
	width: 20px; /* larghezza frecce */
	height: 100%;
	background: transparent;
}
.jspVerticalBar .jspArrowUp {
	background:url('../image/arrow-top.png') no-repeat;
	margin-top:8px;
}
.jspVerticalBar .jspArrowDown {
	margin-top:360px;	
	background:url('../image/arrow-bottom.png') no-repeat;
}

Questo invece il codice specifico per la gallery, definito nel foglio di stile style.css.

#gallery-container {
	height:404px; 
	width:690px;  
	margin: 30px auto; 
	background:#454444; 
	border-radius:10px;
}
#gallery-image {padding:30px;}
#gallery-image .thumb {
	float:left; 
	margin:0px 30px 30px 0; 
	width:300px;
}

Passo 4. Applichiamo jScrollPane

Infine applichiamo il plugin al div contente la gallery (#gallery-container), dove è importante indicare di quanti pixel ci si deve spostare a ogni click sulla freccia (arrowButtonSpeed).

Poi potrai associare gli effetti di lightbox per l’apertura delle immagini, tecnica già affrontata in altri tutorial jQuery.

Ora potrai facilmente applicare questa tecnica a WordPress e in particolare al plugin NextGen Gallery, dove le uniche cose che cambieranno sono i selettori.

Scarica il sorgente

Guarda il tutorial