Before y after con jquery

DESCARGA : BeforeAfterPlugin

Before y after con jquery, es un interesante plugin que te ayuda a poner imágenes o fotografías utilizando un separado que indica el antes y despues, puedes usarlo para aplicaciones donde se pueda subir fotografías de lugares mastranto antes y después, el plugin cuenta con un pequeño sitio donde te puedes encontrar ejemplos de uso:http://www.catchmyfame.com/catchmyfame-jquery-plugins/jquery-beforeafter-plugin/, el autor de este plugin mostrar también a las empresas que actualmente usan esta funcionalidad en su sitio, dentro de las que podemos encontrarnos con:

The New York Times, Nasa, entre otros.

 

La implementación de este plugin se base en imágenes agregadas a un elemento html en el cual se identifica de manera automática, este plugin permite además integrar diferentes funcionalidad adicionales, como por ejemplo: tiempo, color, animación, texto en enlaces personalizados, entre otras funcionalidades de utilidad, las opciones son bastantes.

Puedes ver el funcionamiento de este plugin en los siguientes enlaces donde se usan para mostrar una imagen que muestra el antes y después en los dientes, construcción de una avenida, entre otros ejemplos.

http://www.catchmyfame.com/jquery/demo/8/

A continuación vamos a implementar este plugin utilizando la documentación rápida del sitio:

Incluimos las iamgenes que queremos mostrar con before after de la siguiente manera:

<div id="container">
<div><img alt="before" src="imagenes/before.png" /></div>
<div><img alt="after" src="imagenes/after.png" /></div>
</div>

Posteriormente a eso agregamos los scripts a la libreria y otras librerias de las cuales el plugin depende, en este caso son:

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.beforeafter-1.4.js"></script>

Posteriormente a eso aplicamos las opciones con las que cuenta este plugin:

<script type="text/javascript">

$(document).ready(function() {
$('#container').beforeAfter({
beforeLinkText:"Antes",
afterLinkText:"Despu&eacute;s",
animateIntro : true,
introDuration : 500,
showFullLinks : true,
dividerColor: '#FF0000',
enableKeyboard:true
});
});

</script>

You may also like...