Antes y después con jQuery

Lo interesante de algunas de estas librerías que se ponen de moda es que permiten hacer cosas raras y dejar volar la imaginación aunque el resultado sea poco práctico o de un uso muy limitado. Me parece que ese es el caso de un plugin para jQuery llamado Before/After que muestra dos imágenes de manera simultánea, permutando entre ambas con una barra que se desliza por encima.

Pero, mejor que contarlo, es verlo:

Hacer que funcione es bastante simple. Basta descargar el ZIP que ofrecen donde está todo lo necesario. Requerimos, obviamente, de jQuery y de su librería de efectos jQuery-UI y ambas, las podemos cargar desde el repositorio de Google:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

Luego, el plugin en si mismo:

<script type="text/javascript" src="URL_beforeafter.js"></script>

Este último, también lo podemos agergar a la plantilla de manera directa:

<script type="text/javascript">
//<![CDATA[
... aquí copiamos y pehgamos el contenido del archivo jquery.beforeafter.js ...
//]]>
</script>

Como usa tres imágenes cuya url está definida para que funcione en algún servidor propio, lo mejor es que las alojemos en alguna parte (o en Blogger mismo), busquemos esas líneas y las cambiemos:

$(obj).prepend('<div id="dragwrapper'+randID+'"><div id="drag'+randID+'"><img width="8" height="56" alt="handle" src="'+o.imagePath+'handle.gif" title="Drag me left or right to see the before and after images" id="handle'+randID+'" /></div></div>'); // Create drag handle

reemplazamos eso por la URL de la imagen handle.gif

$(obj).append('<img src="'+o.imagePath+'lt-small.png" width="7" height="15" id="lt-arrow'+randID+'"><img src="'+o.imagePath+'rt-small.png" width="7" height="15" id="rt-arrow'+randID+'">');

reemplazamos eso por las URLs de las imágenes lt.png y rt.png

Para usarlo, creamos un DIV con un ID cualquiera y allí ponemos las dos imágenes:

<div id="miEfecto">
<div><img src="URL_imagenANTES" /></div>
<div><img src="URL_imagenDESPUES" /></div>
</div>

Hacemos que funcione, agregando esto, por ejemplo, antes de </head>:

<script> $(function(){ $('#miEfecto').beforeAfter(); }); </script>