SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 249 visiteurs en ce moment

Accueil > Affichage multimédia > Galeries et diaporamas > AnythingSlider > AnythingSlider version 2.x.x

AnythingSlider version 2.x.x

19 décembre 2012 – par Joseph – 70 commentaires

9 votes

Ce plugin permet d’utiliser aisément le script AnythingSlider dans ses squelettes.

ATTENTION : plugin pour utilisateur averti.

Note : le numéro de version du plugin est différent du numéro de version du script embarqué.

Note de version

Cette version 2 du plugin fonctionne de manière totalement différente des précédentes versions, adoptant le fonctionnement proposé par Cédric sur GitHub.

Dans cette version 2, le code javascript et CSS d’AnythingSlider n’est pas chargé sur toutes les pages mais seulement pour celles utilisant un slider.

Le parti pris est de considérer qu’on n’a a priori jamais de slider sur toutes les pages du site, et qu’insérer le JS et les css sur tout le site est dispendieux. Du coup on insère tout cela de manière intelligente uniquement quand un slider est présent dans la page, repéré par la classe slider-anythingslider.

AnythingSlider

Pour une présentation et une démo d’AnythingSlider, voir http://css-tricks.github.com/Anythi....

Le plugin intègre également les thèmes additionnels développés pour AnythingSlider (démo) distribués sur GitHub.

Les différentes options du script ne sont pas détaillées ici. Merci de se référer à la documentation d’AnythingSlider.

Insérer un slider dans son squelette

Un slider peut facilement être inséré dans un squelette, sans une seule ligne de javscript, de la manière suivante :

  1. <B_slider>
  2. <div class="slider-conteneur liste article" style="width:500px;">
  3. <ul class="slider-anythingslider liste-items">
  4. <BOUCLE_slider(ARTICLES) {!par date}{par num titre} {0,10}>
  5. <li class="panel">
  6. .... contenu de chaque item .....
  7. </li>
  8. </BOUCLE_slider>
  9. </ul>
  10. </div>
  11. </B_slider>

Télécharger

Le plugin détecte automatiquement les listes portant la classe slider-anythingslider, charge le javascript nécessaire et initialise le slider. Bien entendu, on peut boucler sur ce que l’on veut.

Transmettre des options au slider

Les options à transmettre au slider peuvent être précisées via un attribut data-slider à ajouter au ul.slider-anythingslider. Par exemple :

  1. <B_slider>
  2. <div class="slider-conteneur liste article" style="width:500px;">
  3. <ul class="slider-anythingslider liste-items"
  4. data-slider='{
  5. startText : "Démarrer",
  6. stopText: "Arrêter",
  7. buildStartStop: false,
  8. buildNavigation: true
  9. }'>
  10. <BOUCLE_slider(ARTICLES) {!par date}{par num titre} {0,10}>
  11. <li class="panel">
  12. .... contenu de chaque item .....
  13. </li>
  14. </BOUCLE_slider>
  15. </ul>
  16. </div>
  17. </B_slider>

Télécharger

Pour la liste complète des options disponibles et de leur valeur par défaut, voir la documentation d’AnythingSlider.

Changer le thème du slider

Pour changer le thème du slider, on ajoutera à data-slider une option css contenant le chemin du fichier CSS du thème. Il est inutile de préciser le paramètre theme, ce dernier étant calculé automatiquement d’après le nom de la CSS.

Exemple :

  1. <B_slider>
  2. <div class="slider-conteneur liste article" style="width:500px;">
  3. <ul class="slider-anythingslider liste-items"
  4. data-slider='{
  5. css:["#CHEMIN{lib/anythingslider/css/theme-simple.css}"],
  6. buildStartStop: false,
  7. buildNavigation: true
  8. }'>
  9. <BOUCLE_slider(ARTICLES) {!par date}{par num titre} {0,10}>
  10. <li class="panel">
  11. .... contenu de chaque item .....
  12. </li>
  13. </BOUCLE_slider>
  14. </ul>
  15. </div>
  16. </B_slider>

Télécharger

Personnaliser les onglets de navigation

