Antes y después. Visor de imágenes deslizantes siamesas

Este es el típico jueguecito de las dos imágenes solapadas que mediante un control hacemos que aparezcan alternativamente, pudiendo graduar su visibilidad desde 0 a 100 pero pasando por todos los puntos intermedios de su ancho.

Hay muchos sistemas para conseguir el efecto, pero como nos gusta ponéroslo fácil y además actualmente interesa que las cosas sean adaptables a todos los anchos de pantalla, he escogido un plugin jQuery de ZURB Studios llamado TwentyTwenty -supongo que como juego de palabras relacionado con la expresión fifty-fifty- que cumplía los dos requisitos.

Lo que es el JavaScript lo he comprimido y adaptado un pelín, para que podáis alojarlo en vuestra propia plantilla (esta vez sin bromas) y así no tener que cargarlo desde un alojamiento externo.

Con el CSS más o menos lo mismo, para así daros todo en dos partes de sólo copiar y pegar. En todo caso el JS es complicado de explicar, así que me ahorro ese paso.

A continuación la demo y seguimos. Probando...

Los pasos a seguir para montar esto son sólo dos:

1. Editar la plantilla e insertar el contenido de este fichero que contiene el CSS y el JavaScript principal, justo antes de </head>. Guardar cambios.

2. Añadir a la entrada (o en un gadget) en la que queremos mostrar el antes/después, este código:

<div id="beforeafter" class='twentytwenty-container'>
<img src="URL_IMAGEN_ANTES" alt="Antes">
<img src="URL_IMAGEN_DESPUES" alt="Después" />
</div>
<script>$(window).load(function() {
$("#beforeafter").twentytwenty();
});</script>

Evidentemente, URL_IMAGEN_ANTES tiene que ser sustituido por la dirección de una imagen y URL_IMAGEN_DESPUES por la otra. Es importante que ambas sean exactamente del mismo tamaño, de lo contrario este artilugio no funcionará.

Notas

• Si ya tienes jQuery en tu plantilla para otro fin, puedes eliminar la primera línea copiada en el paso 1 y que es la que carga precisamente esa librería
• #beforeafter es el contenedor general del visor y en ese selector es dónde podéis configurar el ancho mínimo o máximo si fuera necesario, así como añadir un borde o cualquier otra cosa que permita CSS
• Si siempre se va a ver un único antes/después por página (un único visor en cada entrada), las tres últimas líneas del paso 2 se podrían poner directamente en la plantilla, a continuación de lo que copiamos en el paso 1.
• Si vas a usar más de un visor por página entonces tendrás que replicar el código completo del paso 2 para cada uno que quieras poner de más. En este caso la ID #beforeafter del contenedor habrá que cambiarla para cada visor, de manera que por ejemplo la segunda debería ser #beforeafter2, la tercera #beforeafter3, etc.
  De la misma manera y con la misma ID habrá que cambiar la parte JavaScript en la línea $("#beforeafter").twentytwenty();. Ejemplo para una segunda caja:
  
  <div id="beforeafter2" class='twentytwenty-container'>
  <img src="URL_IMAGEN_ANTES" alt="Antes">
  <img src="URL_IMAGEN_DESPUES" alt="Después" />
  </div>
  <script>$(window).load(function() {
  $("#beforeafter2").twentytwenty();
  });</script>
• En .twentytwenty-before-label:before{content:"Antes"} es dónde podéis cambiar la palabra o etiqueta que sale a la izquierda.
En .twentytwenty-after-label:before{content:"Después"} es dónde se puede cambiar la palabra del lado derecho.

Y ya está, esto es todo lo que necesitáis para tener un visor de este tipo.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter