GALLERY JAVASCRIPT

ZANETTE
MARCO



JAVASCRIPT GALLERY

Gallery stile cartoline con javascript e css3

In questo articolo vi presento una gallery javascritpt e css3 in stile cartoline: infatti l'effetto previsto in questa gallery distribuirà tutte le vostre foto in ordine sparso per poi poterle osservare in dettaglio attraverso uno zoom attraverso un doppio click sulle immagine (con un secondo doppio click le foto torneranno piccole). Inoltre è possibile trascinare le foto attaverso un drag and drop per distribuirle a vostro piacimento.
Questa "gallery cartoline" è sviluppata solamente attraverso JavaScript e CSS3, senza l'utilizzo di librerie esterne ed è completamente gratuita.

Questa photogallery è rilasciata sotto licenza MIT.


 DOWNLOAD  DEMO

DOCUMENTAZIONE GALLERY CARTOLINE

Di seguito riporto tutti i passaggi necessari per implementare la gallery cartoline in una pagina.



IMPLEMENTAZIONE HTML

Nella parte superiore della vostra pagina all'interno del tag head includete il file css e il file javascript che avete scaricato.


  • <link rel="stylesheet" href="style.css" />
  • <script type="text/javascript" src="gallery_cartolina.js">

Dopodichè create un div e al suo interno inserite le immagini che volete utilizzare nella gallery cartoline.
Ricordate di assegnare un id al div contenitore che utilizzeremo dopo per richiamare la funzione javascript.


  • <div id="gallery_cartolina">
  •   <img src="img/gatto.jpg" />
  •   <img src="img/gazzella.jpg" />
  •   <img src="img/lupo.jpg" />
  •   <img src="img/leone.jpg" />
  • </div>

L'ultimo passaggio necessario per far funzionare nella vostra pagina la gallery cartoline è quello di richimare la classe javascript creando un'istanza eseguita al completo caricamento della pagina attraverso la seguente istruzione:


  • <script type="text/javascript">
  • window.onload = function(){
  • galleryCartoline = new GalleryCartoline('gallery_cartolina',{minScale:0.50, maxScale:1, borderDistance:50, maxRotation:20});
  • }
  • </script>


I parametri passati:

  • id del div che contiene le immagini;
  • un'oggetto javascript contenente le opzioni della gallery che possono essere le seguenti:
    • minScale: valore in scala delle dimensioni dell'immagine quando inizialmente è rimpicciolita, il valore è espresso in decimali; 0.50 ad esempio significa che l'immagine sarà grande il 50% delle dimensioni reali (se non settata il valore di default è 0.60);
    • maxScale: valore in scala delle dimensioni dell'immagine quando viene zommata con il doppio click , il valore è espresso in decimali; 1 ad esempio significa che l'immagine sarà grande il 100% delle dimensioni reali (se non settata il valore di default è 1);
    • borderDistance: distanza minima in pixel dal bordo del div contenitore che potranno avere le immagini quando vengono distribuite automaticamente al caricamento della gallery (se non settata il valore di default è 50);
    • maxRotation: massima rotazione in gradi che possono assumere le immagini (se non settata il valore di default è 20).
    Se non si vuole impostare nessuna opzione e quindi utilizzare i valori di default basta passare l'oggetto javascript vuoto (es. "{}").




IMPLEMENTAZIONE CSS

Non è necessaria alcuna implementazione di css in quanto è sufficiente il file incluso precedentemente nell'head della pagina, è comunque possibile modificare le caratteristiche di esso cambiando valori agli stili presenti all'interno personalizzando ancora di più la gallery cartoline.
Vediamo le possibili personalizzazioni:

  • modificare colore e dimensioni del div contenitore: modificando la dimensione dello stile '#gallery_cartolina'; del div contenitore cambierete quindi lo spazio reso disponibile alla gallery e le foto potranno distribuirsi in miglior modo (soprattutto se ce ne sono molte);
  • modificare lo stile delle foto: modificando lo stile '#gallery_cartolina img' potrete assegnare delle caratteristiche ulteriori alle immagine della gallery (nel mio esempio ho aggiunto un bordo di colore blu chiaro).



IMPLEMENTAZIONE JAVASCRIPT

Non serve scrivere nessuna riga di codice javascript ulteriore è sufficiente aver incluso il file "gallery_cartolina.js" scaricato.


Ricordo che questa 'gallery cartoline' è sviluppata in javascript e css3 quindi è compatibile con i maggiori browser moderni, in Internet Explorer funzionerà solamente dalla versione 9 e successive.

Per segnalarmi dei problemi o se hai dei suggerimenti per migliorare questo lavoro mandami una mail .






Scopri la sezione dedicata agli script.

Scopri la sezione dedicata agli script.