Creare Slideshow effetto mosaico con jQuery

Spesso e volentieri quando progettiamo un sito web, il cliente ci chiede una presentazione per i suoi prodotti e servizi. In tal senso ci sono di aiuto le librerie jQuery e i loro numerosi plug-in, gia’ pronti all’uso. Ma se vogliamo fare qualcosa di diverso per essere ricordati meglio e per far valere la nostra professionalita’, e’ necessario mostrare qualcosa che non hanno mai visto prima.

Oggi, in questo breve tutorial, costruiamo una galleria con effetto mosaico con l’uso di jQuery e CSS.Il mosaico e’ realizzato con un effetto di transizione di piccole piastrelle quando si passa da un’immagine all’altra.

CODICE HTML

Come sempre si parte dall’ossatura del progetto, il famigerato Html.

/1

Abbiamo l'elemento contenitore slideshow che e' #mosaico-slideshow, una freccia sinistra e una destra, per navigare tra le immagini. Manca un mosaico-slide DIV, che verra' inserito dal nostro codice jQuery. In questo DIV ci sono le famose piastrelle che non sono altro che 56 div, ognuno composto da un pezzo della nostra immagine di 60X60px.

CODICE CSS

1

#mosaic-slideshow{
/* The slideshow container div */
height:500px;
margin:0 auto;
position:relative;
width:670px;
}

.mosaic-slide{
/* This class is shared between all the slides */
left:80px;
position:absolute;
top:25px;

border:10px solid #555;

/* CSS3 rounded corners */
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}

.tile{
/* The individual tiles */
height:60px;
width:60px;
float:left;
border:1px solid #555;
border-width:0 1px 1px 0;
background-color:#555;
}

La nostra presentazione sta nel DIV mosaico-slideshow. Ci sono delle regole interessanti del CSS3 per gli angoli arrotondati. Continuiamo:

.arrow{
/* The prev/next arrows */
width:35px;
height:70px;
background:url("img/arrows.png") no-repeat;
position:absolute;
cursor:pointer;
top:50%;
margin-top:-35px;
}

.arrow.left{
left:15px;
background-position:center top;
}

.arrow.left:hover{
background-position:center -70px;
}

.arrow.right{
right:15px;
background-position:center -140px;
}

.arrow.right:hover{
background-position:center -210px;
}

.clear{
/* This class clears the floats */
clear:both;
}

La classe arrow e’ costituita dalle frecce sinistra e destra. Utilizziamo uno sprite CSS per il background del div freccia ed entrambe hanno uno stato di hover attribuito, in maniera da evitare di inserire 4 diverse immagini.

CODICE JQUERY

Per ottenere l’effetto mosaico, lo script .js ha 4 funzioni:

TRANSITION() funzione per la transizione animata; posiziona l’immagine che vogliamo vedere al di sotto di quella presente e poi le nasconde una alla volta.

GENERATEGRID() questa funzione genera l’effetto piastrella. Ogni riquadro creato contiene una parte dell’immagine di sfondo.

NEXT() funzione per rilevare l’immagine che segue.

PREV() funzione che rivela l’immagine precedente.

/* The slide images are contained in the slides array. */
var slides = new Array('img/slide_1.jpg',
'img/slide_2.jpg',
'img/slide_3.jpg',
'img/slide_4.jpg',
'img/slide_5.jpg');

$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */

$('.arrow.left').click(function(){
prev();

/* Clearing the autoadvance if we click one of the arrows */
clearInterval(auto);
});

$('.arrow.right').click(function(){
next();
clearInterval(auto);
});

/* Preloading all the slide images: */

for(var i=0;i').html(generateGrid({rows:7,cols:8,image:slides[id-1]}));

/* Moving it behind the current slide: */
newLayer.css('z-index',1);

$('#mosaic-slideshow').append(newLayer);

if(current.layer)
{
/* Hiding each tile of the current slide, exposing the new slide: */
$('.tile',current.layer).each(function(i){
var tile = $(this);
setTimeout(function(){
tile.css('visibility','hidden');
},i*10);
})
}

/* Adding the current id and newLayer element to the current object: */
current.id = id;
current.layer = newLayer;
}

function next()
{
if(current.id)
{
transition(current.id%slides.length+1);
}
}

function prev()
{
if(current.id)
{
transition((current.id+(slides.length-2))%slides.length+1);
}

}

/* Width and height of the tiles in pixels: */
var tabwidth=60, tabheight=60;

function generateGrid(param)
{
/* This function generates the tile grid, with each tile containing a part of the slide image */

/* Creating an empty jQuery object: */
var elem = $([]),tmp;

for(var i=0;i', {
"class":"tile",
"css":{
"background":'#555 url('+param.image+') no-repeat '+(-j*tabwidth)+'px '+(-i*tabheight)+'px'
}
});

/* Adding the tile to the jQuery object: */
elem = elem.add(tmp);
}

/* Adding a clearing element at the end of each line. This will clearly divide the divs into rows: */
elem = elem.add('');
}

return elem;
}

Il parametro passato alla funzione generateGrid() e’ un’oggetto che contiene le righe e le colonne che vogliamo generare, oltre a contenere l’immagine di sfondo. Durante la creazione della piastrella, l’immagine di sfondo e’ compensata dalla piastrella in base alla sua posizione attuale.

Lo SlideShow effetto mosaico e’ finito.

Alla prossima!