Photo Gallery in javascript con mootools

Questa photo gallery in javascript la ho sviluppata in occasione di un lavoro per un cliente; usa il framework mootools. Questo framework permette di gestire molti effetti in modo semplice e veloce. In questo caso ho usato un effetto di fading quando si clicca su una delle foto piccole, mentre se si clicca sulle frecce, si avrà un effetto di scorrimento.

Questa photo gallery in javascript usa il framework mootools. Questo framework permette di gestire molti effetti in modo semplice e veloce. In questo caso ho usato un effetto di fading quando si clicca su una delle foto piccole, mentre se si clicca sulle frecce, si avrà un effetto di scorrimento.

<<<<<


>>>>>

Demo di Photo Gallery con Slimbox (mootools)

Come realizzare questa galleria sul tuo sito:

Javascript

Per prima cosa bisogna includere un file javascript che contenga questo codice:

function setta_immagine(n){
      if(immagine_attiva!=n){
            var da_attivare=$('immagine'+n);
            var da_disaattivare=$('immagine'+immagine_attiva);
            var myFx = new Fx.Style(da_disaattivare, 'opacity').start(1,0);
            var myFx = new Fx.Style(da_attivare, 'opacity').start(0,1);
            immagine_attiva=n;
      }
}

function scorri_immagine(direzione){

       n=immagine_attiva;
       if(direzione=="right")
                {n++;m=1;}
       else
                {n--;m=-1;}
       if(n==numero_immagini+1)n=1;
       if(n==0)n=numero_immagini;
       var da_attivare=$('immagine'+n);
       var da_disaattivare=$('immagine'+immagine_attiva);
       var img_da_attivare=$('immagine'+n).getFirst();
       var img_da_disaattivare=$('immagine'+immagine_attiva).getFirst();
       var myFx = new Fx.Style(img_da_attivare, 'margin-left').set(220*m);
       var myFx = new Fx.Style(da_attivare, 'opacity').set(1);
       var myFx = new Fx.Style(img_da_disaattivare, 'margin-left').start(0,-220*m).chain(
            function resetta(){
                var myFx = new Fx.Style(da_disaattivare, 'opacity').set(0);
                var myFx = new Fx.Style(img_da_disaattivare, 'margin-left').set(0);
            }
       );
       var myFx = new Fx.Style(img_da_attivare, 'margin-left').start(220*m,0);
       immagine_attiva=n;
}

var numero_immagini=6;
var immagine_attiva=1;

window.addEvent('domready',
    function (){
        for(i=1;i<=numero_immagini;i++){
            if(i!=immagine_attiva && $('immagine'+i))$('immagine'+i).setStyle('opacity','0');
        }
    }
);

Questo codice contiene le due funzioni principali per gli effetti di fading e scorrimento, e una chiamata che viene avviata quando il documento è caricato (usando l'evento domready, che da risultato positivo anche se le immagini non sono ancora state caricate). Questa chiamata si occupa semplicemente di impostare la trasparenza delle immagini grandi, in modo che non siano visibili, ma che sia visibile solo la prima (variabile immagine_attiva=1).

Il file javascript lo potete scaricare qui.
Inoltre dovete includere la libreria mootools, che potete trovare qui.

CSS

Poi bisogna includere il seguente file CSS:

#galleria a{
 float:left;
 display:block;
 width:60px;
 height:60px;
}
#galleriafoto {
 float: left;
 width: 450px;
 height: 230px;
 position:relative;
}
#galleriafoto .foto{
 position:absolute;
 left:0;
 top:0;
 width:225px;
 height:225px;
 overflow:hidden;
}

HTML

Poi il codice della pagina HTML:

<div id="galleria">
    <a onClick="setta_immagine(1);" href="#gal"><img alt="" src="...[anteprima1]" /></a>
    <a onClick="setta_immagine(2);" href="#gal"><img alt="" src="...[anteprima2]" /></a>
    <a onClick="setta_immagine(3);" href="#gal"><img alt="" src="...[anteprima3]" /></a>
</div>

<div id="navthumb">
    <a onclick="scorri_immagine('left');" href="#gal">Indietro</a>
    <a onclick="scorri_immagine('right');" href="#gal">Avanti</a>
</div>

<div id="galleriafoto">
    <div align="left" class="foto" id="immagine1"><img src="...[foto1]" alt="" /></div>
    <div align="left" class="foto" id="immagine2"><img src="...[foto2]" alt="" /></div>
    <div align="left" class="foto" id="immagine3"><img src="...[foto3]" alt="" /></div>
</div>

Ovviamente al testo [anteprima1] va inserito il percorso dell'immagine piccola, mentre in [foto1] inserire il percorso all'immagine grande, e così per tutte le altre foto.