s3Slider : plugin jQuery Diaporama

s3sliderVoici 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.

s3slider_exemple

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>

CSS

#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)

Aucun commentaire

Répondre

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

cinq × quatre =

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

CONTACT

We're not around right now. But you can send us an email and we'll get back to you, asap.

Envoi en cours...

©[current-year] WebCSSDesign

Se connecter

Oubli de mot de passe ?