noviembre 28, 2008
Publicado en Galerías,Javascript,scripts | 2 Comments
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
En nuestro encabezado hacemos la llamada a los archivos correspondientes
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
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”>
-
…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.
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.
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;
-
}
