Skitter – Plugin jQuery – Slideshow for anytime!

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.

skitter-slideshow-for-anytime

Les options sont, certes classiques, mais la mise en place simple et intuitive.

Exemple d’utilisation :
Éléments js

$(function(){
$('.box_skitter_small').skitter();
});

Éléments HTML

<div class="box_skitter box_skitter_small">
<ul>
 	<li><a href="http://codecanyon.net"><img class="block" src="images/01.jpg" /></a>
<div class="label_text">

Label

</div></li>
 	<li><a href="http://activeden.net"><img class="cube" src="images/02.jpg" /></a>
<div class="label_text">

Label

</div></li>
 	<li><a href="http://themeforest.net"><img class="default" src="images/03.jpg" /></a>
<div class="label_text">

Label

</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

skitter

Le site du Plugin Skitter pour jQuery : http://thiagosf.net/projects/jquery/skitter

Articles qui peuvent vous intéresser :

Author: Franck Pertegas

Share This Post On

2 Comments

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

    Post a Reply
  2. 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é.

    Post a Reply

Trackbacks/Pingbacks

  1. 35 plugins jQuery rien que pour vos sites web ! | LudiBlog - [...] Je vous en parle ici Un de mes favoris dans le style slideshow. Multiple options et un rendu intéressant.…
  2. Web Event #3 de Lyon – Retour | LudiBlog - [...] Skitter – Plugin jQuery – Slideshow for anytime! [...]
  3. Passage de jQuery 1.5.x vers jQuery 1.6 | LudiBlog - [...] Skitter – Plugin jQuery – Slideshow for anytime! [...]
  4. s3Slider – Plugin jQuery – Un slider simple pour vos sites web | LudiBlog - [...] moi, le meilleur des sliders à l’heure actuel reste Skitter, mais certains d’entre vous auront peut être besoin de…
  5. 50 Plugins jQuery pour vos sites web ! | LudiBlog - [...] vous en parle ici Un de mes favoris dans le style slideshow. Multiple options et un rendu intéressant. Le…
  6. Liste de tous les plugins jQuery testés sur le blog | LudiBlog - [...] Tiny CirleSlider Flux Slider Zoombox jQuery Favicon Notifier jCoverflip s3Slider Chocolat Glisse Skitter Easy Image Zoom Zoomy Cycle Sponsor…

Répondre à Guillaume Annuler la réponse

Votre adresse e-mail ne sera pas publiée.