Gestione opacità con JQuery per thumb e gallerie

In questa guida vediamo come gestire l’opacità con jQuery, ideale per animare thumb o immagini nelle nostre gallerie e/o progetti web.

DOWNLOAD | DEMO

Inizamo con il codice!

Preparate il vostro documento includendo le librerie jQuery dentro l’head del vostro sito in questo modo:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

Ora apriamo il dominio e richiamiamo una nostra funzione esterna in questo modo:

 $(document).ready(function() {

     gestione_op();

});//fine dom

Ricordiamoci anche di collegare il file js esterno (che creeremo a fine tutorial), per far funzionare la nostra funzione:

<script type="text/javascript" src="js/gestione_op.js"></script>

Strutturiamo l’Html  e l’animazione

Ora costruiamo lo “scheletro” della nostra galleria di thumb:

<div id="thumb-container">

<img src="tua_img.jpg" class="thumb" />
<img src="tua_img2.jpg" class="thumb"/>
<img src="tua_img3.jpg" class="thumb" />

</div>

 Come vedete ho predisposto un contenitore principale, e all’interno vi ho messo le nostre thumb. Quest’ultime possono essere facilmente stilizzate (con bordo, posizione, margine e altro) grazie alla relativa classe “thumb” nei fogli di stile CSS.  A questo punto non ci resta che “animare” il nostro scheletro: aprite un nuovo file .js chiamatelo gestione_op.js (quello che abbiamo collegato a inizio articolo) e salvatelo. Ora scrivete questo codice.

//gestione_op.js

function gestione_op() { //inizio la funzione

$('#thumb-container img').css("opacity","0.5"); //seleziono le immagini dentro il div thumb container e setto l'opacità a 0.5

$('#thumb-container img').mouseenter( //quando vado sopra con il mouse
            function(){  //eseguo la funzione
            $(this).css("opacity","1.0"); //this riprende il selettore di prima, setto l'opacità a 1 (100%)
            });

	$('#thumb-container img').mouseleave(  //quando levo il mouse
            function(){
            $(this).css("opacity","0.5"); //rimetto l'opacità a 0.5
            });

}

Il funzionamento è semplice, quando la pagina viene caricata l’opacità è dimezzata (0.5). Una volta sull’elemento al passaggio del mouse, la setto al 100%, mentre una volta che il mouse esce dall’elemento reimposto l’opacità sulla foto a metà per generare questo effetto davvero molto gradevole e professionale. Vedi i commenti al codice per maggiori delucidazioni.

Una valida alternativa…

E’ possible anche usare il metodo animate, per poter settare anche il tempo di apparizione dell’opacità, anche se questo metodo risulta più lento su IE8. Vi consiglio il precendente, in ogni caso per crearlo basta sostituire al posto del .css() questo codice:

$selettore.animate(
{
opacity: 1 //imposta la tua opacità
}, 350 //indica il tempo di apparizione dell'opacità);

Come faccio ad ingrandire le thumb?

Ora che abbiamo creato le thumb con questo effetto possiamo decidere di animarle al click del mouse, per poterle ingrandire. Possiamo farlo in svariati modi, se siete alle prime armi con jQuery vi consiglio di usare plugin già pronti come fancybox o (ancora meglio) il potente e italianissimo Pirobox. Se volete avventurarvi nella creazione ad “hoc” del plugin vi consiglio invece di partire da questo mio articolo.

Se siete dell’idea di usare Pirobox scaricate il pacchetto sul vostro PC. Dopodichè salvate i file  nella root del vostro sito i file e collegateli così:

<script type="text/javascript" src="js/pirobox_extended_min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>

Ora animate il tutto con questo codice di richiamo:

<script type="text/javascript">
	$(document).ready(function() {

        gestione_op(); //file Js creato prima, gestisce l'opacità sulle thumb

	//inizio richiamo pirobox
	$().piroBox_ext({
	piro_speed : 700,
	bg_alpha : 0.5,
	piro_scroll : true // sempre al centro dello schermo
	});
        </script>

Per un corretto funzionamento non dimenticatevi di includere anche la cartella ( e foglio di stile) di Pirobox, in questo modo:

<link href="css/style_2/style.css" rel="stylesheet" type="text/css" />

Ovviamente potete scegliere tra style1 o style_2 a seconda dei vostri gusti personali. Trovate le cartelle dentro il file zip scaricato dal sito ufficiale.

Ora siete pronti per richiamare pirobox tramite il rel=”single”  in questo modo:

<a href="img1.jpg" rel="single" class="pirobox" title="titolo immagine"><img src="img1.jpg" class="thumb" width="250" height="150"  /></a>

NOTA: Per un corretto utilizzo di pirobox verificate il corretto percorso di TUTTI i file, se rinominate le cartelle ricordate di cambiare il nome anche al link di richiamo! Es. se rinomino la cartella style_2 in pirobox_style dovrò cambiare anche il relativo percorso in:

<link href="css/pirobox_style/style.css" rel="stylesheet" type="text/css" />

Informazioni articolo.

Disclamer: Potete utilizzare la galleria come preferite vi sarei grato se lasciaste un link di riferimento al sito =D

Che ne pensate? spero vi sia di aiuto e a presto!