Efecto antes y después con jQuery

Hay ocasiones en las que nos interesa comparar el antes y el después de una fotografía para remarcar las diferencias. Después de leer esta entrada, no volverás a poner una imagen al lado de otra para lograr este efecto.

Vamos a crear un efecto de cortina que nos permitirá hacer la comparación de una manera mucho más atractiva con Before / After plugin que puedes descargar de su web oficial.

Qué necesitamos

Librería jQuery
Before / After plugin
jQuery Touch Punch plugin (si quieres que sea compatible con dispositivos móviles)
Dos imágenes para comparar

Preparando el terreno

En primer lugar colocamos el fichero jquery.beforeafter-1.4.min.js en nuestra carpeta de ficheros javascript, en este caso en /js. Este es el plugin que se encarga de hacer el efecto.

En segundo lugar colocamos en la misma carpeta el fichero jquery.ui.touch-punch.min.js. Este se encargará de poder hacer el efecto en dispositivos táctiles, es decir, móviles, tablets…

En tercer lugar cargamos el fichero donde ejecutaremos nuestro código jQuery, en este caso lo llamamos main.js. Podríamos hacerlo en el mismo index.html, pero nos gusta más en un fichero a parte.

Finalmente llamamos todos estos ficheros .js así como la librería jQuery y jQuery-ui de google en nuestro documento.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
 
<script src="js/jquery.beforeafter-1.4.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/main.js"></script>

Tampoco olvidéis colocar la imagen del deslizador «handle.gif» en la carpeta /js. Sí, en la misma donde hemos puesto el plugin, no en la carpeta img.

El HTML

Colocaremos las imágenes de la siguiente manera. Es obligatorio especificar el alto y ancho.

<div id="contenedor">
<div><img alt="Antes" src="img/antes.jpg" width="300" height="200" ></div>
<div><img alt="Después" src="img/despues.jpg" width="300" height="200" ></div>
</div>

Empieza la acción

En nuestro fichero main.js llamaremos al plugin beforeandafter de la siguiente manera:

jQuery('#contenedor').beforeAfter();

Con esta linea conseguiremos el comportamiento por defecto.

Ya te habrás dado cuenta que en dispositivos móviles no podemos mover el deslizador, para activar la capacidad draggable en tablets y smartphones habrá que añadir la siguiente linea:

jQuery('#contenedor .ui-draggable').draggable();

Configuración personalizada

Before / After plugin destaca por ser muy configurable, puedes modificar algunos de los siguientes parámetros a tu gusto. En la demo podrás verlos.

animateIntro: si está en true animaremos el movimiento del deslizador hasta la posición deseada.
introDelay: si la animación está en true, puedes indicar en milisegundos el tiempo que esperará para empezar a moverse hasta la posición deseada.
introDuration: si la animación está en true, puedes indicar en milisegundos la duración de la animación, desde que se empieza a mover hasta que llega a la posición deseada.
beforeLinkText: permite editar el texto «Show only before» por uno diferente.
afterLinkText: permite editar el texto «Show only after» por otro diferente.
showFullLinks: si está en false, esconderá los textos «Show only before» y «Show only after».
introPosition: al poner un valor de 0 a 1 mostraremos el deslizador en la porción indicada y no en la mitad de la imagen. Por ejemplo: al poner .80 aparecerá al 80% del ancho de la imagen.
dividerColor: indica en hexadecimal qué color debe tener la barra del deslizador.
enableKeyboard: si está en true activaremos el deslizador con las teclas de dirección derecha e izquierda.