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