Contenido

jCarousel, perfecta unión entre jQuery e Imagenes

6 sep

+ 12

jQuery es una librería fantástica y muy útil para los que trabajamos cada día con Javascript, y si encima trabajas con imagenes ahora puedes mejorar la presentación de las mismas con jCarousel, una librería que usa jQuery para hacer pasear nuestras imagenes por nuestra web con una infinidad de opciones.

Modo de uso

Incluimos los ficheros necesarios en nuestro <head></head>

<script src="path-to-file/jquery.js"></script>
<script src="path-to-file/jcarousel.js"></script>

Y declaramos nuestro carousel justo despues de la inclusión de los fichero.

<script type="text/javascript">
$(document).ready(function() {
    $('.jcarousel').jcarousel({
        // Configuration goes here
    });
});
</script>

Colocamos nuestro carousel en el lugar de la página donde queramos que aparezca de la siguiente forma.

<div class="jcarousel">
  <img src="prev-disabled.gif" class="jcarousel-prev" />
  <img src="next-disabled.gif" class="jcarousel-next" />
  <div class="jcarousel-clip">
    <ul class="jcarousel-list">
      <!-- The content goes in here -->
    </ul>
  </div>
</div>

Configuración

Propiedad Tipo

Default Descripcion
orientation string “horizontal” Especifica la orientación del carousel “horizontal” o “vertical”

itemWidth integer 100 El width de cada <li>

itemHeight integer 100 El height de cada <li>.
itemVisible integer 3 El número de items visibles.
itemScroll integer Value of itemVisible El número de items que queremos que hagan scroll

scrollAnimation mixed “fast” Velocidad en la que hace el scroll, pueden usarse “fast”, “slow” o un número de milisegundos.

autoScroll integer 0 Activamos o desactivamos el autoScroll.

autoScrollStopOnInteract boolean true Especificamos que hacer cuando el autoScroll para por un click en los botones “next” o “prev”
wrap boolean false Especifica que hacer cuando llega al último item y empiece por el primero.
loadItemHandler function null Función JavaScript  que se llamará al cargar el objeto encargado de crear el carousel. 
nextButtonStateHandler function null Función Javascript que se llamará al hacer click en el botón de “next”
prevButtonStateHandler function null Función Javascript que se llamará cuando hagamos click en el botón “prev”

Ejemplos

[Horizontal] [Vertical] [AutoScroll] [Con Ajax] [Con Ajax desde Flickr]

Descargar

Versión 0.1 beta

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.