Carousel.us

Carousel.us est un caroussel 3D en utiisant Javascript , utilisant la librairie MooTools . Testé sous Firefox2+, Opéra 9+, Safari 3+, IE6+, Chrome 1.

Vous pouvez visualiser la démonstration sur cette Page.
l'utilisation:

Editez le fichier index.html.
ajouter les balises img.
Dans vos balises head, ajoutez ces lignes:

<script type="text/javascript" src="_js/mootools.js"></script>
<script type="text/javascript" src="_js/carousel.us.js"></script>

Ensuite ajouter ces lignes pour lancer et définir la classe du caroussel sur le conteneur global ayant pour identifiant container:

script type="text/javascript">
    document.addEvent('domready', function() {
        var carousel = new Carousel($('container'));
    });
</script>

vous pouvez aussi passer des paramètres: exemples:

var carousel = new Carousel($('container'), { display_text: false [, options...] });

Ou vous pouvez aussi éditer le fichier carousel.us.js et définir les options.

Si vous souhaitez ajouter un texte spécifique aux images, insérez le dans un conteneur div avec la classe CSS que vous avez définie dans la déclaration du caroussel (ou en éditant le fichier carousel.us.js) et l'identifiant relatif (exemple: si mon fichier image se nomme 3_petits_cochons, l'identifiant relatif sera 3_petits_cochons).

Voici les différents paramètres du fichier de configuration :

display_text	Afficher ou non le texte pour chaque image (true or false)
textfield	L'identifiant pour le conteneur du texte (string)
texts_class	La classe pour le conteneur de chaque texte (string)
opacity	Opacité de la réflexion (0-1)
height	Hauteur de la réflexion (0-1)
radiusx	Espace horizontal entre les images opposées (pixel)
raidusy	Espace vertical entre les images opposées (pixel)
centerx	Position X du centre du caroussel (pixel)
centery	Position Y du centre du caroussel (pixel)
clickit	Ajouter un évènement onclick sur chaque image (true or false)
base	Vitesse de base (number)
speed	Vitesse du caroussel (number)
depth	La hauteur (distance) quand le caroussel disparaît au clic (pixels)
duration	Durée de l'animation (ms)
zoomIn	Ratio de mise à l'échelle (0-1)
padding	La propriété CSS padding-left pour le champs de texte (pixels)

Vous pouvez rapporter des bugs ou obtenir de l'aide sur le forum.