Coin Slider: Transiciones espectaculares de imágenes en jQuery
2 ene
Por lo general, la mayoría de los artículos se basan en funciones de jQuery, en los que explicamos su funcionamiento con ejemplos. Para que poco a poco vayáis creando vuestras propias funciones y vuestros propios Scripts en jQuery.
En este caso, vamos a hacer una excepción, y os vamos a enseñar una función en jQuery desarrollada por Ivan Lazarevic, para realizar transiciones de imágenes con un resultado realmente espectacular.
Podéis descargarlo de su web oficial, o bien desde aquí:
Una vez que lo tengáis descargado, lo primero que tenéis que hacer es incluir la función dentro de nuestro sitio web:
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="../js/coin-slider.min.js"></script> <link rel="stylesheet" type="text/css" href="../js/coin-slider-styles.css" />
Incluimos los Javascript de jQuery y Coin Slider y el CSS de Coin Slider.
Para hacerlo funcionar solo tenemos que meter todas las imágenes que queramos dentro de una tabla o una capa y especificarle un "id" para después ejecutar Coin Slider sobre ese "id".
En este caso, hemos utilizado una capa con id (id="animacion"):
<div class="animacion" id="animacion"></div>
Y hemos incluido estas imágenes:
<div class="animacion" id="animacion"> <img src="../img/foto1.jpg" width="600" height="450" /> <img src="../img/foto2.jpg" width="600" height="450" /> <img src="../img/foto3.jpg" width="600" height="450" /> <img src="../img/foto4.jpg" width="600" height="450" /> <img src="../img/foto5.jpg" width="600" height="450" /> </div>
Aunque no es imprescindible, es mejor que las imágenes estén ocultas (style="display:none;") y Coin Slider se encargará de mostrarlas.
Y para terminar, tenéis que ejecutar la función Coin Slider sobre la capa:
<script type="text/javascript"> $(document).ready(function(){ $('#animacion').coinslider(); }); </script>
Aquí tenéis un ejemplo básico de como funciona Coin Slider en jQuery:
Comentarios