Galleria jQuery e CSS3 draggable di immagini

Partiamo con il 2012 con questa galleria di immagini in jQuery, CSS3 e HTML5. La galleria sfrutta le librerie di jQuery UI per rendere “diverso dal solito” lo scrolling draggable delle varie thumb e mantiene l’immagine a tutto schermo adattandola a tutte le risuluzioni.

Visualizza la  Demo >>

01. Introduzione

La galleria sfrutta una zona della pagina che ho chiamato “zona di scroll” che ho reso infinita grazie ai css e all’utilizzo delle jQuery UI in particolare del metodo “draggable” che permette molteplici usi ed interpretazioni stilistiche. Nel nostro scheletro html ho predisposto anche una zona di “wrap” dove dovrò far apparire la nostra immagine ingrandita.

02. Struttura HTML

<!--div caricamento immagini big-->
<div id="wrap">

    <div id="descrizione-foto">
    <h1>CLICCA SU UNA FOTO PER VISUALIZZARLA.</h1>
    <h2>  TIENI PREMUTO SU UNA FOTO E TRASCINA IL MOUSE SU E GIU PER SCORRERE L'ALBUM</h2></div>

    <div class="istruzioni"><!--non ho usato un immagine per renderla sticky in ogni momento--></div>

    </div><!--END WRAP-->

<div id="contenitore-scroll">

    <img src="images/logo.png" id="logo" alt="Targetweb" />

<!--parte scrollabile-->
    <div id="zona-scroll">
            <a href="images/large/01.jpg" class="lightbox" title="clicca per ingrandire la foto1"><img src="images/thumbs/01.jpg" alt="residenza e panorami1" /></a>
            <a href="images/large/02.jpg" class="lightbox" title="clicca per ingrandire la foto2"><img src="images/thumbs/02.jpg" alt="residenza e panorami2"  /></a>
            <a href="images/large/03.jpg" class="lightbox" title="clicca per ingrandire la foto3"><img src="images/thumbs/03.jpg" alt="residenza e panorami3"  /></a>
            <a href="images/large/04.jpg" class="lightbox" title="clicca per ingrandire la foto4"><img src="images/thumbs/04.jpg" alt="residenza e panorami4" /></a>

	</div><!--zona-scroll-->
   </div><!--CONTENITORE SCROLL-->

Per ora ovviamente la zona scroll è inerte ma le cose cambieranno molto presto 😉

03. Stile CSS

Nel css ho reso la barra di scrolling più gradevole grazie all’uso dei css3, in particolare dell’attributo gradient, in secondo luogo sempre con i css3 ho fatto in modo che al passaggio del mouse la thumb cambiasse l’opacità, un tocco di eleganza non guasta mai!

Degna di nota anche la scelta di rendere il div contenitore (che sarà draggable) con position-fixed, in questo modo si otterrà di fatto un carosello verticale infinito.

/*posizione loading*/
.loading{ margin:350px 0px 0px 100px; z-index:300;}

/*zonca scroll*/
#contenitore-scroll{width:180px; background-color:#FFF; overflow:hidden; position:fixed;
	background-image: -moz-linear-gradient(top, #FFF, #d2d2d2);
    background-image: -webkit-gradient(linear, left top,left bottom, from(#FFF), to(#d2d2d2));
    background-image: linear-gradient(top, #FFF, #d2d2d2);
    -moz-box-shadow: 0 0 5px 5px #000;
	-webkit-box-shadow: 0 0 5px 5px#000;
	box-shadow: 0 0 5px 5px #000;
	margin-left:10px;}

#zona-scroll{width:180px; cursor:move; margin-top:120px; }

#zona-scroll img{ margin:2px 0px 2px 0px;    position: relative;
    overflow: hidden;
    cursor: move;
    background: #fff url(../images/thumb_bg.jpg) no-repeat center center;
    background-size: 110% 110%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
	}

#zona-scroll:hover img{
		opacity: 0.2;
	}

#zona-scroll a img{
    opacity: 0.95;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
	}

#zona-scroll a:hover img{
    opacity: 0.8;
	}

	/*contenitore immagine big*/
