Rondell, un carousel para imágenes

DESCARGA : Rondell

Rondell, un carousel para imágenes, que puede ayudarte a exponer tus imágenes de manera rápida y efectiva, el uso de las galerías se hizo muy popular ya que permite interactuar con los usuarios para obtener la atención visual de todo internauta, sin embargo el uso frecuente también llega a cansar a la visita, este interesante plugin tiene la modalidad de cambiar la presentación de las imágenes, este plugin maneja 6 formas de presentar la información, entre las que estan thumbnail, galería, slider, etc.

La instalación de este plugin consiste en crear un enlace a jquery, posteriormente utilizar el plugin y una serie de librerías que permiten tener efectos en las instancias del plugin, puedes crear las referencias como se muestra a continuación :


<link rel="stylesheet" href="jquery.rondell.css" type="text/css" media="all" title="Screen"/>
<script type="text/javascript" src="jquery-x.x.x.min.js"></script>
<script type="text/javascript" src="modernizr-x.x.x.min.js"></script>
<script type="text/javascript" src="jquery.rondell.js"></script>

Con esto estas listo para mostrar los 6 efectos que maneja el pugin en su sitio oficial, a continuacion puedes ver un resultado en el siguiente enlace:http://projects.sebastianhelzle.net/jquery.rondell/examples/carousel.html

Tienes tambien una serie de opciones para usar con este plugin, también te lo puedes encontrar en la siguiente dirección: http://projects.sebastianhelzle.net/jquery.rondell/examples/options.html, pero claro que el uso básico se puede realizar de la siguiente manera, obteniendo una galería muy interesante que te puede servir en cualquier momento.
Etiquetas que contienen las imágenes para su manipulación:


<div id="rondellCarousel">
 <a target="_blank" rel="rondell" href="images/galery/band.jpg" title="...">
 <img src="images/galery/band.jpg" alt="Band" title="My favourite band">
 <h5>Awesome concert</h5>
 <p>My favourite band.</p>
 </a>

</div>

Código javascript para la creación de la galería

<script type="text/javascript">
 $(function() {
 // Create a rondell with the 'carousel' preset and set an option
 // to disable the rondell while the lightbox is displayed
 $("#rondellCarousel").rondell({
 preset: "carousel",
 });
 });
</script>

Información relacionada: