jQuery: immagini come tooltip

Possiamo combinare una semplice tecnica per mostrare e nascondere elementi con jQuery alle immagini di sfondo CSS per ottenere l'effetto di immagini ingrandite al passaggio del mouse. L'effetto è realizzato usando una cornice sfumata da applicare alle immagini ingrandite. Vediamo insieme i dettagli.

Partiamo da questa struttura HTML:


<div id="gallery">

	<ul>
	
		<li><img src="http://dev.css-zibaldone.com/onwebdev/post/img/slides/slide-1.jpg" alt="" /></li>
		<li><img src="http://dev.css-zibaldone.com/onwebdev/post/img/slides/slide-2.jpg" alt="" /></li>
		<li><img src="http://dev.css-zibaldone.com/onwebdev/post/img/slides/slide-3.jpg" alt="" /></li>
		<li><img src="http://dev.css-zibaldone.com/onwebdev/post/img/slides/slide-4.jpg" alt="" /></li>
		<li><img src="http://dev.css-zibaldone.com/onwebdev/post/img/slides/slide-5.jpg" alt="" /></li>
	
	</ul>

</div>

Il CSS è il seguente:


#gallery {
	width: 525px;
	height: 90px;
	margin: 0 auto;
}

#gallery ul {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

#gallery li {
	float: left;
	width: 100px;
	margin-right: 5px;
	height: 100%;
	position: relative;
}

#gallery li img {
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

div.img-tip {

    width: 500px;
    height: 400px;
    background: url(img-tip.png) no-repeat;
    position: absolute;
    top: 100px;
    left: 0;
    margin-left: -200px;

}

#gallery li div.img-tip img {
	display: block;
	width: 380px;
	height: 240px;
	margin: 0 auto;
	padding: 100px 0 0 0;
}

I tooltip verranno creati dinamicamente con jQuery ottenendo il valore dell'attributo src di ciascuna immagine:


var tooltip = '<div class="img-tip"></div>';

  $('li', '#gallery').each(function() {
  
    var $li = $(this);
    var src = $li.find('img').attr('src');
    
    $(tooltip).html('<img src="' + src + '"/>').
    appendTo($li).hide();
  
  });

Il tooltip viene inserito e nascosto nella voce di lista corrente. Quindi dobbiamo solo associare un evento hover su ciascuna voce di lista:


$('li', '#gallery').each(function() {
  
    var $li = $(this);
    var $img = $li.find('img');
    
    $img.hover(function() {
    
    
      $img.next().
      stop(true, true).
      fadeIn('slow');
    
    
    }, function() {
    
    
      $img.next().
      stop(true, true).
      fadeOut('slow');
    
    
    
    });
  
  
  
});

Potete visionare l'esempio finale in questa pagina.

Torna su