Plugin, contro plugin, esperimenti e chi più ne ha più ne metta! Utilizzando gli effetti di base di jQuery, e servendoci magari delle jQueryUI, riusciamo ad ottenere delle transizione omogenee di colori e scritte; quando però si tratta di effettuare delle transizioni di immagini il problema pare irrisolvibile. Come fare quindi? Spulciando sul web, mixando e facendo tesoro di quanto trovato vi riporto passo passo la procedura per realizzare l’effetto di dissolvenza desiderato, visibile nella demo:


Come chicca aggiuntiva andremo ad aggiungere la didascalia alle nostre immagini, estratta direttamente dall’attributo title!

Il markup html per preparare la transizione

Partiamo come di consueto dall’analisi del markup html:

<div id="container">
	<div class="thumb">
		<div class="bwthumb"><img src="IMG_1053bw.jpg" width="620" height="300" alt="Immagine in bianco e nero" title="Immagine Con effetto fade colore-bianco e nero" /></div>
		<div class="colore"><img src="IMG_1053.jpg" width="620" height="300" alt="Immagine a colori" /></div>
	</div>
	<div class="descrizione"></div>
</div>

Abbiamo un contenitore che useremo per posizionare il nostro blocco, un div chiamato “thumb” nel quale metteremo i 2 contenitori: uno per l’immagine di partenza ed uno per l’immagine alla quale vogliamo arrivare con l’effetto di transizione. Infine, fuori dal contenitore “thumb” creiamo un div nel quale far apparire il famoso attributo “alt”, la didascalia della nostra immagine.
NB: seppur nell’esempio noterete alcune abbreviazioni nelle dichiarazioni, tipiche di html5, nella scrittura del markup consiglio sempre di utilizzare la dicitura minuscola e chiudere i tag autochiudenti correttamente, per una questione di maggior chiarezza e leggibilità.

Il CSS, l’importanza della proprietà z-index

Il foglio stile che utilizziamo è molto semplice, ci sono 2 note importanti però da sottolineare che rappresentano il fulcro attorno a cui ruota tutto lo script.

  • La posizione absolute dei 2 contenitori di immagini
  • La proprietà z-index, che ci permette di “nascondere” un div sotto l’altro

Vi ricordo che per utilizzare la proprietà z-index, e poter quindi ragionare su livelli, è indispensabile che i contenitore abbia una posizione dichiarata esplicitamente e diversa da static (quindi relative ed absolute, fixed non so ^^).
Le parti importanti del nostro css, al fine del funzionamento, saranno quindi:

.descrizione {
	position:relative;
	padding:5px 15px 5px 30px;
	display:none;
	background:#fff;
	color:#000;
	top:308px;
	}
img {
	display:block;
	border:4px solid #fff;
	}
.thumb {
	position:relative;
	width:620px;
	}
.bwthumb, .colore {
	position:absolute;
	top:0;
	left:0;
	width:620px;
	height:300px;
	}
.bwthumb {
	z-index:2;
	}
.colore {
	z-index:1;
	}

Eccezion fatta per quanto appena detto, il resto sono modifiche liberamente gestibili, dai colori, alle dimensioni.

Lo script jQuery, .hover(), .animate() e opacità

Lo script, a parole, non farà altro che, giocando sull’opacità, nascondere e mostrare al passaggio del mouse il div posizionato sopra (z-index maggiore) o sotto, riducendo e aumentato l’opacità. Ricordiamoci che l’opacità realizzata con jQuery, così come il resto dello script, è compatibile con tutti i browser, IE6 compreso.
La parte relativa alla mostra della descrizione dell’immagine, che non analizzeremo nel dettaglio è ottenuta grazie all’utilizzo della funzione .attr(). Un aiuto concreto potrebbe venirvi dallo studio dello script utilizzato per realizzare una semplice gallery di immagini. Se la logica rimanesse ugualmente non del tutto chiara fate pure domande liberamente nei commenti!

$(document).ready(function () {
	var titolo;
	$('.bwthumb img').hover(
		function() {
			$('.bwthumb').stop().animate({opacity:'0'},1000);
			titolo = $(this).attr('title');
			$(this).removeAttr('title');
			$('.descrizione').append(""+titolo+"");
			$('.descrizione').fadeIn(500);
		},
		function() {
			$('.bwthumb').stop().animate({opacity:'1'},1000);
			$('.descrizione').fadeOut(500, function(){
				$('.descrizione span').remove();
				});
			$(this).attr('title', titolo);
		}
	);
});

Analizziamo quindi le parti rilevanti per gestire la transizione con effetto comparsa-scomparsa delle immagini:

	$('.bwthumb img').hover(
		function() {},
		function() {}
        );

La funzione .hover() permette di gestire 2 eventi, il primo al mouseover, il secondo al mouseout.

$('.bwthumb').stop().animate({opacity:'0'},1000);

Al mouseover facciamo in modo che l’opacità del contenitore dell’immagine in bianco e nero (posizionato sul livello superiore) si azzeri (opacity:0) nell’intervallo di 1000 millisecondi (1 secondo). La funzione stop ci permette di bloccare ulteriori effetti di mouseover. In parole povere ci evita una sorta di loop dal momento che quando si passa col mouse sull’immagine ci si rimane, rimaniamo potenzialmente sempre in una condizione di “mouseover” che creerebbe possibili problemi di loop. In questo modo annientiamo ogni problema e se usciamo dall’area sensibile durante l’animazione questa verrà riportata alla condizione di partenza.

$('.bwthumb').stop().animate({opacity:'1'},1000);

Al mouseout invece riportiamo l’opacità dell’elemento superiore a 1 così da mascherare il contenitore inferiore. Et voilà, la magia è compiuta!

Buon divertimento 😉