Par défaut, et pour les thèmes les prenant en charge, les onglets de navigation sont numérotés séquentiellement. Il est cependant possible de les personnaliser en ajoutant dans chaque <li></li> un élément avec la classe slider-nav contenant le contenu de l’onglet de navigation. Par exemple :

  1. <B_slider>
  2. <div class="slider-conteneur liste article" style="width:500px;">
  3. <ul class="slider-anythingslider liste-items"
  4. data-slider='{
  5. css:["#CHEMIN{lib/anythingslider/css/theme-default1.css}"],
  6. buildStartStop: false,
  7. buildNavigation: true
  8. }'>
  9. <BOUCLE_slider(ARTICLES) {!par date}{par num titre} {0,10}>
  10. <li class="panel">
  11. .... contenu de chaque item .....
  12. <span class="slider-nav" style="display: none;">[(#TITRE|couper{20})]</span>
  13. </li>
  14. </BOUCLE_slider>
  15. </ul>
  16. </div>
  17. </B_slider>

Télécharger

Utilisations avancées

Si pour des usages plus avancés d’AnythingSlider (voir documentation d’AnythingSlider), vous avez besoin de charger plusieurs CSS et/ou script JS supplémentaires, ces derniers peuvent être indiqués via les options css et js de l’attribut data-slider.

Voir en ligne : http://plugins.spip.net/anythingslider

Dernière modification de cette page le 25 novembre 2015

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 29 septembre à 14:01, par Eric En réponse à : AnythingSlider version 2.x.x

    Bonjour,

    Merci pour cet excellent slider !

    Maintenant, que j’ai réussi à l’implémenter dans mon site, je souhaiterais pouvoir utiliser les options avancées mais je ne sais ni où ni quel code je dois insérer pour utiliser le animate.css

    Voici ce que j’utilise pour le moment mais j’aimerais aussi jouer avec les textes...

    Merci

    1. <B_slider>
    2. <div class="slider-conteneur liste article" style="width:650px;height:280px;">
    3. <ul class="slider-anythingslider liste-items" style="width:650px;height:280px;" data-slider='{
    4. css:["#CHEMIN{lib/anythingslider/css/theme-polished.css}"],
    5. js :["#CHEMIN{lib/anythingslider/js/jquery.anythingslider.fx.caption.js}"],
    6. js :["#CHEMIN{lib/anythingslider/js/jquery.anythingslider.fx.min.js}"],
    7. js :["#CHEMIN{lib/anythingslider/js/jquery.easing.1.2.js}"],
    8. infiniteSlides : true,
    9. autoPlay : true,
    10. pauseOnHover : true,
    11. delay : 8000,
    12. resumeDelay : 1000,
    13. delayBeforeAnimate : 0,
    14. autoPlayLocked : true,
    15. buildStartStop : true,
    16. enableStartStop : true,
    17. mode : "fade",
    18. startText : "Démarrer",
    19. stopText: "Arrêter",
    20. buildNavigation: true
    21. }'
    22. [(#REM) Affiche les 10 articles les plus récents associés au mot-clé : slider]
    23. <BOUCLE_slider(ARTICLES){branche}{id_mot=229} {!par date} {doublons} {0, 10}>
    24. <li>
    25. <BOUCLE_image(DOCUMENTS){id_article}{mode=image}{titre==^spip\_}{0,1}>
    26. [<a href="#URL_ARTICLE">(#FICHIER|image_reduire{650}) </a>]
    27. </BOUCLE_image>
    28. <div class="caption-right" >[(#DESCRIPTIF)]</div>
    29. </li>
    30. </BOUCLE_slider>
    31. </ul>
    32. </div>
    33. </B_slider>

    Télécharger

    Répondre à ce message

  • Le 31 mai à 19:47, par baloo En réponse à : AnythingSlider version 2.x.x

    Bonjour,
    j’ai un slider en bandeau du site
    Au chargement de la page, on voit le chargement des images une après l’autre avec le css du li avant de les voir comme il faut dans le slider .
    Savez vous comment faire pour les précharger et éviter cet effet
    pas de pb pour des sliders « moins large ».
    merci

    Répondre à ce message

  • Le 27 février à 18:24, par baloo En réponse à : AnythingSlider version 2.x.x

    Bonjour,
    J’aime beaucoup ce plugin mais j’ai un peu de mal avec la documentation.
    Si vous pouviez m’éclairer sur les points suivants ...
    -  si j’ai rajouté un theme qu’elle est la syntaxe pour rajouter un autre css par exemple animate.css

    data-slider=’
    css :[« #CHEMINlib/anythingslider/css/theme-cs-portfolio.css »],

    -  comment changer d’animation
    -  peut-on avoir du responsive si on a 2 images simultanées
    merci

    Répondre à ce message

  • Le 16 juin 2015 à 00:36, par Ochiaberi En réponse à : AnythingSlider version 2.x.x

    Bonjour,

    J’essaye d’utiliser ce plugin pour afficher des brèves. J’ai mis le paramètre « showMultiple : 2, » mais je n’ai qu’une seule brève. Si je règle la largeur max des <li> en css a une valeur fixe (ie. 25rem) j’arrive à voir plusieurs brèves mais ça ne fonctionne que sur une largeur de viewport fixe...
    Je travaille en local pour le moment, désolée, ce n’est sûrement pas très explicite mais si quelqu’un peut m’aider....

    Merci beaucoup d’avance.

    Voici le code de mon squelette :

    1. <B_breves>
    2. <div class="menu menu_breves">
    3. <div id="titre_breves" class="table">
    4. <h2><:dernieres_breves:></h2>
    5. <a rel="nofollow" href="spip.php?page=actus"><:voir_toutes_breves:></a>
    6. </div>
    7. <ul class="slider-anythingslider table"
    8. data-slider='{
    9. showMultiple : 2,
    10. buildNavigation : false,
    11. buildStartStop : false,
    12. resizeContents : true,
    13. }'>
    14. <BOUCLE_breves(BREVES) {!par date}{age <180}>
    15. <li class="breve">
    16. <a href="#URL_BREVE">
    17. [<h3>(#TITRE|couper{80})</h3>]
    18. [<small>(#DATE|affdate_jourcourt)</small><br/>]
    19. [<h4>(#SOUSTITRE|couper{150})</h4>]
    20. [<span>(#INTRODUCTION|couper{200})</span>]
    21. </a>
    22. </li>
    23. </BOUCLE_breves>
    24. </ul>
    25. </div>
    26. </B_breves>

    Télécharger

    la partie de css qui s’applique :

    1. /* apparence des brèves en page d'accueil */
    2.  
    3. /*------------- flèches */
    4. .anythingSlider-default .arrow {
    5. position: absolute !important;
    6. top:80% !important;
    7. }
    8.  
    9. .anythingSlider-default .back {
    10. left:-80px !important;
    11. }
    12.  
    13. .anythingSlider-default .back a {
    14. background: url(img/sprite.png) no-repeat scroll -8px -46px !important;
    15. }
    16. .anythingSlider-default .forward {
    17. left:-40px !important;
    18. }
    19. .anythingSlider-default .forward a{
    20. background: url(img/sprite.png) no-repeat scroll 13px -46px !important;
    21. }
    22.  
    23. .anythingSlider-default .arrow a {
    24. background-color: rgba(173, 217, 224, 254) !important;
    25. width:30px !important;
    26. display: block !important;
    27. height: 30px !important;
    28. margin: 0px !important;
    29. }
    30.  
    31. /*----------------- blocs brèves */
    32.  
    33. .anythingSlider-default {
    34. padding: 0 !important;
    35. }
    36. .anythingSlider-default.activeSlider .anythingWindow {
    37. border-color: #eee !important;
    38. }
    39.  
    40. div.menu_breves ul li {
    41. border-top: solid 1px #eee;
    42. border-bottom: solid 1px #eee;
    43. border-left: solid 1px #eee;
    44. border-right: solid 1px #eee;
    45. }
    46.  
    47. div.menu_breves ul li.breve a {
    48. padding: 1rem;
    49. }
    50.  
    51. div.menu_breves ul li.breve a:hover {
    52. background-color: #eee;
    53. }
    54.  
    55. div.menu_breves ul li.breve a:hover * {
    56. color:#e17000;
    57. }
    58.  
    59. div.menu_breves ul li.breve a::after {
    60. content: '';
    61. background: url("img/sprite.png") no-repeat scroll 27px -76px;
    62. display: block;
    63. height: 15px;
    64. width: 15px;
    65. bottom: 5px;
    66. right: 5px;
    67. }
    68.  
    69. div.menu_breves ul li.breve a:hover::after {
    70. background: url("img/sprite.png") no-repeat scroll 50px -76px;
    71. }
    72.  
    73.  
    74. div.menu_breves ul li.breve span, div.menu_breves #titre_breves a {
    75. color: #003C69;
    76. }
    77. div.menu_breves ul li.breve h3, div.menu_breves h2 {
    78. color: #e17000;
    79. font-weight: bold;
    80. margin-bottom: 1em;
    81. }
    82.  
    83. div.menu_breves h2 {
    84. text-transform: uppercase;
    85. font-size: 1rem;
    86. margin: 1rem auto;
    87. }
    88.  
    89. div.menu_breves #titre_breves a {
    90. background-color: #eee;
    91. display: block;
    92. padding: 2%;
    93. text-align: center;
    94. }
    95.  
    96. div.menu_breves #titre_breves {
    97. border-top: solid 1px #eee;
    98. border-bottom: solid 1px #eee;
    99. vertical-align: middle;
    100. text-align: center;
    101. background-color: #eee;
    102. }
    103.  
    104. div.menu_breves h3 a { text-align: left;}

    Télécharger

    PNG - 20.3 ko
    • Le 24 février à 21:12, par baloo En réponse à : AnythingSlider version 2.x.x

      je ne sais pas avec ton code mais

      en mettant dans data-slider : showMultiple :2, changeBy : 1,
      avec des images cela prend bien 2 images et une seule change à la fois ... par contre je n’arrive pas à avoir le responsive dans ce cas

    Répondre à ce message

  • Le 9 février à 01:04, par DD En réponse à : AnythingSlider version 2.x.x

    Bonjour,

    Pour ceux qui comme moi essaient d’intégrer ce plugin avec un SPIP 3.1 et SPIPr :
    j’ai du styler un
    .slider .fade opacity : 1 ;
    car bootstrap (livré avec SPIPr) insère par défaut un .fade opacity : 0 ;
    et donc j’ai cherché pendant longtemps pourquoi mes images ne s’affichaient pas.

    dd

    Répondre à ce message

  • Le 15 décembre 2015 à 15:49, par chris En réponse à : AnythingSlider version 2.x.x

    Bonjour

    J’ai souhaité faire un slider de vidéos Youtube.

    J’ai un problème que je n’ai réussit à résoudre qu’en zappant le plugin spip et en passant directement par le module jQuery AnythingSlider que j’ai collé dans mon squelette, donc avec les mêmes css et les mêmes réglages.

    Mon problème c’est que la taille affichée des vidéos est différente en fonction du nombre de video.
    Je force la hauteur de mon slider à 400px de haut mais la vidéo s’affiche bien si mon slider en contient 2, si j’en rajoute une, ma video fait 600px de haut, une 4e >800px, etc...

    Impossible de régler le problème de mon côté.

    Dommage, ça paraissait plus simple de passer par un plugin...

    Répondre à ce message

  • Le 18 août 2015 à 08:03, par Benolaos En réponse à : AnythingSlider version 2.x.x

    Bonjour à vous anythingslideriens,

    j’ai une question fonctionnalité : sur les 10 images stockées que j’aimerais faire défiler, j’aimerais en afficher 4 (petit format) au lieu d’une grande, et les faire défiler ensuite comme le fait si bien le plugin... d’après vous, possible ou pas possible ?

    Merci !!!

    Répondre à ce message

  • Le 1er juillet 2014 à 15:56, par dnc En réponse à : AnythingSlider version 2.x.x

    Bonjour,

    Ce plugin est-il compatible avec l’option navigationFormatter d’anything slider ? J’ai beau vouloir l’intégrer dans la partie data-slider, mais cela ne semble pas interprété.

    Mon exemple de config du slider :

    ul id=« slider » class=« slider-anythingslider slider-accueil » data-slider=’
    css :[« #CHEMINlib/anythingslider/css/theme-default1.css »],
    js :[« #CHEMINlib/anythingslider/js/jquery.anythingslider.fx.min.js »],
    js :[« #CHEMINlib/anythingslider/js/jquery.easing.1.2.js »],
    buildArrows : true,
    enableArrows : true,
    buildNavigation : true,
    buildStartStop : false,
    infiniteSlides : true,
    autoPlay : true,
    pauseOnHover : true,
    delay : 7000,
    resumeDelay : 1000,
    delayBeforeAnimate : 0,
    autoPlayLocked : true,
    navigationFormatter : function(i, panel)return panel.find(’h2’).text() ;

    Si je supprime la ligne navigation formater le slider marche sans problème. Mais j’ai besoin de cette ligne pour récupérer du texte dans un h2 dans la boucle spip du slider pour afficher du texte dans les boutons de navigations (ici le titre des articles).

    Une idée ?

    Merci !

    • Le 15 janvier 2015 à 14:13, par ed_kaka En réponse à : AnythingSlider version 2.x.x

      bonjour,

      même pb identifié : l’ajout de navigationFormatter fout la pagaille et ne fonctionne pas.
      j’ai également tenté avec l’exemple donné ici http://jsfiddle.net/Mottie/ycUB6/78/
      et le résultat est identique.

      Quelq’un aurait-il une piste ??

      merci :-)

    Répondre à ce message

  • Le 30 octobre 2014 à 21:00, par Philippe Pilard En réponse à : AnythingSlider version 2.x.x

    Bonjour,

    Je voudrais de l’aide pour transformer la présentation du défilement (avec anythingslider) des articles « sélectionnés » sur le site (Scolaspip / SPIP 3 ) de notre école :

    http://www.ec-voltaire-asnieres.ac-versailles.fr/

    Je voudrais placer à gauche du titre de l’article, le logo de l’article (ou de la rubrique). Comment faire ...
    Quelle ligne de code insérée dans le fichier : selection_accueil.html du squelette de scolaspip ? ou existe-t-il une option dans data-slider pour le faire ??? ou autre solution ???

    Merci de votre aide ....

    Il faudrait aussi que nous puissions agrandir la largeur du rectangle qui défile pour voir apparaître « lire la suite » : Url vers l’article sélectionné.
    Quelle variable changer pour cette seconde question ?

    Merci de vos réponses Philippe

    Répondre à ce message

  • Le 11 avril 2014 à 04:24, par aliosha En réponse à : AnythingSlider version 2.x.x

    Bonjour.

    Lorsqu’on navigue d’un « slide » à un autre, cela rajoute une page dans l’historique de navigation (si l’on fait précédent, on retombe sur la même page).

    Y a-t-il une solution pour contrer le faussement de l’historique par AnythingSlider ?

    • Le 19 juin 2014 à 17:09, par Valéry En réponse à : AnythingSlider version 2.x.x

      Ce n’est pas une anomalie c’est une fonctionnalité : elle permet de partager le lien vers un slide en particulier.

    • Le 12 septembre 2014 à 15:28, par ygornet En réponse à : AnythingSlider version 2.x.x

      ce n’est pas une fatalité :
      hashTags: false,
      supprime l’ajout d’un code à l’url

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Adaptive Images

    15 novembre 2013 – 69 commentaires

    Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation. Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, (...)

  • Social tags

    8 septembre 2008 – 428 commentaires

    Le plugin Social Tags permet d’ajouter des icônes de partage de liens vers les sites tels que Digg, Facebook, Delicious.... Une fois le plugin installé et activé (voir doc.), le choix des sites se fait via un menu de configuration. Insertion (...)

  • Module de Paiement Stripe

    17 octobre – commentaires

    Stripe est un prestataire de paiement externe https://stripe.com/fr qui propose une API moderne et une interface de paiement extrêmement conviviale et efficace. Ce module permet les paiements à l’acte et les paiement récurrents. Configuration (...)

  • Métas

    8 août 2009 – 50 commentaires

    Ce petit plugin permet l’ajout, depuis l’espace privé, de metatags aux articles et rubriques de SPIP, ainsi que la mise en exergue de mots importants.

Ça spipe par là