Gestione opacità con JQuery per thumb e gallerie

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.

opacita-jquery-grandeDOWNLOAD | 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!

  1. Ciao.
    Ottimo articolo e sito internet, ultimamente ti seguo con piacere 🙂
    Volevo porti una domanda perché vorrei ottenere un effetto simile sempre in jQuery, ma non ho trovato “pacchetti” già fatti in rete.
    In pratica mi interessa avere l’effetto di cambiamento di opacità sulle immagini che illustri nell’articolo, ma in modo tale che avvenga in automatico da un’immagine all’altra senza doverci passare sopra con il mouse quindi senza sfruttare l’hover od il mouseenter…come posso realizzarlo?
    Grazie anticipatamente per la risposta 😉

    1. potresti usare setTimeout() o delay() prova a cercare qualcosa sul web 😉 ovviamente se vuoi che l’animazione avvenga senza nessuna iterazione da parte dell’utente devi mettere il codice subito dopo l’apertura del DOM (document ready etc).

  2. grazie e complimenti per la velocita’ di risposta
    l’effetto e’ quello che cercavo ma ho provato ad animare l’apparizione dell’opacità e’ NON ci son riuscito…

    scrivi che e’ sufficiente sostituire al posto del .css() il codice :

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

    scusa l’ignoranza ma… DOVE LO DEVO SOSTITUITRE???
    nella ” //gestione_op.js” ?
    mi potresti scrive a che rigo?
    ho provato in vari modi ma non funge!!!

    grazie ancora
    Roberto

    1. Si Roberto devi sostituire nel file gestione_op.js tutto il codice trasformando le sezioni che usano il metodo css da:

      .css() etc etc in .animate() etcetc

      In ogni caso anche nel primo modo dovresti vedere qualche risultato.

  3. SCUSA MA MI SENTO moooooolto imbranato ma appena modifico il codice non va piu’ nulla…

    ABBIAMO:

    // Opacità
    function gestione_op() {

    $(‘#thumb-container img’).css(“opacity”,”0.5″);

    $(‘#thumb-container img’).mouseenter(
    function(){
    $(this).css(“opacity”,”1.0″);
    });

    $(‘#thumb-container img’).mouseleave(
    function(){
    $(this).css(“opacity”,”0.5″);
    });

    } //fine funzione

    CHE VOLENDO animare diventa:
    ………………………….

    grazie escusa l’imbranataggine

  4. $('#thumb-container img').mouseenter( //quando vado sopra con il mouse
    function(){ //eseguo la funzione
    $(this).animate(
    {
    opacity: 1 //imposta la tua opacità
    }, 350
    });

    $('#thumb-container img').mouseleave( //quando levo il mouse
    function(){
    $(this).animate(
    {
    opacity: 0
    }, 350
    });

    hai provato con questo?

    1. appena ho un attimo te lo faccio e ti metto il link dove scaricare 😉 hai provato con i css3 come ti ho consigliato nello scorso articolo che è più facile e veloce?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Pannello di login in formato psd

Pannello di login in formato psd