s3Slider : plugin jQuery Diaporama
Voici un plugin jQuery pour réaliser des diaporamas. s3Slider jQuery Plugin – inspiré par JonDesign’s Smooth SlideShow Library.
Sous license Creative Commons Attribution 2.5 vous pouvez donc vous en servir librement.
Ce plugin ne pése que 4ko. Pour l’utiliser, notamment la bibliothèque de jQuery, s3Slider fichier CSS et javascript. Le texte associé aux images dans le diaporama peut être affichée à gauche, droite, bas ou haut. Vous pouvez également définir la durée entre les diapositives lors de l’initialisation s3Slider.
Pour l’installation :
Html Head
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>
Html Body
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="#" />
<span>Your text comes here</span>
</li>
<li class="s3sliderImage">
<img src="#" />
<span>Your text comes here</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>
#s3slider {
width: 400px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#s3sliderContent {
width: 400px; /* important to be same as image width or wider */
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); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
top: 0;
/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}
.clear {
clear: both;
}
Démonstration : http://www.serie3.info/s3slider/demonstration.html
Explication : http://www.serie3.info/s3slider/
License : Creative Commons 2.5 License
Plugin compatible avec les navigateurs web suivant :
* Firefox 2.x (Win)
* Firefox 3.0.3 (Win/Linux/Mac)
* Opera 9.6 (Win/Linux)
* Safari 3.0.3 (Win/Mac)
* Internet Explorer 6 (Win)
* Internet Explorer 7 (Win)
* Google Chrome (Win)
Loading ...