# 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.](http://photoswipe.com/)

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](http://photoswipe.com/documentation/getting-started.html). 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](http://gitlab.demos.redmintlabs.com/redmint/handing/raw/sprint-4/app/assets/javascripts/photo_swipe_config.js)

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.
