Voici un excellent plugin jQuery pour réaliser de jolie diaporama (slideshow) très simplement, le s3Slider jQuery Plugin. Je vous propose dans cet article de voir comment implémenter ce plugin à travers de brefs exemple et quelques lignes de code.
EN BREF
Le plugin jQuery s3Slider est basé sur l’exemple de JD `s bon diaporama script. Ce script a été adapté pour jQuery .
COMMENT UTILISER
Il est très facile. Premièrement, inclure la librairie jQuery javascript, puis inclure la s3Slider dans la tête de la page (s) où vous souhaitez utiliser s3Slider.
jQuery peut être télécharger à partir de jQuery `s page d’accueil .
<script src="js/jquery.js" type="text/javascript"></script> <script src="js/s3Slider.js" type="text/javascript"></script>
Important: pour que le script fonctionne correctement, il est un ensemble de règles qui doivent être suivies.
<div id="s3slider"> <ul id="s3sliderContent"> <li> <img src="#" /> <span>Your text comes here</span> </li> <li> <img src="#" /> <span>Your text comes here</span> </li> <div></div> </ul> </div>
Explication
Si vous définissez cet ID div principal est s3slider, ce que nous avons fait ici, c’est le nom qui doit être préfixe pour toutes les autres classes et id pour cette galerie spécifique (diaporama). Par exemple, si vous définissez un ID pour div principal ‘identifiant_x’, l’identifiant interne doit être ‘identifiant_x’ et la classe également comme dans l’exemple ci-dessus.
La seconde chose est que tous les éléments images doivent être suivi d’un ‘SPAN’ qui servira à inscrire un commentaire par exemple.
CSS
#s3slider {
width: 400px; /* important doit être la même que la largeur de l'image */
height: 300px; /* important doit être la même que la hauteur de l'image */
position: relative; /* important */
overflow: hidden; /* important */
}
#s3sliderContent {
width: 400px; /* important doit être le même que la largeur de l'image */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}
.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}
.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 374px;
background-color: #000;
filter: alpha(opacity=70); /* Fixe l'opacité de la boite de texte */
-moz-opacity: 0.7; /* Mozillas */
-khtml-opacity: 0.7; /* Safari */
opacity: 0.7; /* autre */
color: #fff;
display: none; /* important */
top: 0;
/*
Si vous mettez
top: 0; -> La boite de texte sera affichée au dessus de l'image
Si vous mettez
bottom: 0; -> La boite de texte sera affichée en bas de l'image
*/
}
.clear {
clear: both;
}
Ensuite, vous devez initalize s3Slider et fixer la durée de combien de temps une image est affiché sur la page (la valeur est en millisecondes).
JS
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
Vous pouvez consulter l’exemple sur le site de l’auteur.
COPYRIGHT
Ce script est sous licence Creative Commons Attribution 2.5. Ainsi, vous pouvez l’utiliser dans tous les projets aussi bien personnels que commerciaux.
Support des navigateurs
Ce plugin a été testé et est connu pour fonctionner dans les navigateurs suivants:
- Firefox 2.x (Win) Firefox 2.x (Win)
- Firefox 3.0.3 (Win/Linux/Mac) Firefox 3.0.3 (Win / Linux / Mac)
- Opera 9.6 (Win/Linux) Opera 9.6 (Win / Linux)
- Safari 3.0.3 (Win/Mac) Safari 3.0.3 (Win / Mac)
- Internet Explorer 6 (Win) Internet Explorer 6 (Win)
- Internet Explorer 7 (Win) Internet Explorer 7 (Win)
- Google Chrome (Win) Google Chrome (Win)
TELECHARGEMENTS
La version complète (avec des exemples) (taille: 574Kb)
Version non-minimisée (taille: 4.12kb)
Version minimisée (taille: 1.66kb)
