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>

Puede interesarte

  • Guillermo Jose Leon Rea

    hola use tu codigo rondell-carousel,pero la parte del carousel de imagenes se pone la lado izquierdo de mi pantalla ¿como puedo centrar el carrusel en mi pagina web? , es decir que aparesca en el centro de mi pagina web, me puede decir que parte del codigo que proporcionas debo de cambiar?
    Gracias

    • Develoteca

      Guillermo buen día puedes usar el siguiente fragmento de codigo que te ayudara a centrar el contenido esto hay que colocarlo en el documento html, debajo de la etiqueta :

      #rondellCarousel {
      margin-left: auto ;
      margin-right: auto ;
      }

      Estos son css para aplicar el centrado.
      Saludos, gracias por comentar y gracias por compartir develoteca.com.

      • Guillermo Jose Leon Rea

        Ok

        Gracias

  • Fabián Reyes

    como hace cuando se crea el slider en un control el el id del div queda asi ContentPlaceHolder1_carousel_0, como modifico el jquery??

    • Develoteca

      ¿Puedes compartir alguna imagen para tener una idea más clara?, gracias por el comentario.