JQuery – Plugin AnythingSlider – slideshow

Il y avait un petit moment que je n’avais pas parlé de JQuery, voici un petit plugin bien sympathique qui peut encore remplir vos collections de plugins JQuery, un slideshow (comprendre diaporama) qui va vous permettre de présenter images ou textes, via navigation gauche droite, onglets ou automatiquement. Le tout avec un design propre et aisément modifiable.

AnythingSlider - Plugin JQuery

AnythingSlider – Plugin JQuery

Découvrons ensemble AnythingSlider :
* Slide avec contenu HTML (peut être n’importe lequel)
* Diapo suivante / précédente via des flèches
* Des onglets de navigation sont construits et ajoutés dynamiquement (n’importe quel nombre de diapositives)
* Fonction personnalisée en option pour formater le texte de navigation
* Lecture auto (fonction en option, peut commencer à jouer ou à l’arrêt)
* Chaque diapositive a une ancre (vous pouvez accéder directement à des diapositives spécifiques)
* Continuités infinies coulissantes (glissières toujours dans la direction où vous allez, même au « dernier » slide)
* Multiples sliders possible par page
* AutoPlay s’arrête sur hover (option)
* Lien pour des diapositives spécifiques à partir des liens de texte statique

Autant dire que les possibilités sont multiples et correspondent à la majorité des besoins.

Exemple, d’utilisation :

[pastacode lang= »javascript » manual= »%24(‘.anythingSlider’).anythingSlider(%7B%0A%20%20%20%20%20%20%20%20easing%3A%20%22swing%22%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Anything%20other%20than%20%22linear%22%20or%20%22swing%22%20requires%20the%20easing%20plugin%0A%20%20%20%20%20%20%20%20autoPlay%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20This%20turns%20off%20the%20entire%20FUNCTIONALY%2C%20not%20just%20if%20it%20starts%20running%20or%20not%0A%20%20%20%20%20%20%20%20startStopped%3A%20false%2C%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20If%20autoPlay%20is%20on%2C%20this%20can%20force%20it%20to%20start%20stopped%0A%20%20%20%20%20%20%20%20delay%3A%203000%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20How%20long%20between%20slide%20transitions%20in%20AutoPlay%20mode%0A%20%20%20%20%20%20%20%20animationTime%3A%20600%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20How%20long%20the%20slide%20transition%20takes%0A%20%20%20%20%20%20%20%20hashTags%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Should%20links%20change%20the%20hashtag%20in%20the%20URL%3F%0A%20%20%20%20%20%20%20%20buildNavigation%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%2F%2F%20If%20true%2C%20builds%20and%20list%20of%20anchor%20links%20to%20link%20to%20each%20slide%0A%20%20%20%20%20%20%20%20pauseOnHover%3A%20true%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20If%20true%2C%20and%20autoPlay%20is%20enabled%2C%20the%20show%20will%20pause%20on%20hover%0A%20%20%20%20%20%20%20%20startText%3A%20%22Start%22%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Start%20text%0A%20%20%20%20%20%20%20%20stopText%3A%20%22Stop%22%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20Stop%20text%0A%20%20%20%20%20%20%20%20navigationFormatter%3A%20null%20%20%20%20%20%20%20%2F%2F%20Details%20at%20the%20top%20of%20the%20file%20on%20this%20use%20(advanced%20use)%0A%7D)%3B » message= » » highlight= » » provider= »manual »/]

 

Retrouver le plugin : http://css-tricks.com/anythingslider-jquery-plugin/
La démo : http://css-tricks.com/examples/AnythingSlider/#panel-1
Sur Github : http://github.com/dcneiner/AnythingSlider

Si vous avez des questions ou remarque sur ce plugin, n’hésitez pas 😉

Author: Franck Pertegas

Share This Post On

