JonDesign’s SmoothGallery 2.0 ! es una galería de imágenes y slideshow con excelentes efectos. Para lograr eso utiliza la biblioteca Javascript Mootools v1.11.

El sitio está en inglés y la parte de la implementación está muy bien explicada.

SmoothGallery 2.0! una excelente forma de lograr excelentes efectos si complicarse.

Captura de página principal de SmoothGallery

Para implementar una simple galería con transiciones suaves solo debemos escribir en el <head>:

  • <script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
  • <script src="scripts/jd.gallery.js" type="text/javascript"></script>

y enlazar la CSS:

  • <link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />

Luego este es el código para crear un slideshow con 2 elementos:

  • <div id="myGallery">
  • <div class="imageElement">
  • <h3>Item 1 Title</h3>
  • <p>Item 1 Description</p>
  • <a href="mypage1.html" title="open image" class="open"></a>
  • <img src="images/brugges2006/1.jpg" class="full" />
  • <img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
  • </div>
  • <div class="imageElement">
  • <h3>Item 2 Title</h3>
  • <p>Item 2 Description</p>
  • <a href="mypage2.html" title="open image" class="open"></a>
  • <img src="images/brugges2006/2.jpg" class="full" />
  • <img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
  • </div>
  • </div>

Sitio: smoothgallery.jondesign.net

Descarga
: Smooth Gallery

Además:
En Web Designer Wall publican un tutorial de jQuery para diseñadores:

Ver: Demos
Descargar Tutorial

Otras galerías y bibliotecas para trabajar con imágenes:

También:

Tags: , , , , , , ,

Por Diego Cambiaso

Comunicador Social, Desarrollador de Software y UX Designer. Blogger desde el 2006, creador de Pixelco Tech. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT