Introduction

PhotoSwipe es una galería de imágenes JavaScript sin dependencias.

Y lo que más importa es que:

• Es altamente modificable, tanto sus opciones como maquetado.

• Funciona en mobile (soporta gestos touch)

• Manipula la API Historial del explorador. Quiere decir que se puede usar el botón retroceso del explorador para cerrar la galería. Por otro lado cada item de cada galería tiene una URL única (se puede compartir la URL a la imagen directamente).

• Se puede hacer Zoom

• Crea la ilusión de que las imágenes cargan rápido.

• Responsive

• Se puede usar el teclado para manejarlo

• Se puede realizar Social sharing (desde la UI)

• Se pueden descargar las imágenes (desde la UI).

Para más información conviene ir a su página oficial.

Para poder implementarla en una app Rails debemos hacer lo siguiente:

en el gemfile.rb

gem 'photoswipe-rails'

en app/assets/javascripts/application.js

//= require photoswipe
//= require photo_swipe_config.js

en app/assets/stylesheets/application.css.sass

//= require photoswipe

Creamos un partial, por ejemplo app/views/shared/_photoswipe.html.haml En este ponemos el siguiente código.

.pswp{"aria-hidden" => "true", :role => "dialog", :tabindex => "-1", :id => "post-gallery"}
  /
    Background of PhotoSwipe.
    It's a separate element, as animating opacity is faster than rgba().
  .pswp__bg
  / Slides wrapper with overflow:hidden.
  .pswp__scroll-wrap
    / Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory.
    .pswp__container
      / don't modify these 3 pswp__item elements, data is added later on
      .pswp__item
      .pswp__item
      .pswp__item
    / Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed.
    .pswp__ui.pswp__ui--hidden
      .pswp__top-bar
        / Controls are self-explanatory. Order can be changed.
        .pswp__counter
        %button.pswp__button.pswp__button--close{:title => "Cerrar (Esc)"}
        %button.pswp__button.pswp__button--share{:title => "Compartir"}
        %button.pswp__button.pswp__button--fs{:title => "Pantalla completa"}
        %button.pswp__button.pswp__button--zoom{:title => "Acercar/Alejar"}
        / Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR
        / element will get class pswp__preloader--active when preloader is running
        .pswp__preloader
          .pswp__preloader__icn
            .pswp__preloader__cut
              .pswp__preloader__donut
      .pswp__share-modal.pswp__share-modal--hidden.pswp__single-tap
        .pswp__share-tooltip
      %button.pswp__button.pswp__button--arrow--left{:title => "Anterior"}
      %button.pswp__button.pswp__button--arrow--right{:title => "Siguiente"}
      .pswp__caption
        .pswp__caption__center

Este es un ejemplo, pero de este maquetado hay ciertos elementos que deben estar siempre. Pueden ver el ejemplo que presenta PhotoSwipe en su guía. Lo importante es que se puede modificar bastante.

Lo que hacemos ahora es incorporar este partial al layout de nuestra app:

= render 'shared/photoswipe'

En app/assets/javascripts/photo_swipe_config.js poner el siguiente Código

Acá se pueden definir las opciones que queramos. Ver la documentación oficial. Notar el selector que se usa al final

'.js-pswp-container'

Hasta acá con esta configuración podemos cargar una galería de imágenes en cualquier parte del sitio respetando el selector mencionado anteriormente y respetando cierto maquetado para que funcione. Por ejemplo, en el show de un post de handing, mostramos las imágenes que se adjuntaron al mismo de esta forma:

.js-pswp-container
  - post.all_images.each do |file|
    %figure.text-center.post-gallery-img{:itemprop => "associatedMedia", :itemscope => "", :itemtype => "http://schema.org/ImageObject"}
      %a.post-img-gallery-container{"data-size" => "#{dimensions_in_str_for(file)}", :href => "#{file.url}", :itemprop => "contentUrl"}
        %img{:alt => "Image description", :itemprop => "thumbnail", :src => "#{file.url(:thumb)}", class: "img-pswp-gallery"}
      %figcaption{:itemprop => "caption description", :style => "display:none;"}
        = file.name

Es importante respetar las etiquetas figure, a, img y figcaption y los atributos que hay en ellas.

IMPORTANTE: PhotoSwipe necesita saber las dimensiones y la url de la imagen. Pueden ver el atributo:

"data-size" => "#{dimensions_in_str_for(file)}" Este es un helper method que me armé para traerme las dimensiones de la imagen del estilo "1600x800" por ejemplo. Esto pueden lograrlo con MiniMagick.

MiniMagick::Image.open(path).width
MiniMagick::Image.open(path).height

Lo importante de esta estructura que armamos es que podemos crear otra galería, incluso en la misma vista, utilizando el selector antes mencionado y el maquetado para cada imagen.