Slideshow rotatorio con plugin Path - jQuery

Oggi vi presento uno slideshow rotatorio scritto in jQuery che sfrutta un plugin che ci permette di muovere gli oggetti secondo una traiettoria circolare:il plugin in questione si chiama Path.

RISULTATO FINALE

Ketek - Slideshow rotatorio

HTML

 
<div id="slideshow">
                <div id="circle"></div>
 
    <div id="1" class="circle"><img src="img1" /></div>
    <div id="2" class="circle"><img src="img2" /></div>
    <div id="3" class="circle"><img src="img3" /></div>
    <div id="4" class="circle"><img src="img4" /></div>
 
    <a href="#"><div id="img"><img src="img4" /></div></a>
    <a href="#" id="next"></a>
</div>
 

CSS

 
html,body
{
                background-color:#ecedee;
                font-family:´GraublauWebBold´,Verdana;
                text-align:center;
}
#slideshow
{
                text-align:center;
                width:1000px;
                height:500px;
                text-align:center;
                margin-left:auto;
                margin-right:auto;
                position:relative;
                top:150px;
                left:0px;
}
#circle
{
                position:absolute;
                width:400px;
                height:400px;
                background-color:inherit;
                -moz-border-radius:200px;
                -webkit-border-radius:200px;
                border:1px solid #CCC;
                float:left;
                z-index:1;
                top:0px;
                left:0px;
}
.circle
{
                float:left;
                position:absolute;
                width:120px;
                height:120px;
                -moz-border-radius:70px;
                -webkit-border-radius:70px;
                border:10px solid #78b2c7;
                background-color:#78b2c7;
                z-index:50;
                top:0;
                left:0;
}
img
{
                width:120px;
                height:120px;
                -moz-border-radius:60px;
                -webkit-border-radius:60px;
}
#img
{
                position:absolute;
                width:800px;
                height:520px;
                background-color:black;
                top:-60px;
                left:200px;
                z-index:99;
                -moz-border-radius:20px;
                -webkit-border-radius:20px;
}
#img img
{
                width:auto;
                height:auto;
}
#next
{
                position:relative;
                width:66px;
                height:67px;
                background-image:url(next.png);
                opacity:0.56;
                z-index:100;
                text-decoration:none;
                float:right;
                margin-top:165px;
                margin-right:10px;
}
#next:hover
{
                opacity:0.7;
}
 

JQUERY

Eccoci arrivati al succo della questione: il plugin path.

La funzione che ci interessa ci permette di traslare l´oggetto, in questo caso le miniature delle immagini, secondo una circonferenza di raggio r e centro (x,y),a partire dall´angolo alpha, fino all´angolo beta e alla velocità v; Si specifica inoltre la direzione che accetta i valori +1 (antiorario) e -1(orario).

 
$(elem).stop().animate({
            path : new $.path.arc({
                center  : [x,y],
                radius  :r,
                start   : alpha,
                end     : beta,
                dir     : 1
            }),
        },<em>v</em>);
 

Vediamo ora come realizzare lo slideshow:

 
window.onload = function()
{
                var turn = 0;
                var array_angoli_start = [210,270,330,510];
                var array_angoli_end = [210,270,330,390];
                var id = ´´;
                var op = 0, start, end, hidden, v = 2000,x;
                $(´.circle´).each(function()
                {
                               id = $(this).attr(´id´);
                               rotate(´#´+id,array_angoli_start[turn],array_angoli_end[turn++],1);
                               if (turn==4) turn=0;
                });
 
                // inizializzo varie variabili
                x = 0
                turn = 0;
                hidden = 3;
                // il cerchio nascosto deve avere opacità = 0
                $(´#´+(array_angoli_start.length)).css(´opacity´,0);
 
                $(´#next´).click(function()
                {
                Op_0 = hidden;
                if (Op_0 == 0)
                {
                               // Op_1 diventerà -1
                               hidden = 4;
                }
                Op_1 = --hidden;
    hidden++;
 
                $(´.circle´).each(function()
                {
                               start = array_angoli_start[x];
                               if (x == (array_angoli_start.length -1)) // ricomincio il giro
                               {
                                               x = -1;
                               }
                               end = array_angoli_end[++x];
                               id = $(this).attr(´id´);
                               rotate(´#´+id,start,end,v);
                if (id == (Op_1+1))
                {
                               $(´#´+id).animate({opacity:0},{queue:false, duration:1500});
                               new_image = $(this).children(´img´).attr(´src´);
                               // misero effetto..
                               $(´#img´).children(´img´).animate({opacity : 0}, 600,function()
                               {
                               // cambio immagine
                               $(´#img´).children(´img´).attr(´src´,new_image);
                               });
 
                               // misero effetto...
                               $(´#img´).children(´img´).css(´opacity´,´0´);
                               $(´#img´).children(´img´).animate({opacity : 1}, 600);
 
                }
                else if (id == (Op_0+1)) // gestisco l´hidden
                {
                               $(´#´+(id)).animate({opacity:1},{queue:false, duration:1500});
                }
 
                });
                hidden--;
                turn++;
                if (turn == 4)
                {
                               turn = 0;
                               hidden = 3;
                               $(´#´+(array_angoli_start.length)).css(´opacity´,0);
                }
                x = turn;
                });
}
// gestisco il movimento rotatorio in un unica funzione rotate
function rotate(elem,start,end,v)
{
                $(elem).stop().animate({
            path : new $.path.arc({
                center  : [140,140],
                radius  :200,
                start   : start,
                end     : end,
                dir     : 1
            }),
        },v);
}
 

La maggior parte del codice è incentrato sulla gestione delle variabili da passare alla funzione rotate() che, come spiegato, gestirà la traslazione rotatoria degli elementi.

Il funzionamento si intuisce facilmente: al click sul bottone next tutte le miniature vengono fatte traslare e l´immagine principale sarà sostituita, attraverso una banale animazione sull´opacità, dall´immagine contenuta sulla miniatura che assumerà il valore di hidden.