Cloud Carousel 3D
En este artículo vamos a hablar de un script jQuery que nos ofrece el profesor Cloud que trata de un carousel 3D que se puede utilizar para iterar imágenes.
El carrusel por encima de las características opcionales de pasador automático y la información contenida en las etiquetas alt y title de las imágenes, se aplica un efecto flash al hacer click en los botones.
Realizar este tipo de script con jQuery en vez de Flash ofrece algunas ventajas por ejemplo la facilidad de integración, se trata de un archivo de tamaño pequeño, el SEO es aplicable y la accesibilidad es mucho mayor.
El carrusel cuenta con perspectiva realista. Muchos carruseles 3d sólo se aplican escalado perspectiva con el tamaño de las imágenes, no sus posiciones. Esto se traduce en diferencias desproporcionadas entre los elementos que aparecen como se contraen en la distancia que parece extraño.
Características
- Funciona con la mayoría de los navegadores (probado en IE6-IE9, Firefox (IVA V4), Chrome, Opera, Safari).
- Perspectiva 3D precisa.
- Carousel automático opcional.
- Fácil integración con HTML base y un poco de JavaScript.
- Pequeño script 5Kb.
- Totalmente accesible sin CSS o navegadores de sólo texto.
- Funciona con otros plugins, POR EJEMPLO, Slimbox, y conserva sus enlaces y eventos de ratón.
- Opcional soporte de la rueda del ratón en la versión 1.0.2.
- Es completamente gratuito.
Para añadirlo a tu Web debes descargarte el script y añadirlo a vuestro <head> junto con la librería jQuery y la llamada al script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript" src="cloud-carousel.1.0.5.js"></script>
<script>
$(document).ready(function(){
$("#carousel1").CloudCarousel({
xPos: 128,
yPos: 32,
buttonLeft: $("#left-but"),
buttonRight: $("#right-but"),
altBox: $("#alt-text"),
titleBox: $("#title-text")
});
});
</script>
Y el contenido HTML a añadir al <body> de tu página podría ser el siguiente:
<div id ="carousel1" style="width:256px; height:128px;background:#000;overflow:scroll;"> <img class="cloudcarousel" src="images/flag1.png" alt="Australia Description" title="Australia Title" /> <img class="cloudcarousel" src="images/flag2.png" alt="Brasil Description" title="Brasil Title" /> <img class="cloudcarousel" src="images/flag3.png" alt="Canada Description" title="Canada Title" /> <img class="cloudcarousel" src="images/flag4.png" alt="Finlandia Description" title="Finlandia Title" /> </div> <!-- Define left and right buttons. --> <input id="left-but" type="button" value="Left" /> <input id="right-but" type="button" value="Right" /> <!-- Define elements to accept the alt and title text from the images. --> <p id="title-text"></p> <p id="alt-text"></p>
En la página oficial puedes ver varios ejemplos más completos, descargar el script y ver más documentación como por ejemplo las opciones.
Autor
¿Buscas trabajo de programador?
Una respuesta a “Cloud Carousel 3D”
Deja una respuesta
12 artículos que te podrían interesar
Ver más sobre
Es magnifico el plugin. Muchas gracias.
Pero ¿sería posible generarlo a partir de los productos elegidos de un carrito de compra, por ejemplo?. Es decir, en mi «experimento» estoy seleccionando alimentos, y quiero mostrarlos como si fuese una mesa giratoria, conforme los voy seleccionando.
Muchas gracias por sus enseñanzas.
Atentamente: Angel.