jQuery: galleria di immagini con zoom

Quello che vogliamo realizzare in questo esempio è una semplice galleria di immagini in cui cliccando su ciascuna miniatura appare una lente di ingrandimento che consente di visionare l'immagine corrente a dimensione reale. Vediamo come implementare questo effetto con jQuery.

Partiamo da questa struttura HTML:

<div id="gallery">

	<div class="pic">
	
		<img src="1.jpg" alt="" />
	
	</div>
	
	<div class="pic">
	
		<img src="2.jpg" alt="" />
	
	</div>
	
	<div class="pic">
	
		<img src="3.jpg" alt="" />
	
	</div>
	
	<div class="pic">
	
		<img src="4.jpg" alt="" />
	
	</div>
	
	<div class="pic">
	
		<img src="5.jpg" alt="" />
	
	</div>

</div>

Gli elementi che verranno generati da jQuery sono le icone di ingrandimento e l'immagine a dimensione reale. Ecco quindi il nostro CSS:

#gallery {
	margin: 0 auto;
	padding: 2em 0;
	height: 550px;
	width: 800px;
}

div.pic {
	float: left;
	width: 160px;
	height: 110px;
	position: relative;
}

div.pic img {
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

div.pic a.zoom {
	width: 26px;
	height: 26px;
	background: url(zoom.png) no-repeat;
	text-indent: -1000em;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -13px 0 0 -13px;
	display: none;
	cursor: pointer;
}

#full {
	clear: both;
	padding-top: 10px;
	width: 800px;
	height: 510px;
	display: none;
}

I link con classe zoom e l'immagine con ID full verranno generati da jQuery. Vediamo come:

$(function() {

  $('<img/>').attr('id', 'full').
  appendTo('#gallery');

  $('div.pic', '#gallery').each(function() {
  
    var $pic = $(this);
  
    $('<a/>', {
      'class': 'zoom',
      text: 'Zoom'
    }).appendTo($pic);
    
    var $a = $('a.zoom', $pic);
    var $img = $('img', $pic);
    
    $img.click(function() {
    
      $img.animate({
        opacity: 0.5
      }, 'slow', function() {
      
        $a.fadeIn('slow');
      
      
      });
    
    
    });
    
    $a.click(function(event) {
    
      $('#full').hide();
    
      var src = $img.attr('src');
      $('#full').attr('src', src).fadeIn('slow');
      
      $a.hide();
      $img.css('opacity', 1);
    
    
    
    
    });
    
    
  
  
  });

});

Come si può notare, l'immagine a piene dimensioni cambia di volta in volta grazie all'impostazione dinamica del suo attributo src. Potete visionare l'esempio finale in questa pagina.