IcyGallery v. 1.0 beta
Cosa è IcyGallery?
IcyGallery è una galleria fotografica basata sul fantastico framework prototype, tutta la costruzione della gabbia grafica, del sistema di slide e tutte le azioni sono svolte direttamente dallo script, questo la rendere installabile in maniera molto rapida.
Come si usa?
Usare IcyGallery è semplice ed immediato, una volta inclusi i file JavaScript che ti servono basterà specificare il div che contiene l'elenco delle foto e lo script farà per te il resto del lavoro, aggiungendo gli stili, suddividendo in slide e praparando tutto per il funzionamento
Quanto costa utilizzarla?
IcyGallery attualmente è gratuita per usi non commerciali, non ostante questo saremmo grati per ogni donazione, anche del valore irrisorio di 1 euro (un caffè) per permetterci di poter dedicare più tempo allo sviluppo ed al miglioramento del progetto.
Da quali browser è supportata?
Abbiamo testato icygallery con successo nei seguenti browser:
- Safari 4
- Firefox 3
- Internet Explorer 7
- Google Chrome
- Opera 9
Installazione ed utilizzo?
Come prima cosa preleva lo zip contenente tutti i file necessari da qui, dopo di che, all'interno del tag HEAD della pagina in cui vuoi inserire la gallery aggiungi le seguenti righe di codice:
//Iclusione librerie
<script src="prototype.js" type="text/javascript"></script>
<script src="protofx.js" type="text/javascript"></script>
<script src="icygallery.js" type="text/javascript" ></script>
Ora è necessario inizializzare la galleria, specificando dentro quale DIV la si vuole creare, nel nostro caso 'MyGal'. Inserire il codice sottostante sempre all'interno del tag HEAD:
//Inizializzazione galleria
<script type="text/javascript" language="javascript" >
Event.observe(window, "load", function(){
var gal = new IcyGallery('myGal', {});
});
</script>
All'interno del tag head aggiungete il seguente foglio di stile
<link rel="stylesheet" href="text/css" type="icygallerycss/icygallery.css" />
Ora non vi resterà altro che creare il DIV specificato sopra ed inserire al suo interno le varie immagini
//Inizializzazione galleria
<div id="myGal" >
<img src="foto_th.jpg" longdesc="foto.jpg" class="fotogall" alt="Desc" />
<img src="foto_th.jpg" longdesc="foto.jpg" class="fotogall" alt="Desc" />
<img src="foto_th.jpg" longdesc="foto.jpg" class="fotogall" alt="Desc" />
<img src="foto_th.jpg" longdesc="foto.jpg" class="fotogall" />
<img src="foto_th.jpg" longdesc="foto.jpg" class="fotogall" />
<img src="foto_th.jpg" longdesc="foto.jpg" class="fotogall" />
</div>
Personalizzazione aspetto grafico
IcyGallery è personalizzabile ed adattabile ad ogni esigenza, nei colori, e nelle dimensioni, di seguito l'elenco dei parametri che puoi modificare:
//Parametri personalizzazione
<script type="text/javascript" language="javascript" >
Event.observe(window, "load", function(){
var gal = new IcyGallery('myGal', {});
larghezzaDiv : 199, //Larghezza del div con le miniature
larghezzaGal : 610, //Larghezza totale galleria
altezzaGal : 335, //Altezza totale galleria
controlSx : 'sinistra', //ID controlli di sinistra
controlDx : 'destra', //ID controllo di destra
fotoWidth : '400px', //Larghezza delle foto
fotoHeight : '335px', //Altezza delle foto
maxPerSlide : 10, //Numero thumbs per slide
itemsMarginR : '15px', //Margine delle thumbs dal bordo sinistro
thumbsHeight : '50px', //Altezza delle thumbs
thumbsWidth : '70px', //Larghezza delle thumbs
thumbsMargin : '4px', //Margini delle singole thumbs
imagePosition : 'left', //Immagine a destra o sinistra delle thumb
descrHeight : '70px', //Altezza DIV descrizione
descriptionAlpha : 0.6, //Opacità box descrizione
autoStart : true, //Avvio prima foto automatico
slideIntervall : 5000 //Velocità slideshow
});
</script>
Per comprendere meglio il significato dei vari parametri puoi utilizzare la mappa sottostante:
Personalizzazione i CSS
Puoi modificare la galleria secondo le tue esigenza grafiche agendo anche nei fogli di stile, di seguito ti riportiamo le classi css sulle quali puoi apportare modifiche. Attenzione, limita le tue modifiche a colori, bordi, ecc... non forzare ne la dimensione degli elementi ne il loro posizionamento altimenti la galleria potrebbe non funzionare più correttamente.
Download
Clicca il pacchetto zip per scaricare la galleria
Progetti che utilizzano IcyGallery
Hai utilizzato IcyGallery per un tuo progetto? segnalaci il link a info [@] brokenice.it, lo pubblicheremo in homepage.
