Questa photo gallery in javascript è un aggiornamento della Photo Gallery in javascript con mootools, trasformata per utilizzare la libreria jQuery. Usa le stesse funzionalità, ma il codice è scritto per sfruttare le API di jQuery. Come si può notare il codice scritto con jQuery è molto più pulito, semplice e immediato rispetto a quello di Mootools. jQuery è una libreria che sta riscuotendo sempre più successo proprio grazie alla semplicità di implementazione, alla presenza di numerose API per la manipolazione del DOM e per la gestione degli effetti, e anche per la presenza di numerosi plugin.

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);
$(da_disaattivare).fadeOut();                       
$(da_attivare).fadeIn();
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+' img');                    
var img_da_disaattivare=$('#immagine'+immagine_attiva+' img');                     
$(img_da_attivare).css({marginLeft:220*m});                    
$(da_attivare).show();
$(img_da_disaattivare).animate({marginLeft:-220*m},500,function(){                           
$(da_disaattivare).hide();                           
$(img_da_disaattivare).css({marginLeft:0});                    
});
$(img_da_attivare).animate({marginLeft:0},500);
immagine_attiva=n;
}

$(document).ready(     
function (){            
for(i=1;i<=numero_immagini;i++){                
if(i!=immagine_attiva && $('#immagine'+i))
$('#immagine'+i).hide();          
}          
});

var numero_immagini=6; var immagine_attiva=1;

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 ready di jQuery, che viene lanciato quando le immagini del documeto non sono ancora state caricate). Questa chiamata si occupa semplicemente di nascondere le immagini grandi, in modo che non siano visibili, ma che sia visibile solo la prima (variabile immagine_attiva=1).

Inoltre dovete includere la libreria jQuery, che potete trovare qui. E’ sufficiente inserire questo script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript">

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:

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.
Buon lavoro!