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.
2 Commenti
Grazie per il post utilissimo.
Conoscevo già JCarousel, ma mi ha sempre dato dei problemi, e il tuo post chiarisce davvero bene come sfruttarlo al meglio 🙂
Al momento sto cercando uno slider privo di thumb, per costruire una homepage in cui scorrano 4 foto temporizzate (in cui l’utente non deve avere il controllo)…si lo so benissimo che non è una soluzione usabile, ma questo è quanto richiesto dal cliente 😉
Hai qualche suggerimento? Secondo te si può customizzare questo plugin jQuery?
Grazie per ogni indicazione 😀
Ciao Emanuela, puoi postare il link di un esempio di quello che vorresti realizzare?