Funzionalità
Lo script pubblicato in questa guida vi consentirà di creare delle gallerie di immagini comodamente visualizzabili con un semplice click, le gallerie sono inseribili nelle pagine personalizzate, nei box di codice HTML e nei messaggi delle discussioni. Le immagini contenute nelle gallerie potranno essere, a vostra scelta, impostate con uno scorrimento manuale o automatico e ad ogni immagine potrà essere aggiunta una breve descrizione.
Installazione
Per poter utilizzare le gallerie nel forum inserite questo javascript nel box
Codice HTML che sarà mostrato in FONDO a tutte le pagine HTML
<script type="text/javascript" src="http://nb.forumfree.it/scripts/ace/nbgallery.js"></script>
Nel caso vogliate utilizzare le gallerie solo nelle pagine personalizzate, basta inserire il codice nella pagina personalizzata contenente la galleria, dopo tutti gli altri codici.
Per inserire una galleria, va utilizzato un codice HTML come questo (è un esempio con 3 immagini)
HTML
<span class="nb-galleries" data-class="class1" data-name="Gallery1" data-thumb="http://i.imgur.com/k36Ze7c.jpg" data-dim="400" data-timer="true" data-time="1000">
<span data-link="http://i.imgur.com/EPkrKag.jpg" data-description="desc test 1"></span>
<span data-link="http://i.imgur.com/r2jC1WR.jpg" data-description="desc test 2"></span>
<span data-link="http://i.imgur.com/JRJ4RtW.jpg"></span>
</span>
analizziamo il codice, costituito da uno span principale, a cui vengono aggiunti gli attributi di personalizzazione della galleria, e da un certo numero di span secondari, che contengono le immagini della galleria, gli attributi dello span principale che contengono il termine
data-, possono essere omessi (la classe
class="nb-galleries" deve invece essere presente).
Gli attributi possibili dello span principale sono:
-
data-class per impostare una classe aggiuntiva alle gallerie, utilizzabile per eventuali personalizzazioni via CSS, esempio
data-class="class1".
-
data-name per impostare il nome della galleria, esempio
data-name="Gallery1".
-
data-thumb per impostare l'immagine di presentazione (se data-thumb non è utilizzato verrà visualizzata un'immagine casuale dalla galleria), esempio
data-thumb="https://i.imgur.com/k36Ze7c.jpg" (fra i doppi apici va inserito il link dell'immagine che si vuole utilizzare come anteprima della galleria)
-
data-dim per impostare la larghezza massima (in pixel) delle immagini della galleria, esempio
data-dim="400".
-
data-timer per impostare la visualizzazione scorrevole automatica, se viene omesso lo scorrimento sarà solo manuale, esempio
data-timer="true"-
data-time per impostare il tempo (in millisecondi, 1000 = 1 secondo) tra un'immagine e l'altra nello scorrimento automatico, esempio
data-time="1000".
-
data-sep per raggruppare diverse gallery insieme o separarle (
#entry618433865).
Gli attributi degli span interni sono:
-
data-link inserisce il link dell'immagine, esempio
data-link="https://i.imgur.com/JRJ4RtW.jpg" (fra i doppi apici va inserito il link dell'immagine), ovviamente
non può essere omesso.
-
data-description permette di aggiungere una descrizione all'immagine, esempio
data-description="desc test 1", la descrizione è opzionale, quindi questo attributo può essere omesso.
