
JSToolbox si distingue dai cloni di lightbox per alcune interessanti caratteristiche:
- è uno script leggerissimo (7kb)
- non dipende da altre librerie per funzionare
- fra le sue features ha lo zoom a step (un pò come nei programmi di grafica per intenderci) utile se volete visualizzare immagini molto grandi
- ha il supporto multilingua
- ha il preload delle immagini
Installazione:
Prima di tutto scaricate la gallery e caricatela via ftp dove conservate gli i js.
Inserite il collegamento allo script nella pagina o template:
-
<script src="lightgallery/lightgallery.min.js" type="text/javascript"></script>
Se avete bisogno della traduzione collegate anche quella (non esiste la traduzione italiana ma potete sempre duplicare il file fornito e tradurre le stringhe
)
-
<script src="lightgallery/lang/ru_utf8.js" type="text/javascript"></script>
Inizializzate la gallery con un brevissimo script nell'header della pagina
-
window.onload = function(){
-
lightgallery.init();
-
}
Se volete modificare le impostazioni di default dei vari parametri della galleri allora l0inizializzazione della gallery sarà un pò differente:
-
window.onload = function(){
-
lightgallery.init({
-
enableZoom:false,
-
speed:50,
-
fadeImage:false
-
});
-
}
I parametri disponibili sono:
- animate (default - true) - on/off animazione di apertura
- framesNumber (default - 20) - numero di frame usati nell'animazione
- speed (default - 30) - velocità dell'animazione
- resizeSync (default - false) - se settato a true - il contenitore effetterà un ridimensionamento orizzontale/verticale contemporaneamente
- enableZoom (default - true) - abilita la possibilità di effettuare zoom sull'immagine
- fadeImage (default - true) - effetto fade sull'immagine (meglio disabilitarlo per immagini molto grandi)
- alias (default - ‘lightgallery’) - l'attributo rel, serve per indicare insiemi di immagini (e quindi costruire le gallery).
Infine è necessario collegare i CSS della gallery
Per utilizzare la gallery nella pagina, per singole foto:
Mentre per insiemi di foto:
Qui il progetto su GoogleCode