Como abrir la versión en alta resolución de cualquier imagen en pantalla completa y adaptable

  • 27 Ene 2016
  • Drupal 7, JavaScript, jQuery, theme

El objetivo es el de permitir a los usuarios poder abrir el pantalla completa en forma no invasiva la versión en alta definición de una imagen. Sin ventanas emergentes (pop-ups) y sin la necesidad de implementar un modal.

Para llevarlo a cabo, vamos a utilizar la librería intense-image. Lo que hace es cargar la imagen en alta resolución y mostrarla dentro la pantalla (que en este caso es más pequeña que la imagen). Para observar las partes oculatas de la imagen basta desplazarse con el mouse. De acuerdo a su posición, desplaza la imagen utilizando la propiedad translate. Pesa solo 8K.

Implementación de intense-image en Drupal

Para implementar intense-image en Drupal rápidamente (tal vez un poco quick-and-dirty) podemos hacer lo siguiente:

1. Agregar la librería

Agregamos la versión reducida del archivo .js al template. La forma más simple es agregando la siguiente linea al archivo .info de nuestro theme (en este caso es un subtheme de Bootstrap)

scripts[] = 'js/intense.min.js'

Otra forma es utilizando la función drupal_add_js en una función template_preprocess_page

2. Crear el HTML

Para utilizar intense-images el contenedor de nuestra imagen debe incluir la url de su versión en alta resolución.

<div class="anything" data-image="./img/awesome-source.jpg" />

Será necesario indicar de algún modo la url de la imagen en el estilo (admin/config/media/image-styles) que represente nuestras imágenes el alta resolución. Para esto, el módulo image url formatter podría darnos una buena ayuda. Si estamos trabajando con Panels, podríamos agregar dentro del mismo contenedor que el de la imagen, el mismo campo duplicado pero con el formato Image URL e indicando una clase que lo oculte (en Bootstrap: hidden) y una clase que lo identifique, por ejemplo, data-img-intense.

Implementación intense-image en Drupal

3. Aplicar Intense a la imagen

Finalmente, con unas líneas de jQuery podremos agregar la url oculta como parámetro data-image al contenedor de la imagen y finalmente llamar Intense.

var intensePic = $('contenedor-de-la-imagen');
intensePic.attr('data-image', $('.contenedor-image-hd').text());
Intense(intensePic);