jQuery: effetto Lightbox

Creare un effetto Lightbox con jQuery richiede solo pochi semplici passaggi. Un effetto Lightbox si applica in genere su una galleria di immagini composta da miniature delle stesse. Quando l'utente clicca su una miniatura, un livello semitrasparente copre la pagina ed un altro elemento mostra l'immagine nelle sue dimensioni originali. Questo elemento presenta in genere un bottone di chiusura ed una didascalia che descrive l'immagine ivi contenuta. Quando l'utente fa clic sul bottone di chiusura, sia il livello semitrasparente che il contenitore dell'immagine scompaiono mostrando di nuovo la galleria di immagini. Vediamo come implementare questo effetto con jQuery.

La marcatura di base per la galleria di immagini potrebbe essere la seguente:


<ul id="gallery">
	<li><a href="#"><img src="1.jpg" alt="Immagine 1" /></a></li>
	<li><a href="#"><img src="2.jpg" alt="Immagine 2" /></a></li>
	<li><a href="#"><img src="3.jpg" alt="Immagine 3" /></a></li>
	<li><a href="#"><img src="4.jpg" alt="Immagine 4" /></a></li>
	<li><a href="#"><img src="5.jpg" alt="Immagine 5" /></a></li>
	<li><a href="#"><img src="6.jpg" alt="Immagine 6" /></a></li>
	<li><a href="#"><img src="7.jpg" alt="Immagine 7" /></a></li>
	<li><a href="#"><img src="8.jpg" alt="Immagine 8" /></a></li>
</ul>

In questo caso è importante che le immagini abbiano l'attributo alt impostato in quanto quest'ultimo verrà usato per generare il testo della didascalia. Il nostro CSS di base è il seguente:


body {
	margin: 0;
	padding: 0;
	font: 100% Arial, sans-serif;
}

#gallery {
	width: 620px;
	margin: 0 auto;
	padding: 2em 0;
	list-style: none;
	height: 100%;
	overflow: hidden;
}

#gallery li {
	float: left;
	width: 150px;
	margin-right: 5px;
	margin-bottom: 5px;
	height: 90px;
}

#gallery a {
	display: block;
	width: 100%;
	height: 100%;
}

#gallery img {
	display: block;
	border: none;
	width: 100%;
	height: 100%;
}

Con jQuery dovremo creare la seguente struttura DOM prima della chiusura dell'elemento body:


<div id="overlay"></div>
<div id="lightbox">
	<a href="#">Chiudi</a>
	<img />
	<p></p>
</div>
</body>

È necessario inserire questa struttura nella posizione indicata poichè entrambi gli elementi saranno posizionati in modo assoluto così da sovrapporsi al resto del contenuto della pagina creando l'effetto di due livelli:


#overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #000;
}

#lightbox {
	width: 560px;
	background: #fff;
	border: 0.5em solid #aaa;
	height: 460px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -230px 0 0 -280px;
}

#lightbox a {
	display: block;
	width: 36px;
	height: 36px;
	background: url(close.png) no-repeat;
	position: absolute;
	top: -20px;
	right: -12px;
	text-indent: -1000em;
}

#lightbox img {
	display: block;
	margin: 20px auto;
	width: 500px;
	height: 350px;
}

#lightbox p {
	text-align: center;
	font-style: italic;
	margin: 0;
}

Il primo livello creerà l'effetto di patinatura, mentre quello successivo andrà ad ospitare l'immagine e la sua didascalia unitamente al bottone di chiusura. Notate come il primo livello abbia le stesse dimensioni della pagina.

Con jQuery dobbiamo innanzitutto inserire la struttura DOM vista in precedenza. Dobbiamo inoltre impostare l'opacità del primo livello in modo da creare l'effetto di patinatura. Questi livelli vanno inizialmente nascosti:


$('<div id="overlay"/>').css('opacity', '0.5').
  appendTo('body').hide();
  
$('<div id="lightbox"/>').html('<a href="#">Chiudi</a>' +
  '<img/>' + '<p></p>').appendTo('body').hide();

L'azione successiva è quella di creare l'effetto di chiusura sul bottone del secondo livello. Quando noi creiamo una struttura DOM al volo possiamo avere dei problemi nel creare degli eventi su tale struttura. Per questa ragione utilizziamo il metodo live(), il quale gestisce gli eventi non solo per gli elementi esistenti, ma anche per quelli che potremo creare successivamente:


$('a', '#lightbox').live('click', function(event) {
  
    $(this).parent().hide().prev().hide();
    
    event.preventDefault();
});

A questo punto dobbiamo associare un evento click su ciascun link della galleria. Quando l'utente clicca sul link, usiamo gli attributi src e alt di ciascuna immagine per impostare l'attributo src dell'immagine a piene dimensioni e la didascalia che segue l'immagine. Quindi mostriamo prima il livello di patinatura e subito dopo il livello che contiene l'immagine ingrandita:


 $('li', '#gallery').each(function() {
  
    var $li = $(this);
    var $a = $('a', $li);
    
    $a.click(function(event) {
    
      var $img = $('img', $a);
      var src = $img.attr('src');
      var alt = $img.attr('alt');
      
      $('img', '#lightbox').attr('src', src);
      $('p', '#lightbox').text(alt);
      
      $('#overlay').show('fast', function() {
      
        $(this).next().show('slow');
      
      });
    
      event.preventDefault();
    
    });
  
  
});

Potete visionare l'esempio finale in questa pagina.

Torna su