#wrap{ width:100%; height:100%; position:absolute; top:0px; left:0px;  }
#descrizione-foto{ position:absolute; bottom:0px; right:100px; }
.istruzioni{ margin-left:220px; margin-top:120px;background-image:url(../images/istruzioni.png); width:100px; height:120px; background-repeat:no-repeat; position:absolute;  }

Ora che abbiamo stilizzato il tutto possiamo creare la nostra animazione grazie a jQuery.

04. Motore delle animazioni

Come anticipato per far funzionare al meglio le varie animazioni della galleria dovete includere, oltre alle solite librerie jQuery anche le librerie jQuery UI opportunamente stilizzate a seconda delle vostre esigenze, aggiungete pertanto nel file della galleria anche queste due stringhe:

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

<script src="js/jquery-ui-1.8.16.custom.min.js"></script>

Ora create un nuovo file chiamato: “animazioni.js” ed includetelo nell’index della galleria:

<script src="js/animazioni.js"></script>

Ora siamo pronti a creare il nostro file animazioni.js:

Impostiamo per prima cosa il “contenitore-scroll” della stessa altezza dello schermo, in modo che si auto-adatti a tutte le risoluzioni, in questo modo:

//Controllo quanto è largo lo schermo
h = $(document).height();
w = $(document).width();

$("#contenitore-scroll").css("height", h);

 Ora che abbiamo creato la nostra zona alla giusta altezza dobbiamo renderla trascinabile con il mouse tramite l’utilizzo delle jQuery UI, userò la funzione draggable:

$( "#zona-scroll" ).draggable({axis: "y"});

Grazie ad axis: y ho comunicato a jQuery UI di volere “spostare” con il mouse gli elementi solamente in verticale, questo vi eviterà molti problemi (provate a usare draggable senza questo parametro!). Ovviamente se orientato il “carosello” in orizzontale dovrete cambiare anche questo parametro.

Ora passiamo a programmare la funzione che, al click dell’utente, farà apparire l’immagine ingrandita a tutto schermo. Per farlo ti consiglio di leggere anche questo mio precendente articolo sul come creare una lightbox jQuery personalizzata. Il principio è il medesimo: solo che questa volta l’immagine viene fatta apparire nel box “wrap” a tutto schermo. Per adattare l’immagine  a tutto schermo uso le variabili create poco sopra (w,h). Ecco il codice completo:

$(".lightbox").click(function() { 

  $("#descrizione-foto, .loading").hide();// elimino le istruzioni sulla foto e il loading (se già presenti da precedenti loop)

  $("<img src='images/ajax-loader.gif' class='loading' />").appendTo("body"); //aggiungo lo spinner

  $("#wrap img").remove().fadeOut(600); //elimina la precedente immagine a tutto schermo (se presente)

  $("<img />").attr("src", $(this).attr("href")).appendTo("#wrap").fadeIn(dissolvenza); //recupero il percorso all'immagine grande, e la "appendo" al contenitore wrap (con position fixed), tramite dissolvenza

  $("#wrap img").css("width",w); //imposto per ultimo la larghezza dell'immagine appena inserita in modo che si adatti allo schermo.

		return false; //elimina l'effetto "torna su" al click del mouse

	});

Come sempre ho commentato il codice per farvi capire meglio il funzionamento, che però risulta abbastanza semplice.

05. Sviluppi e revisioni

In questo sito, come vedete ho predisposto anche un comodo filtro, per filtrare i vari settori della galleria. Per realizzarlo ho scomodato la funzione jQuery Load che potete studiare in questo mio articolo molto esauriente. Ovviamente con un pò di pratica potete orientare il carousel anche in orizzontale, ottenendo di fatto lo stesso effetto. Anche se la versione “verticale” è un po’ diversa dal solito.

06. Demo e Download

DEMO | DOWNLOAD

07. Credits

Per le foto si ringrazia Mark Sebastian

Vuoi usare la galleria?contattami prima di usarla per i tuoi progetti. Se ti piace quello che faccio e mi vuoi supportare condividi questo articolo sui tuoi social network, o commenta qui sotto l’articolo, non ti costa niente!

Ti è piaciuto l’articolo? supportami! clicca mi piace qui sotto e tieniti aggiornato su altri plugin esclusivi per i fan!