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?