¿La perfecta galería de imágenes? Usando PhotoSwipe con jQuery

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Recientemente descubrí una librería Javascript llamada PhotoSwipe y estoy realmente impresionado. Es una brillante librería que superpone una imagen o un grupo de imágenes en tu página, un efecto popularmente conocido como lightbox. PhotoSwipe es actualmente desarrollada por Dmitry Semenov-él la reconstruyó el año pasado cuando tomó las riendas del proyecto. Las mejoras incluyen:

Modular: PhotoSwipe es construida en varios módulos, permitiéndote omitir características particulares que no necesitas. Ésto mantiene la librería muy ligera.
Responsiva o Adaptable: una característica indispensable desde todos los puntos de vista. Photoswipe muestra el tamaño de imagen apropiado basándose en la actual ventana gráfica.
Gestos táctiles: PhotoSwipe soporta algunos gestos táctiles que permiten a los usuarios interactuar a través de Pulsar o Pinchar, dándole funcionalidades de ventana emergente, zoom, y cerrar.

La única desventaja es que PhotoSwipe no se ejecuta inmediatamente. Como el desarrollador señala:

"PhotoSwipe es hecha simple y rápida para los usuarios finales, no para los desarrolladores. No es un simple plugin de jQuery, al menos se requiere un conocimiento básico de JavaScript para instalarla.

Pero puede ser usada conjuntamente con otras librerías. En éste tutorial, vamos a ver como utilizar PhotoSwipe con jQuery. Haremos todo el proceso fácilmente comprensible, aún si no eres experto en JavaScript.

Iniciemos.

1. Comenzando

Comenzaremos con:

Creando los directorios del proyecto.
Creando un documento HTML.
Enlazando a jQuery. En éste tutorial voy a usar jQuery 2.0, por lo tanto sólamente funciona con navegadores modernos.
Incluir las copias de la librería PhtoSwipe que comprenden los archivos: photswipe.min.js, photoswipe-ui-default.min.js (el código que construye el PhotoSwipe UI), default-skin.css, default-skin.png, default-skin.svg, y preloader.gif.
Arreglar en orden los archivos en tu directorio preferido y enlazarlos dentro del archivo HTML.

2. Estructurando el HTML

La estructura HTML es la parte más esencial ya que eventualmente indicará como escribimos JavaScript. Aquí asumiré que tenemos un par de imágenes, como sigue:

<div class="picture" itemscope itemtype="http://schema.org/ImageGallery">
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="img/city-1.jpg" itemprop="contentUrl" data-size="1000x667" data-index="0">
      <img src="img/city-1-thumb.jpg" height="400" width="600" itemprop="thumbnail" alt="Beach">
    </a>
  </figure>
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="img/city-2.jpg" itemprop="contentUrl" data-size="1000x667" data-index="1">
          <img src="img/city-2-thumb.jpg" height="400" width="600" itemprop="thumbnail" alt="">
      </a>
  </figure>
</div>

Atributos Data (Personalizados)

Además de la clase y los atributos de Schema (que ayudarán con SEO), también hemos añadido un atributo data-* en la etiqueta anchor (enlace) que incluye la imagen. Éste guardará el tamaño completo (anchura x altura) de la imagen.

Más código HTML

Ahora agregamos el código que PhotoSwipe usará para superponer las imágenes completas. Agrega ésto justo antes de la etiqueta de cierre body </body>

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">

        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>

Establecimos el HTML, ahora podemos proceder con JavaScript. Como lo mencioné usaremos jQuery.

3. jQuery

Nuestras imágenes están agrupadas dentro de un div con una clase picture. Puede haber más grupos de imágenes dentro de la página, por lo tanto iteramos a través de cada elemento .picture.

1	$('.picture').each( function() {
2
3	});

Detalles

PhotoSwipe nos pide que proporcionemos la fuente de la imagen junto con su tamaño. Para ésto creamos una función que iterará a través de la etiqueta anchor (enlace) para tomar éstos detalles, de ésta forma:

$('.picture').each( function() {
    var $pic     = $(this),
        getItems = function() {
            var items = [];
            $pic.find('a').each(function() {
                var $href   = $(this).attr('href'),
                    $size   = $(this).data('size').split('x'),
                    $width  = $size[0],
                    $height = $size[1];

                var item = {
                    src : $href,
                    w   : $width,
                    h   : $height
                }

                items.push(item);
            });
            return items;
        }

    var items = getItems();
});

Dividamos éste código en varias piezas:

Primero iniciamos con un arreglo vacío items)[].
Luego iteramos a través de cada etiqueta anchor con el método.each() .
$href=$(this).attr('href') obtiene el valor en el atributo href, guardando la ruta de la imagen.
$size=$(this).data('size').split('x') obtendrá el valor del atributo data-size a través del método jQuery .data() . Entonces usamos el método split() para separar el valor.
Podemos obtener el valor de la anchura y la altura por separado con: $width=$size[0] y $height=$size[1].
Usando el método push() recogemos toda ésta información en un arreglo.

Probar en la Consola

Ahora tenemos la fuente de la imagen y el tamaño de la imagen almacenada en la variable items. Para verificar, puedes ejecutar la variable a través de console.log() y deberías encontrar la siguiente estructura de datos en DevTools (herramientas para desarrolladores).

Click

Posteriormente, unimos el elemento figure con el evento click, construimos una instancia PhotoSwipe, pasamos el items junto con las opciones de configuración, y finalmente inicializamos PhotoSwipe.

var $pswp = $('.pswp')[0];
$pic.on('click', 'figure', function(event) {
    event.preventDefault();
    
    var $index = $(this).index();
    var options = {
        index: $index,
        bgOpacity: 0.7,
        showHideOpacity: true
    }
    
    // Initialize PhotoSwipe
    var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
    lightBox.init();
});

La razón por la que usamos el elemento figure para hacer click, en lugar de la etiqueta anchor, es para que podamos obtener fácilmente el índice (o el orden subsecuente). Ésto nos permite informar a PhotoSwipe del índice correcto para superponer la imagen correspondiente.

Conclusión

Acabamos de implementar PhotoSwipe utilizando jQuery. El código es comparablemente más corto y más fácilmente entendible que cuando es escrito en puro JavaScript.

Ahora que ya iniciaste, puedes también ajustar PhotoSwipe con varias opciones proporcionadas e incluso precargar la imagen así que verás la imagen completa instantáneamente al hacer click. Dejaré los estilos a tu imaginación ya que no hay reglas estrictas para éstos.

Espero que hayas aprendido algo en éste tutorial, y encontrarlo útil a veces. No olvides checar el demo y externar cualquier pregunta o idea en la sección de comentarios.

Más Recursos

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!