Quando crei il tuo tema WordPress, ci sono un certo numero di elementi da considerare. Uno di questi elementi di pagina è una galleria di immagini dinamiche, che utilizza una lightbox o un tipo di pannello scorrevole. Entrambe queste interfacce utente si adattano bene al contenuto di un articolo. Dal momento che entrambi possono lavorare su siti web tipici, è bello avere il codice pronto per l'uso in qualsiasi altro tema del blog.
Per questo tutorial voglio concentrarmi sull'uso dell'effetto lightbox con un plugin chiamato jQuery lightBox. È molto semplice da configurare e personalizzare sul tuo sito web. Certo, ci sono alcune correzioni goffe all'interno del CSS, ma nel complesso il plugin funziona perfettamente. Esistono anche alcuni parametri alternativi in cui è possibile specificare proprietà come la velocità di animazione o l'opacità di sfondo.
Demo dal vivo - Scarica il codice sorgente
Iniziare
Il primo passo è scaricare una copia del codice sorgente principale dalla homepage del plugin. Puoi anche trovare questi file nel mio codice sorgente demo qui sopra. C'è un file CSS personalizzato che arriva per formattare i vari elementi lightbox. Altrimenti l'intestazione del documento è abbastanza pulita rispetto ad altre dipendenze extra.
Per questo esempio ho scaricato una copia locale della versione più recente di jQuery. Questo è l'unico requisito per far funzionare questo plugin lightBox senza problemi. Un altro punto importante da notare è il markup di HTML sulla pagina. Abbiamo bisogno di formattare la galleria di immagini usando le miniature che sono collegate all'immagine a più alta risoluzione.
La sintassi è piuttosto semplice e ho copiato un esempio qui sotto. Questo dovrebbe andare ovunque nel corpo della tua pagina e puoi teoricamente utilizzare qualsiasi elemento per contenere le miniature. Sono andato con una lista non ordinata perché lo schema ha senso in una lista di colpi di Dribbble casuali.
Il testo alt allegato ad ogni immagine verrà visualizzato solo quando la miniatura non è ancora stata caricata. Ma l'elemento titolo si comporta sia come suggerimento sia come didascalia dell'immagine. Questa è una caratteristica davvero carina se ti piace l'idea delle gallerie di lightbox con didascalie. E puoi impostare manualmente il testo della didascalia in modo che sia diverso dal titolo usando i parametri della funzione.
Personalizzazione del CSS
All'interno del file jquery.lightbox-0.5.css possiamo trovare una serie di importanti selettori per l'interfaccia lightbox. Non è necessario modificare alcun codice CSS per far funzionare il plugin. Ma penso che valga la pena capire cosa sceglieranno ciascuno degli ID e delle classi sulla pagina. In questo modo hai la possibilità di aggiungere nuovi effetti CSS3 o ridimensionare le icone secondo necessità.
Il mio tipico codice CSS è incluso nel foglio di stile del documento principale. Si noti in cima ho impostato un altro selettore per il # ID-contenitore-image-dati-box elemento. Questo div contiene effettivamente i dati di didascalia per l'immagine che esegue un'animazione a discesa. Io uso border-box per tutti i miei elementi di pagina e questo può rovinare la didascalia in cui non verrà visualizzata correttamente.
Ma una soluzione rapida può essere applicata semplicemente prendendo di mira questo contenitore e resettandolo contenuti-box. Quindi è molto più semplice forzare questo elemento lightbox a comportarsi normalmente, ma mantenere il layout adattato usando margini e padding border-box. Oltre a questa soluzione rapida, non ho incontrato altri problemi con il plugin CSS.
Come eseguire lightBox ()
L'ultimo segmento che dobbiamo esaminare sta chiamando questo plugin con la sua funzione JavaScript. C'è solo un selettore richiesto che dovrebbe indirizzare tutti gli elementi usando questa tecnica lightbox. Il mio esempio è collegato a tutti i link di ancoraggio all'interno di #thumbnails elemento. Potresti essere ancora più specifico e solo link di destinazione con determinati nomi di classe.
Si noti che la funzione stessa non richiede parametri aggiuntivi. Questo è il comportamento predefinito di base assoluto del plugin. E dal momento che è così facile da configurare potresti facilmente generare più gallerie separate tutte in esecuzione sulla stessa pagina! Se hai tempo extra, guarda attraverso le impostazioni extra del plugin per avere un'idea di cos'altro è possibile.
Puoi personalizzare lo stile del pulsante, l'opacità dello sfondo, il testo della didascalia dell'immagine e molto altro ancora. Di seguito è riportato uno snippet di esempio dal sito Web che utilizza solo alcuni di questi parametri. Giocaci e guarda cosa puoi costruire.
Demo dal vivo - Scarica il codice sorgente
Pensieri finali
Spero che questo tutorial possa essere utile ad alcuni sviluppatori là fuori. Mi piace trovare gallerie di immagini nei post del blog perché può essere una fantastica fonte di ispirazione. Ma richiede anche molto duro lavoro e impegno.È necessario avere un piano fin dall'inizio su come si vuole costruire un'interfaccia utente pulita ed equilibrata. Sentiti libero di scaricare una copia del codice sorgente e vedere se riesci a riprogettare questo plug-in per adattarlo al tuo blog o al layout del tuo sito web.