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:
  1. <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 ;) )

HTML:
  1. <script src="lightgallery/lang/ru_utf8.js" type="text/javascript"></script>

Inizializzate la gallery con un brevissimo script nell'header della pagina

JAVASCRIPT:
  1. window.onload = function(){
  2. lightgallery.init();
  3. }

Se volete modificare le impostazioni di default dei vari parametri della galleri allora l0inizializzazione della gallery sarà un pò differente:

JAVASCRIPT:
  1. window.onload = function(){
  2. lightgallery.init({
  3. enableZoom:false,
  4. speed:50,
  5. fadeImage:false
  6. });
  7. }

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:

Per utilizzare la gallery nella pagina, per singole foto:

HTML:
  1. <a title="Leaves after rain" rel="lightgallery" href="001.jpg"><img src="001_t.jpg" alt="" /></a>
  2. <a title="Pink flowers" rel="lightgallery" href="002.jpg">Pink flowers</a>

Mentre per insiemi di foto:

HTML:
  1. <a title="Leaves after rain" rel="lightgallery[flowers]" href="001.jpg"><img src="001_t.jpg" alt="" /></a>
  2. <a title="Pink flowers" rel="lightgallery[flowers]" href="002.jpg"><img src="002_t.jpg" alt="" /></a>

Qui il progetto su GoogleCode

Questo post è stato inserito in Javascript e taggato come , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post Correlati




Inserisci un Commento

La tua email non sarà resa pubblica. I campi obbligatori sono contrassegnati con *

*
*