Publicado el 30-Jul.-08
Nueva versión del Carousel de imágenes. La versión anterior estaba ya anticuada y daba problemas usando un doctype para XHTML.
He pretendido usar javascript no intrusivo y no depender de javascript para escribir las imágenes y los links asociados a ellas.
Ahora se insertan directamente las imágenes en el documento dentro de un contenedor, con sus links y sus textos alternativos. Con javascript activado se crea el carousel al vuelo usando las imágenes que encuentre en el contenedor que le indiquemos y la pone en marcha. Si no hay javascript las imágenes con sus links quedan accesibles y usables igual.
Por defecto se moverá de derecha a izquierda pero se le puede pedir que lo haga a la inversa.
La versión anterior sólo contemplaba la posibilidad de tener
1 carouse de imágenes.
La nueva versión permite insertar más de uno.
Opcionalmente se puede agregar un botoncito para detener y reanudar el movimiento del carousel.
Crear un contenedor para el carousel de imágenes y asignarle un id.
Dentro del contenedor insertar las imágenes.
El aspecto del contenedor se maneja desde la hoja de estilos.
Para iniciar el carousel desde javascript le pediremos:
carousel1 = new tunaCarousel('nombreContenedor',desplazamiento en pixels, 'Dirección hacia la cual se mueve')
Suponiendo que al contenedor con las imágenes le hallamos dado un id="micarousel" y queramos que se desplace 1 píxel por cada movimiento y que se desplace de derecha a izquierda (rtl) llamaremos al script de la siguiente forma:
carousel1 = new tunaCarousel('micarousel',1, 'rtl')
Si quisiéramos un segundo carousel para otro contenedor de id="miOtroCarousel", que se desplace 2 píxels por movimiento y que se desplace en dirección inversa (ltr):
carousel2 = new tunaCarousel('miOtroCarousel',2, 'ltr')
Si queremos que el carousel tenga un botón para control de pausa/reanudar se lo pedimos así
carousel1.controlesCarousel()
Eso le agregaría el control al primero de los carouseles definidos.
Si quisiéramos que el segundo también lo tuviera le pediríamos:
carousel2.controlesCarousel()
Dentro del archivo carousel_2008_conf.js existe una función de nombre mueveCarousel que se encarga de poner en movimiento el/los carousel/es.
Dentro de esta función es donde hemos de indicar qué carousel/es queremos mover
function mueveCarousel(){
carousel1.mueve()
carousel2.mueve()
}Finalmente hay que llamar a esta función mueveCarousel especificando el intervalo de tiempo a usar entre movimiento y moviento que queramos
var tiempo = setInterval(mueveCarousel, 1)
Donde 1 indica que el carousel se moverá cada 1 milisegundo de tiempo
El código para iniciar el/los carousel/es lo insertaremos de forma
que se inicie al momento de cargar el documento (evento onload)
El archivo de configuración carousel_2008_conf.js quedaría entonces definido así:
var carousel1
var carousel2
function mueveCarousel(){
carousel1.mueve()
carousel2.mueve()
}
onload = function(){
carousel1 = new tunaCarousel('micarousel',1, 'rtl')
carousel1.controlesCarousel()
carousel2 = new tunaCarousel('miOtroCarousel',2, 'ltr')
carousel2.controlesCarousel()
tiempo = setInterval(mueveCarousel, 1)
}
Sólo resta vincular el archivo javascript del carousel carousel_2008.js
y el archivo javascript con la configuración carousel carousel_2008_conf.js
en el elemento head del documento html
<script type="text/javascript" src="carousel_2008.js"></script> <script type="text/javascript" src="carousel_2008_conf.js"></script>
El aspecto del recuadro del carousel se define desde la hoja de estilos.
#micarousel,
#miOtroCarousel{
width: 300px;
margin: auto;
border: 1px solid #ccc;
overflow: auto;
height: 57px;
position: relative;
margin-top: 2em;
}
#micarousel img,
#miOtroCarousel img{
width: 50px;
border: 0 none;
} Si se usan los controles de pausa/reanudar se puede definir también su aspecto desde la hoja de estilos.
El identificador que el script le asignará será el_nombre_que_asignaste_al_contenedor
+ _Controles.
Según el ejemplo expuesto el controlador del primer carousel sería
micarousel_Controles y para el segundo miOtroCarousel_Controles.
#miOtroCarousel_Controles{
right: 0;
bottom: 0;
}
#micarousel_Controles img,
#miOtroCarousel_Controles img{
border: 2px solid #a00;
width: 15px;
height: 15px;
}
Puedes usar las imágenes (plei.jpg y pausa.jpg) del ejemplo para los controles y guardarlas en el mismo directorio en el que se encuentre el documento que vaya a mostrar el carousel.
Si quieres guardarlas en un directorio distinto, o usar imágenes con distinto nombre a las del ejemplo, o distintas imágenes para distintos carouseles deberás especificarlo antes de la instrucción que indica que el carousel mostrará controles de la siguiente forma:
carousel1 = new tunaCarousel('carousel1',1, 'rtl')
carousel1.ima_pausa = 'imagenes/mibotondepausa.gif' //Imagen para el botón de pausa
carousel1.ima_plei = 'imagenes/mibotondeplay.gif' //Imagen para el botón de Play
carousel1.controlesCarousel()
Todos los códigos incluídos los de la página han sido paridos y tecleados por tunait.com. subir