Antes y Después con jQuery

Si tienes un blog de diseño, maquillaje, o si usas fotos comparativas de un antes y después seguro este script te resultará de gran utilidad.

Se trata de Before/After, un script que funciona con jQuery y que muestra de forma dinámica las fotos para comparar dos imágenes al mismo tiempo. Con arrastrar hacia los lados una pequeña barra podemos ver ambas fotos que se están comparando.

Por ejemplo puedes ver cómo era yo antes y después de que una sensual vampiresa me mordiera.

Ok, ok, eso fue raro, mejor veamos este clásico paisaje del norte de California que es un reconocido Wallpaper de Windows. Así es como esas colinas eran antes y cómo son ahora.

La implementación de este script es sencilla, sólo necesitas jQuery, el script Before/After, y las dos imágenes que vayamos a comparar.

Primero que nada descarga este archivo, descomprímelo y súbelo a un hosting.
Luego entra en Diseño | Edición de HTML y antes de </head> pega lo siguiente:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js' type='text/javascript'/>
<script src='URL del archivo' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$(&#39;#antesydespues1&#39;).beforeAfter({showFullLinks : true});
});
</script>

Cambia donde se indica la URL del archivo que subiste previamente.
Ahora en una entrada o en un elemento HTML/Javascript pega este código:

<div id='antesydespues1'>
<div><img alt='before' src='URL de la imagen UNO' width='500' height='291'/></div>
<div><img alt='after' src='URL de la imagen DOS' width='500' height='291'/></div>
</div>

Agrega la URL de la imagen UNO que es la imagen del Antes, y la URL de la imagen DOS que es la imagen del Después.

Es importante que tenga especificado el ancho y alto (width y height) de cada imagen para que pueda funcionar en todos los navegadores.
Si deseas agregar más imágenes sólo cambia el ID del contenedor, en este caso el contenedor se llama antesydespues1 así que si agregas otro cambialo por antesydespues2 y así sucesivamente, aunque puedes elegir cualquier nombre siempre y cuando todos sean distintos.
Y en el primer código que pegamos agrega otra línea como esta en color azul:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js' type='text/javascript'/>
<script src='URL del archivo' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$(&#39;#antesydespues1&#39;).beforeAfter({showFullLinks : true});
$(&#39;#antesydespues2&#39;).beforeAfter({showFullLinks : true});
});
</script>

Puedes agregar tantas imágenes comparativas como quieras siempre y cuando todos los contenedores tengan un ID distinto y se agreguen las correspondientes líneas en el script.

Debajo de cada contenedor de fotos aparecen los links "Mostrar sólo el Antes" y "Mostrar sólo el Después", al darle click a ellos se muestra las imagenes completas, si deseas ocultar esos enlaces sólo cambia en el primer código donde dice true por false y no se mostrarán.

Autor | Catch my fame