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.
Les options sont, certes classiques, mais la mise en place simple et intuitive.
Exemple d’utilisation :
Éléments js
[pastacode lang= »javascript » manual= »%24(function()%7B%0A%24(‘.box_skitter_small’).skitter()%3B%0A%7D)%3B » message= » » highlight= » » provider= »manual »/]
Éléments HTML
[pastacode lang= »markup » manual= »%3Cdiv%20class%3D%22box_skitter%20box_skitter_small%22%3E%0A%3Cul%3E%0A%20%09%3Cli%3E%3Ca%20href%3D%22http%3A%2F%2Fcodecanyon.net%22%3E%3Cimg%20class%3D%22block%22%20src%3D%22images%2F01.jpg%22%20%2F%3E%3C%2Fa%3E%0A%3Cdiv%20class%3D%22label_text%22%3E%0A%0ALabel%0A%0A%3C%2Fdiv%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Ca%20href%3D%22http%3A%2F%2Factiveden.net%22%3E%3Cimg%20class%3D%22cube%22%20src%3D%22images%2F02.jpg%22%20%2F%3E%3C%2Fa%3E%0A%3Cdiv%20class%3D%22label_text%22%3E%0A%0ALabel%0A%0A%3C%2Fdiv%3E%3C%2Fli%3E%0A%20%09%3Cli%3E%3Ca%20href%3D%22http%3A%2F%2Fthemeforest.net%22%3E%3Cimg%20class%3D%22default%22%20src%3D%22images%2F03.jpg%22%20%2F%3E%3C%2Fa%3E%0A%3Cdiv%20class%3D%22label_text%22%3E%0A%0ALabel%0A%0A%3C%2Fdiv%3E%3C%2Fli%3E%0A%3C%2Ful%3E%0A%3C%2Fdiv%3E » message= » » highlight= » » provider= »manual »/]
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
23 avril 2011
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.
23 avril 2011
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é.