Prototype Carousel Class, Una excelente galería carrusel basada en la de Bill Scott's Carousel component., esta vez utilizando Prototype/script.aculo.us.

Esta versión (0.26) incluye:

  • Actualizacion con script.aculo.us
  • ScrollTo (0,25) (gracias a Stéphane Brun)
  • Ajax manejador ( "antes", "después")
  • Animación ( "antes", "después")
  • Ajax o contenido estático
  • Orientación horizontal
  • Y más ... :)

Lo archivos que necesitamos descargar para crearla VER DEMO

En nuestro encabezado hacemos la llamada a los archivos correspondientes

 

PLAIN TEXT
JavaScript:
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/effects.js" type="text/javascript"></script>
<script src="js/carousel.js" type="text/javascript"></script>
<link href="css/carousel.css" media="all" rel="Stylesheet" type="text/css">
<link href="css/application.css" media="all" rel="Stylesheet" type="text/css">

A continuación el código HTML, JS y también la inhabilitación de los botones de las funciones de animación y el CSS, para este carrusel

PLAIN TEXT
HTML:
<div id="prev-arrow-container">
  <img id="prev-arrow-small" class="left-button-image" src="/images/left-enabled.gif"/>
</div>
<div class="carousel-component" id="small-carousel">
  <div class="carousel-clip-region">
    <ul class="carousel-list">
      <li><img alt="Image1" src="/images/small_icons/image1.png" /></li>
      <li><img alt="Image2" src="/images/small_icons/image2.png" /></li>
     <li><img alt="Image1" src="/images/small_icons/image3.png" /></li>
      <li><img alt="Image2" src="/images/small_icons/image4.png" /></li>
     <li><img alt="Image1" src="/images/small_icons/image5.png" /></li>
      <li><img alt="Image2" src="/images/small_icons/image6.png" /></li>
      ...etc etc
    </ul>
  </div>
</div>
<div id="next-arrow-container">
    <img id="next-arrow-small" class="right-button-image" src="/images/right-enabled.gif"/>
</div>
<script type="text/javascript">
  Event.observe(window, "load", initCarousel);
  function initCarousel() {     
    var carousel = new Carousel("ajax-carousel",  {url: "/update", buttonStateHandler: buttonStateHandler, animParameters: {duration: 0.5}});
  }
</script>

En caso de que deseemos hacer uso de otras funciones (esto es opcional), Javascript para habilitar o deshabilitar los botones de transición.

PLAIN TEXT
JavaScript:
function buttonStateHandler(button, enabled) {
 if (button == "prev-arrow")
   $('prev-arrow').src = enabled ? "images/left3-enabled.gif" : "images/left3-disabled.gif"
 else
   $('next-arrow').src = enabled ? "images/right3-enabled.gif" : "images/right3-disabled.gif"
}

function animHandler(carouselID, status, direction) {
  var region = $(carouselID).down(".carousel-clip-region")
  if (status == "before") {
    Effect.Fade(region, {to: 0.3, queue: { position:'end', scope: "carousel" }, duration: 0.2})
  }
  if (status == "after") {
    Effect.Fade(region, {to: 1, queue: { position:'end', scope: "carousel" }, duration: 0.2})
  }
}

Esto es sólo una porcion de las opciones predeterminadas en carousel.css, y el cual podremos modificar a nuestro antojo.

PLAIN TEXT
CSS:
#html-carousel .carousel-list li {
    width: 106px;
    border: 0px solid green;
    padding: 10px;
    padding-top:  15px;
    margin: 0;
    color: #3F3F3F;
}

#html-carousel .carousel-list li img {
    border:1px solid #999;
    display:block;
}

#html-carousel {
    margin-bottom: 10px;
    float: left;
    width: 500px;
    height: 144px;
}

/* BUTTONS */
#prev-arrow-container, #next-arrow-container {
    float:left;
    margin: 0px;
    padding: 0px;
}

#next-arrow {
    cursor:pointer;
}

#prev-arrow {
    cursor:pointer;
}

/* Overlay */
#overlay {
  width: 200px;
  height: 80px;
  background-color:  #FFF;
  position: absolute;
  top: 25px;
  left: 150px;
  padding-top: 10px;
  z-index: 100;
  color: #000;
  border:1px dotted #000;   
    text-align: center;
    font-size: 24px;
  filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}