Nel post di qualche giorno fa abbiamo introdotto JQuery con un esempio pratico, implementando un div a comparsa con un effetto davvero elegante e graficamente accattivante.

L’esempio che vedremo in questo articolo è quello di una gallery di immagini da aggiungere sul vostro sito, una gallery però veramente accattivamente, con un incredibile effetto 3D per “sfogliare” le foto e l’effetto lightbox per l’ingrandimento dell’immagine. Una demo dell’esempio che andremo a completare è disponibile qui.

L’esempio si basa sull’utilizzo del framework JQuery in collaborazione con un plugin per JQuery , il plugin Interface. Per lavorare,dunque, dobbiamo scaricare il framework e il plugin che potete trovare rispettivamente qui e qui.

Una volta inclusi i file .js scaricati, è sufficiente sostituire nel div ‘<div id=”carousel”>’ le immagini che intendete includere nella vostra gallery. Nel caso in cui fossero molte, potreste pensare di fare un ciclio o un array, che sicuramente semplificato di parecchio la vita.

Potete scegliere se le immagini devono aprire un lik o l’ingradimento della stessa con un effetto davvero molto accattivante: nell’esempio, l’immagine di Alonso, quella che una volta caricata la pagina si trova nel centro, si apre con l’effetto lightbox, mentre le altre puntano a pagine dedicate ad alcune squadre di calcio del nostro quotidiano sportivo preferito, Realsports.it .La differenza sta nel come impostiamo il link, vediamo un esempio:

1. <a href=”link1.jpg” title=”Alonso” rel=”imagebox”><img src=”link” width=”50%” /></a>

2. <a href=”link2.php” title=”Alonso”><img src=”link” width=”50%” /></a>

Il link al punto 1. è quello che utilizza l’effetto lightbox per aprire ed ingrandire l’mmagine, mentre nel punto 2. viene utilizzato il link ad una pagina, nel nostro esempio link2.php .

L’ultimo passo che ci rimane da fare è inserire lo script che richiama le funzioni di gestione della gallery. Analizziamo lo script:

<script type=”text/javascript”>
window.onload =
function()
{
$(‘#carousel’).Carousel(
{

/*
I comandi seguenti rappresentano le direttive che configurano la gallery: la larghezza, l’altezza, la larghezza delle immagini che compaiono dietro alle altre per dare l’effetto 3D, l’elemento html utilizzato per riconoscere gli oggetti della gallery ( nel nostro caso il tag <a> ) , il livello di riflessione e di velocità di rotazione.
*/
itemWidth: 110,
itemHeight: 62,
itemMinWidth: 50,
items: ‘a’,
reflections: .5,
rotationSpeed: 2.7
}
);
$.ImageBox.init(
{

/*
Link all’immagine di Loading che verrà utilizzata durante il caricamento della foto ingrandita usando link del tipo 1. nell’esempio precedente
*/
loaderSRC: ‘images/imagebox/loading.gif’,

/*Link all’immagine di Chiusura su cui cliccare per chiudere la foto ingrandita usando link del tipo 1. nell’esempio precedente
*/
closeHTML: ‘<img src=”http://www.realsports.it/resources/tRealSportsTemplate/arrow_realsports.gif” />’
}
);
};
</script>
A questo punto dovrebbe essere chiaro il funzionamento di questa gallery: aggiungiamo solo una precisazione. Per chi intesse personalizzare lo stile, può tranquillamente modificare a piacimento gli stili presenti nella pagine di esempio, l’importante è ovviamente non modificare gli identificati di classe (es. #ImageBoxCaption) .