Lytebox, une galerie image/slideshow en javascript très légère et facile d'installation!
Lytebox est un slideshow Javascript concurrant à lightbox. La différence réside dans le fait que Lytebox est beaucoup plus léger et plus facile à configurer que Lightbox. De plus, si vous utilisez en complément le framework JS/Ajax tel que mootools, vous risquez d'avoir certains problèmes avec Lightbox.
Lytebox vous permet justement d'éviter ce genre de conflict en ne proposant que le strict minimum de code packagé dans un seul fichier JS...
<?php echo 'test';?>
L'installation est très simple, en voici la procédure:
1° Téléchargez le package lytebox (contenant le fichier lytebox.js et lytebox.css)
2° Ajoutez les lignes de code suivantes dans la balise <head></head> de votre site.
<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
3° Adaptez l'attribut "rel" en fonction du type de galerie que vous souhaitez obtenir
Pour une image seule:
<a href="images/image-1.jpg" rel="lytebox" title="Image Description">Image #1</a>
Pour un groupe d'images:
<a href="images/image-1.jpg" rel="lytebox[vacation]" title="Mom and Dad">Mom and Dad</a>
<a href="images/image-2.jpg" rel="lytebox[vacation]" title="My Sister">My Sister</a>
Pour une galerie mode "slideshow"
<a href="images/image-1.jpg" rel="lyteshow[vacation]" title="Mom and Dad">Mom and Dad</a>
<a href="images/image-2.jpg" rel="lyteshow[vacation]" title="My Sister">My Sister</a>
Configuration du slideshow
Et maintenant voici les propriétés que vous pouvez paramétrer dans le fichier lytebox.js pour adapter celui-ci à vos besoins:
/*** Start Global Configuration ***/
this.theme = 'grey'; // Couleur du thème
this.hideFlash = true; // Masquer le flash
this.outerBorder = true; // Afficher la bordure
this.resizeSpeed = 8; // temps de redimenssionnement de l'image (1 � 10)
this.maxOpacity = 80; // Opacité, plus la valeur est élevée, moins c'est transparent.
this.navType = 1; // 1 ou 2 (gère la navigation)
this.autoResize = false; // Activer le redimenssionement automatique
this.doAnimations = true; // Activer les animations
this.borderSize = 12; // Ne pas y toucher sauf si vous ajuster le padding dans la CSS
/*** End Global Configuration ***/
/*** Configure Slideshow Options ***/
this.slideInterval = 4000; // Temps en milliseconde avant le slide suivant (1000= 1sec)
this.showNavigation = true; // Affiche ou non la navigation
this.showClose = true; // Afficher ou non le bouton "fermer"
this.showDetails = true; // true to display image details (caption, count), false to hide
this.showPlayPause = true; // Affiche le bouton "pause"
this.autoEnd = false; // Fermer le slideshow lorsque celui-ci est terminé
this.pauseOnNextClick = false; // Permet de faire pause lorsqu'on clique sur "Précédent"
this.pauseOnPrevClick = true; // Permet de faire pause lorsqu'on clique sur "Précédent"
/*** End Slideshow Configuration ***/
Et voilà, votre slideshow est enfin opérationnel! :-)
Commentaires
j'ai sur mon site et j'aime c'est simple léger et efficace
Ajouter un commentaire