Présentation
Carousel.us est un carrousel 3D en Javascript. Les framework prototype et scriptaculous sont nécessaires pour l’exécution de ce script. Il est adapté aussi sous le framework Mootools. Il utilise également le script PHP Easy Reflections de Richard Davey. Facilement configurable avec son fichier de configuration, vous pouvez utiliser les paramètres par défaut ou les définir par l’intermédiaire de l’url en utilisant la méthode GET.
Vous pouvez régler:
• l’opacité
• la hauteur
• l’espacement entre les images
• la position du centre du carrousel
• la vitesse
• Les événements onClick sur chaque image.
Les fichiers nécessaires sont téléchargeables ci-dessous ou sur le site http://www.piksite.com/
Installation
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, ajoutez 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: exemple :
var carousel = new Carousel($('container'), { display_text: false [, options...] });
Paramétrage
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) |
2 commentaire