Skitter est un plugin jQuery qui va vous permettre de réaliser de très beaux “slideshow“, comprendre des rotations d’images avec pas mal d’options liées au plugin en lui même. Certes, les plugins de slideshow pour jQuery pleuvent et pullulent sur le web, nous n’avons que l’embarra du choix. Mais parfois, il nous arrive de tomber sur de petites perles. En effet, Skitter fait maintenant parti de mes favoris dans le domaine du slideshow.
Les options sont, certes classiques, mais la mise en place simple et intuitive.
Exemple d’utilisation :
Éléments js
$('.box_skitter_small').skitter();
});
Éléments HTML
<ul>
<li>
<a href="http://codecanyon.net"><img src="images/01.jpg" class="block" /></a>
<div class="label_text">
<p>Label</p>
</div>
</li>
<li>
<a href="http://activeden.net"><img src="images/02.jpg" class="cube" /></a>
<div class="label_text">
<p>Label</p>
</div>
</li>
<li>
<a href="http://themeforest.net"><img src="images/03.jpg" class="default" /></a>
<div class="label_text">
<p>Label</p>
</div>
</li>
</ul>
</div>
Donc tous les éléments de classe CSS “box_skitter_small” seront touchés par la transformation en slideshow, ensuite tout se passe dans les ul il, les images sont reprises, ainsi que les éléments “p” des div de classe css “label_text”.
Il est possible de donner des classes css aux images ce qui permettra de donner une transition choisie, je vous laisse voir toutes les transitions possibles sur le site du plugin.
Plusieurs options disponibles dans la partie javascript :
velocity : vitesse d’animation
interval : intervale entre les transitions
animation : l’animation par défaut (peut être indiquée dans les classes css)
numbers : si l’on affiche les numéros d’images (pour la navigation)
navigation : Si l’on affiche une navigation
label : Si l’on affiche le texte des label
easing_default : Easing default
animateNumberOut : l’ animation et le style des nombres
animateNumberOver : l’ animation et le style des nombres au survole
animateNumberActive l’ animation et le style des nombres à l’activation
thumbs : Pour une navigation avec les images miniatures
hideTools : Si l’on souhaite cacher tous les outils de navigation et avoir un slideshow simple d’images
Le site du Plugin Skitter pour jQuery : http://thiagosf.net/projects/jquery/skitter
Articles qui peuvent vous intéresser :
- GMAP3 – Plugin jQuery – Faciliter l’utilisation de l’API Google Map via jQuery
- Easy Image Zoom – Plugin jQuery – Zoomez vos images
- Plupload – Le multi-upload avec du jQuery
- Zoomy – Plugin jQuery – Petit effet de zoom sur image simple et sympa
- msdropdown – Plugin jQuery – Des icones dans vos balises select/option
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Bonjour,
j’ai bien utilisé ce code dans mon html et ce code js, mais j’obtiens quelque chose de pas vraiment jolie et de non fonctionnel …
Pourrais-tu me dire ce que je dois utiliser comme fichier (dans ceux à télécharger) pour avoir un carrousel comme sur le site de l’auteur stp ? Car j’aimerais pouvoir tester un maximum d’option en jouant sur le code.
Merci d’avance.
Bonjour Guillaume,
Pourtant je l’ai testé plusieurs fois et ça fonctionne à merveille.
Les fichiers obligatoires, sont : le style skitter.css (que tu peux modifier) et les js suivants : jquery, jquery-ui et skitter.
Avec ça les lignes de codes ci-dessus fonctionnent, bien entendu, il faut que les dossiers et les chemins vers les librairies et images soient bons.
Après, l’auteur fourni tout pour tester, si tu testes sur un serveur apache ce qu’il te fourni dans le zip, tu auras exactement ce qu’il y a sur son site.
En espérant t’avoir aidé.
[...] Je vous en parle ici Un de mes favoris dans le style slideshow. Multiple options et un rendu intéressant. Le [...]
[...] Skitter – Plugin jQuery – Slideshow for anytime! [...]
[...] Skitter – Plugin jQuery – Slideshow for anytime! [...]
[...] moi, le meilleur des sliders à l’heure actuel reste Skitter, mais certains d’entre vous auront peut être besoin de quelque chose de beaucoup plus [...]
[...] vous en parle ici Un de mes favoris dans le style slideshow. Multiple options et un rendu intéressant. Le [...]
[...] Tiny CirleSlider Flux Slider Zoombox jQuery Favicon Notifier jCoverflip s3Slider Chocolat Glisse Skitter Easy Image Zoom Zoomy Cycle Sponsor Flip Wall Easy Gallery ColorBox MaxImage JLoupe JQuery Infinite [...]