Galleria immagini con effetti jQuery UI

In questa pillola vedremo come creare un semplice mosaico di immagini, ingrandite con un effetto della libreria jQuery UI.

DEMO

Il codice HTML si compone di un div contenitore, che contiene un div per le miniature (div id="thumbs") e un div per le immagini ingrandite (div id="large"). Una tessera del mosaico contiene un testo (div class="title").
L'attributo onclick di ciascuna miniatura richiama la funzione javascript zoomImg. Il parametro passato alla funzione coincide con l'inizio del nome della relativa immagine ingrandita.

Codice HTML

<div id="contenitore">
<!-- miniature -->
  <div id="thumbs">
      <img onclick="zoomImg('01')" src="img/01_thumb.jpg" alt="" />
      <img onclick="zoomImg('02')" src="img/02_thumb.jpg" alt="" />
      <img onclick="zoomImg('03')" src="img/03_thumb.jpg" alt="" />
      <div class="title">
           <p><span>Titolo</span>testo</p>
      </div>
      <img onclick="zoomImg('04')" src="img/04_thumb.jpg" alt="" />
      <img onclick="zoomImg('05')" src="img/05_thumb.jpg" alt="" />
  </div>
<!-- immagini ingrandite -->
  <div id="large">
     <img src="img/01.jpg" alt="" />
     <img src="img/02.jpg" alt="" />
     <img src="img/03.jpg" alt="" />
     <img src="img/04.jpg" alt="" />
     <img src="img/05.jpg" alt="" />
  </div>
</div>

Questo è il codice CSS:

#contenitore{
  position:relative;
  width: 630px;
  height: 420px;
  margin: 20px auto;
  background: transparent url('img/texture.png') bottom left no-repeat;
  }
  #thumbs img{
  float:left; 
  width: 210px;
  cursor:url(img/zoom-in.gif),url(img/zoom-in.cur),auto;
  }
  .title{
  float:left; 
  width: 210px;
  height: 210px;
  color:#000;
  font-family: 'Trebuchet MS', sanserif;
  text-align:center;
  }
  .title p{
  padding:40px 10px;
  margin:0;
  }
  .title span{
  font-weight: bold;
  font-size:40px;
  font-family: 'Architects Daughter', cursive;
  }
  #large img{
  position:absolute;
  top:0;
  left:0;
  display:none;
  cursor:url(img/zoom-out.gif),url(img/zoom-out.cur),auto;
  }

Per il titolo abbiamo scelto un Google Fonts: Architects Daughter.
Per ottenere il cursore a forma di lente (zoom-in, zoom-out), abbiamo creato due immagini .gif  e, grazie al sito cursor.cc, i relativi file .cur. Questo per ottenere una maggiore compatibilità tra i vari browser.
Tutte le immagini ingrandite vengono nascoste con display:none per essere visualizzate, al click sulla relativa miniatura, grazie alla funzione javascript:

function zoomImg(s) {
$('#large img[src$="'+s+'.jpg"]').show('explode');
$('#large img').click(function(){
$(this).hide('clip', 900);
});
}

La funzione utilizza le librerie jQuery e jQuery UI, che devono essere inserite in head.
Per l'ingrandimento abbiamo scelto l'effetto explode, mentre per tornare al mosaico l'effetto clip.

Per approfondire l'argomento:

• CSS cursor property - W3Schools
• Effect jQuery UI