Galleria di immagini con scomparsa casuale in jQuery

Vi presento oggi una galleria di immagini con transizione a scomparsa casuale relizzata totalmente in jQuery e CSS.

RISULTATO FINALE

Ketek - Galleria di immagini casuali in jQuery

Ecco come è stato realizzato:

HTML

 
<li class="image" id="item1"><img src="image1.png" class="img"/><div class="panel"><label>IMAGE 1</label></div></li>
<li class="image" id="item2"><img src="image2.png" class="img"/><div class="panel"><label>IMAGE 2</label></div></li>
<li class="image" id="item3"><img src="image3.png" class="img"/><div class="panel"><label>IMAGE 3</label></div></li>
<li class="image" id="item4"><img src="image4.png " class="img"/><div class="panel"><label>IMAGE 4</label></div></li>
 

CSS

 
#gallery
{
                width:780px;
                height:740px;
                background-color:#1c1c1c;
                margin-left:auto;
                margin-right:auto;
                margin-top:50px;
                margin-bottom:15px;
                padding:10px;
                padding-top:0;
                text-align:start;
                overflow:hidden;
}
#gallery ul
{
                list-style:none;
                margin-left:-15px;
}
#gallery ul li
{
                display:inline-block;
                width:200px;
                height:200px;
                margin:20px;
                background-color:#C30;
}
.panel
{
                position:relative;
                width:186px;
                height:26px;
                background-color:#C30;
                margin-top:-40px;
                text-align:stars;
                padding:7px;
                opacity:0;
}
.panel label
{
                width:auto;
                height:40px;
                font-size:18px;
}
 

CODICE jQUERY

Vediamo ora come realizzare la transizione con jQuery:

Creo un array in cui inserirsco i numeri da 1 a 9 in modo casuale sfruttando le funzioni appositamente create array_random, n_random() e  checkInArray(). Poi collego i bottoni Next e Prev alla funzione trans().

Analizziamo ora i passaggi di questa funzione:

• Controllo se devo traslare verso le immagini precedenti o successive e setto la variabile simb
• Scorro i valori dell´array e, dopo averli collegati alla rispettiva immagine, li rendo trasparenti
• Rendo trasparenti tutte le immagini in modo da non far vedere la traslazione al visitatore
• Traslo l´intera lista di immagini verso l´alto o verso il basso in modo da ritrovarmi con il blocco di immagini successivo o precedente
•  Ciclo i nuovi elementi usando sempre l´array di numeri casuali e li rendo opachi ad uno ad uno.

 

Come potete capire dall´immagine il rendere trasparente le immagini del secondo blocco mi è utile per nascondere al visitatore la transizione verso l´alto(in questo caso) o verso il basso.

E questo è il codice:

 
window.onload = function (){
var myArray = [] ;
var casualiArray = [];
var cas;
var str = ´´;
var blocco = 1; // blocco attuale
var contatore=0;
var contatore2 = 0;
 
array_random(); // creo array casuale
// mostro il pannello di descrizione dell´immagine
$(´.image´).mouseenter(function(e) {
                $(this).children(´.panel´).animate({´opacity´:´1´},200);
});
// nascondo il pannello di descrizione
$(´.image´).mouseleave(function(e)
{
                $(this).children(´.panel´).animate({´opacity´:´0´},200);
});
// collego i bottoni next e prev alla funzione trans
$(´#prev´).click(function()
{
                trans(´prev´);
});
$(´#next´).click(function()
{
                trans(´next´);
});
function trans(mode){
                contatore = 0;
                contatore2 = 0;
                var simb = 0; // mi serve per gestire il blocco e può essere +1  o-1
                if (mode == ´next´)
                {
                      simb = 1;
                      if (blocco == 2)
                      {
                          return false;
                       }
                }
                else if (mode==´prev´)
                {
 
                       simb = -1;
 
                       if (blocco == 1)
                       {
                           return false;
                       }
                }
 
$.each(casualiArray,function(m,v)
{
                contatore++;
                if (m!=8){
                $(´#item´+(v+(9*(blocco-1)))).delay(100*contatore*5).animate({´opacity´:0},1000);
                }
                else
                {
                       $(´#item´+(v+(9*(blocco-1)))).delay(100*contatore*5).animate({´opacity´:0},1000,function()
                       {
                           $(´#gall_box ul li´).css(´opacity´,´0´);
                           if (mode == ´next´){
                               $(´#gall_box ul´).css(´marginTop´,´-705px´);
                           }
                           if (mode == ´prev´)
                           {
                                $(´#gall_box ul´).css(´marginTop´,´15px´);
                           }
                                $.each(casualiArray,function(m1,v1)
                           {
                                 $(´#item´+((v1+(9*(blocco-1))) + 9*simb)).delay(100*contatore2*5).animate({´opacity´:1},1000);
                                 contatore2++;
                            });
                            if (mode == ´next´){
                            blocco++;
                            }
                            else if (mode == ´prev´)
                            {
                                  blocco--;
                            }
                               });
                }
});
}
 
function array_random()
{
                while (casualiArray.length <9)
                {
                cas = n_random();
                checkInArray(cas);
                }
 
}
function n_random()
{ return Math.round(Math.random()*9); }
function checkInArray()
{   if ($.inArray(cas,casualiArray) == -1 &amp;&amp; cas != 0)
                {
                    casualiArray.push(cas);
                }
}
};