14 Comments

  1. Bonjour,

    J’aimerais savoir comment on fait pour installer ce plugin car il n’as pas de fichier XML d’installation.

    S’il est possible d’avoir une petite aide ce serais formidable de votre part.

    Merci d’avance

    Post a Reply
  2. Bonjour Chris,

    Il n’y a pas besoin de fichier XML d’installation. Attention : ce n’est pas un plugin WordPress ou Joomla, mais un plugin pour le framework javasccript jQuery.

    Dans quel type d’environnement souhaites tu l’installer ? Pour un site créé à la main (si je peux dire) ou dans l’architecture d’un CMS ?

    Post a Reply
  3. Merci de ta réponse rapide.

    C’est pour l’utiliser dans joomla donc un CMS.

    Post a Reply
  4. Bonjour,

    Moi je cherche à faire un diaporama tout simple (défilement de 3 ou 4 photos) à mettre en page d’accueil de mon site internet. Ce dernier est administrable grâce à Joomla mais je n’y comprends rien. J’ai installé le module « AnythingSlider » mais impossible de m’en servir. J’ai regardé différents forum pour savoir s’il n’y a pas une façon plus simple de faire ce diaporama mais les personnes qui répondent sont beaucoup trop avancées par rapport à moi et utilisent un langage incompréhensible (CSS, HTLM…et oui, il faut reprendre les bases avec moi !)
    Quelqu’un pourrait il m’aider ? ça fait plusieurs semaines que je planche dessus…
    Merci d’avance !

    Post a Reply
  5. Bonjour
    J’utilise un slideshow pour mon site (www.info2tele.com) qui fonctionne avec mootools. Il me pose problèmes notamment en créant des conflits.

    Est-il possible d’obtenir la même chose avec jquery ? Si oui, quelle est la marche à suivre ?

    Dans le genre, j’aime beaucoup de slideshow utilisé par le thème http://www.themewarrior.com/2010/09/breakingnewz/

    Merci pour l’aide

    Post a Reply
  6. Bonjour LAGAVUILIN30,

    Et bienvenue sur ce blog.

    Après quelques tests, il me semble que les liens autours des images fonctionnent avec le slider.
    [cc lang= »html »]



  7. [/cc]
  8. Post a Reply
  9. Bonjour,
    Tout d’abord, merci pour ce diaporama superbe!
    Une question qui rejoint la demande de LAGAVUILIN30, je cherche à créer des liens sur les images du diaporama, vers des pages html.
    J’ai essayé le code que tu donnes au dessus, il fonctionne, mais décale les flèches du diaporama tout en bas de la page. Y a t il une solution??

    Post a Reply
  10. Bonsoir mazeres,

    Attention, je n’avais pas tout mis le code, c’était juste pour donner une piste. Il ne faut pas oublier de fermer chaque balise « li ».

    Tu as un exemple en ligne ou tu travailles en local ?

    Post a Reply
  11. Bonjour Ludikadmin,
    Merci de ta réponse!
    Voilà l’exemple:
    http://www.lusinetheatre.com/spectacles.html

    (tu verras comme je te disais, en mettant un lien, les flèches sont tout en bas de la page). Que veux-tu dire par fermer les balises ? (mille excuses, je m’y connait très peu, c’est un ami qui m’a installé le code)

    Post a Reply
  12. Bon mon copié collé n’a pas marché (tu peux voir l’étendue de mes connaissances !) je ressaye:

    [cc lang= »html »]

    [/cc]

    Post a Reply
  13. Salut mazeres,

    Je répond un peu tard, mais je ne vois pas le slider sur le lien que tu me proposes.

    Post a Reply

Trackbacks/Pingbacks

  1. Un diaporama avec AnythingSlider jQuery Plugin » Javascript & Web Design - Tous les jours le meilleur des ressources Javascript pour intégrateurs web front-end (avec parfois un soupçon de PHP) - [...] LudiBlog. Posted in Applications autonomes, Plugin jQuery | Tagged Diaporama, Onglets, Slideshow [...]
  2. jQuery – 20 plugin jQuery à retenir | LudiBlog - [...] Je vous en parle ici Un slideShow pour vos images en jQuery. Complet et configurable. Le [...]
  3. Liste de tous les plugins jQuery testés sur le blog | LudiBlog - [...] Zoom Zoomy Cycle Sponsor Flip Wall Easy Gallery ColorBox MaxImage JLoupe JQuery Infinite Carousel AnythingSlider YoxView jqFancyTransitions [...]

Submit a Comment

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