Búsqueda personalizada
noviembre 28, 2008

Prototype Carousel Class

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

  • carousel.js
  • carousel.css
  • effects.js
  • prototype.js
  • application.css

Descargar

En nuestro encabezado hacemos la llamada a los archivos correspondientes

PLAIN TEXT
JavaScript:

  1. <script src=“js/prototype.js” type=“text/javascript”></script>
  2. <script src=“js/effects.js” type=“text/javascript”></script>
  3. <script src=“js/carousel.js” type=“text/javascript”></script>
  4. <link href=“css/carousel.css” media=“all” rel=“Stylesheet” type=“text/css”>
  5. <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:

  1. <div id=“prev-arrow-container”>
  2. <img id=“prev-arrow-small” class=“left-button-image” src=“/images/left-enabled.gif”/>
  3. </div>
  4. <div class=“carousel-component” id=“small-carousel”>
  5. <div class=“carousel-clip-region”>
  6. <ul class=“carousel-list”>
  7. <li><img alt=“Image1″ src=“/images/small_icons/image1.png” /></li>
  8. <li><img alt=“Image2″ src=“/images/small_icons/image2.png” /></li>
  9. <li><img alt=“Image1″ src=“/images/small_icons/image3.png” /></li>
  10. <li><img alt=“Image2″ src=“/images/small_icons/image4.png” /></li>
  11. <li><img alt=“Image1″ src=“/images/small_icons/image5.png” /></li>
  12. <li><img alt=“Image2″ src=“/images/small_icons/image6.png” /></li>
  13. …etc etc
  14. </ul>
  15. </div>
  16. </div>
  17. <div id=“next-arrow-container”>
  18. <img id=“next-arrow-small” class=“right-button-image” src=“/images/right-enabled.gif”/>
  19. </div>
  20. <script type=“text/javascript”>
  21. Event.observe(window, “load”, initCarousel);
  22. function initCarousel() {
  23. var carousel = new Carousel(“ajax-carousel”,  {url: “/update”, buttonStateHandler: buttonStateHandler, animParameters: {duration: 0.5}});
  24. }
  25. </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:

  1. function buttonStateHandler(button, enabled) {
  2. if (button == “prev-arrow”)
  3. $(‘prev-arrow’).src = enabled ? “images/left3-enabled.gif” : “images/left3-disabled.gif”
  4. else
  5. $(‘next-arrow’).src = enabled ? “images/right3-enabled.gif” : “images/right3-disabled.gif”
  6. }
  8. function animHandler(carouselID, status, direction) {
  9. var region = $(carouselID).down(“.carousel-clip-region”)
  10. if (status == “before”) {
  11. Effect.Fade(region, {to: 0.3, queue: { position:‘end’, scope: “carousel” }, duration: 0.2})
  12. }
  13. if (status == “after”) {
  14. Effect.Fade(region, {to: 1, queue: { position:‘end’, scope: “carousel” }, duration: 0.2})
  15. }
  16. }

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

PLAIN TEXT
CSS:

  1. #html-carousel .carousel-list li {
  2. width: 106px;
  3. border: 0px solid green;
  4. padding: 10px;
  5. padding-top:  15px;
  6. margin: 0;
  7. color: #3F3F3F;
  8. }
  10. #html-carousel .carousel-list li img {
  11. border:1px solid #999;
  12. display:block;
  13. }
  15. #html-carousel {
  16. margin-bottom: 10px;
  17. float: left;
  18. width: 500px;
  19. height: 144px;
  20. }
  22. /* BUTTONS */
  23. #prev-arrow-container, #next-arrow-container {
  24. float:left;
  25. margin: 0px;
  26. padding: 0px;
  27. }
  29. #next-arrow {
  30. cursor:pointer;
  31. }
  33. #prev-arrow {
  34. cursor:pointer;
  35. }
  37. /* Overlay */
  38. #overlay {
  39. width: 200px;
  40. height: 80px;
  41. background-color:  #FFF;
  42. position: absolute;
  43. top: 25px;
  44. left: 150px;
  45. padding-top: 10px;
  46. z-index: 100;
  47. color: #000;
  48. border:1px dotted #000;
  49. text-align: center;
  50. font-size: 24px;
  51. filter:alpha(opacity=80);
  52. -moz-opacity: 0.8;
  53. opacity: 0.8;
  54. }
Publicado en Galerías,Javascript,scripts | 2 Comments

2 Comments so far

Suscribirme a éste comentario RSS or TrackBack 'Prototype Carousel Class'.

  1. ene 7, 2009 at 10:21

    hixaga says,

    donde están los archivos??

  2. ene 7, 2009 at 11:34

    soporte says,

    El link esta corregido para que puedas descargarlo.

    Saludos

Déjanos tu comentario

Por favor, sea educado sobre el tema. Tu email no será publicado.

Novedades