JMiur [E]

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>

15 comentarios:

Daniel Fernández  

Muy curioso los efectos...

Responder
Sonieta ladeloslibros  

Hola , una peque ña pregunta solo por curiosidad
? se podria aplicar esto al blog entero para que desfilara de izquierda a derecha en lugar de arriba pa bajo? como si fuera un libro al cual le vas dando vuelta a la pagina por desliz? o a un post ?

Responder
Gem@  

Es muy elegante y sutil el efecto, me gusta el segundo ejemplo y se le puede dar varias utilidades como bien dices es cuestión de imaginar. Hay para jugar un rato :)

Responder
Graciela  

Un antes y después, luego de la cirugía, después de arreglar una casa, la bici que tenía de niña y la de ahora ;)

Responder
DMJ  

Te imaginas lo útil que puede ser para una Estética !!!

Responder
Drawer 4 Everyone  

Y para hacer los enlaces para que se vaya a un lado o al otro? :-|

Responder
Vku  

No le encuentro una buena utiliad, pero si me mate de la risa con este efecto y pensando que imagenes pondria aunque no aptas para menores jajaja.

Responder
Karla  

Hola Maestro :D

Me parece muy interesante el efecto, que me encantaría usar en un plantilla con tema ecológico, usando un contexto tan simple como "tu puedes hacer la diferencia", utilizando contraste en dos imágenes utilizadas, una llena de vida y color y otra gris y bastante sombría...; lo estudiaré y veré que puedo hacer,...con su ayuda mucho.

;)Gracias por compartir y que tenga un estupendo día!

Responder
JMiur  

Sonieta: La verdad, dudo que pueda hacerse, por lo menos, de manera sencilla :-)

Gem@, Graciela: Sólo es para jugar :D

Drawer 4 Everyone: Todo está allí en el ejemplo.

Vku: Podría ser ... ¿por que no? :D

Karla: Buena idea, a ver que sale y nos muestras el resultado :D

Responder
Felipe  

Jajaja... me parecerió chevere..
Ahí tenemos para un rato de ocio :D

Responder
UFE-Activo  

@DMJ

No solo para los estilista si no también a Un Diseñador gráfico seria de Vital utilidad esta herramienta
Esta Buenísima

Responder
GoNanoGo  

JMiur: Muchas gracias por todos los posts que son de mucha utilidad para mi blog. Este efecto no resulta del todo bueno en Chrome, por lo menos a mi, que cuando voy a deslizar la barra me aparece una imagen como seleccionada. Tal vez tienes una solución para esto y capaz que es solo un error de Chrome, solo quería comentartelo. Saludos!

Responder
JMiur  

Acabo de verlo. parecería que cuando arrastras cpn el botón apreatdo pasa eso. Lo que no sabría decirte es cómo solucionarlo. Este tip ode scripts me supera :-D

Responder
Vero Rodriguez  

los pasos son sencillos pero no se en que parte de la plantilla coloco todos los codigos ¿van todos antes de head? gracias!!
se puede hacer ese efecto dentro de una entrada??

Responder
JMiur  

Todos lso scripts y el CSS si, antes de </head> Y el HTML donde quieras mostrar el efecto.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR