jQuery: portfolio dinamico con anteprima

Creare un portfolio dinamico con anteprima in jQuery richiede semplicemente l'utilizzo di un servizio online di anteprima o, in alternativa, di alcuni elementi iframe usati come sostitutivi dell'anteprima vera e propria. Nel nostro esempio useremo il secondo approccio. Vediamo insieme i dettagli.

Abbiamo la seguente struttura HTML che mostra una serie di elementi iframe all'interno di un contenitore:

<div id="portfolio">

<iframe src="http://www.icosfitness.com/"></iframe>
<iframe src="http://www.linea4office.com/"></iframe>
<iframe src="http://www.nicolacolecchia.it/"></iframe>

</div>

Vogliamo utilizzare jQuery per trasformare questa struttura nella seguente:

<div id="portfolio">

	<div class="preview">
	
	  <div class="overlay">
	  
	  	<a></a>
	  
	  </div>
	  
	  <iframe/>
	
	</div>
	
	<!-- si ripete -->

</div>

Tenendo conto della struttura finale, ecco i nostri stili CSS:

#portfolio {

  padding: 2em 0 2em 3.5em;
  margin: 0 auto;
  width: 80%;
  overflow: hidden;
  height: 100%;
  border: 1px solid #aaa;
  border-radius: 10px;
  


}

div.preview {
	width: 32%;
	margin: 0 5px 0 0;
	float: left;
	height: 300px;
	position: relative;
	
}

div.preview iframe {

  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  cursor: pointer;
  margin: 0;
  padding: 0;

}

div.overlay {
	position: absolute;
	width: 100%;
	height: 0px;
	overflow: hidden;
	top: 0;
	left: 0;
	background: #333;
	line-height: 300px;
}

div.overlay a {
	width: 100%;
	height: 100%;
	display: block;
	text-align: center;
	font-size: 1.6em;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
}

Come si può notare, l'elemento di overlay è stato posizionato in modo contestuale all'interno del suo genitore e la sua altezza è stata azzerata. Useremo jQuery e il plugin Easing per animare tale altezza quando il mouse passa su ciascuna anteprima:

$(function() {

  $('iframe', '#portfolio').attr({
  	frameborder: '0',
  	scrolling: 'no',
  	width: '400',
  	height: '300'
  });
  
  $('iframe', '#portfolio').each(function() {
  
  
    $(this).wrap('<div class="preview"></div>');
  
  
  });
  
  $('div.preview', '#portfolio').each(function() {
  
    var $preview = $(this);
    var $iframe = $preview.find('iframe');
    var href = $iframe.attr('src');
    
    $('<div class="overlay"/>').
    html('<a href="' + href + '">Visita il sito</a>').
    css('opacity', '0.8').
    insertBefore($iframe);
  
  
  });
  
  $('div.preview', '#portfolio').each(function() {
  
    var $preview = $(this);
    var $overlay = $preview.find('div.overlay');
    
    $preview.hover(function() {
    
      $overlay.stop(true, true).
      animate({
        height: 300
      }, 'slow', 'easeOutBounce');
    
    
    }, function() {
    
    
      $overlay.stop(true, true).
      animate({
        height: 0
      }, 'slow', 'easeOutBounce');

    
    
    
    });
  
  
  
  });


});

Potete visionare l'esempio finale in questa pagina.