JSToolbox – variazioni sul tema di lightbox

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:
[html]
[/html] Se avete bisogno della traduzione collegate anche quella (non esiste la traduzione italiana ma potete sempre duplicare il file fornito e tradurre le stringhe ) [html]
[/html]
Inizializzate la gallery con un brevissimo script nell’header della pagina
[javascript]
window.onload = function(){
lightgallery.init();
}
[/javascript]
Se volete modificare le impostazioni di default dei vari parametri della galleri allora l0inizializzazione della gallery sarà un pò differente:
[javascript]
window.onload = function(){
lightgallery.init({
enableZoom:false,
speed:50,
fadeImage:false
});
}
[/javascript]

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

[html]

[/html]

Per utilizzare la gallery nella pagina, per singole foto:
[html]

Pink flowers
[/html]
Mentre per insiemi di foto:
[html]


[/html]

Qui il progetto su GoogleCode