AnythingSlider version 2.x.x

Publié le : 19 décembre 2012 – Dernière modification le 21 décembre 2021 – par Joseph – 83 commentaires

1
2
3
4
5
16 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 :

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

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 :

<B_slider>
<div class="slider-conteneur liste article" style="width:500px;">
  <ul class="slider-anythingslider liste-items"
  data-slider='{
      startText : "Démarrer",
      stopText: "Arrêter",
      buildStartStop: false,
      buildNavigation: true
    }'>
    <BOUCLE_slider(ARTICLES) {!par date}{par num titre} {0,10}>
    <li class="panel">
                ....  contenu de chaque item .....
    </li>
    </BOUCLE_slider>
  </ul>
</div>
</B_slider>

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 :

<B_slider>
<div class="slider-conteneur liste article" style="width:500px;">
  <ul class="slider-anythingslider liste-items"
  data-slider='{
      css:["#CHEMIN{lib/anythingslider/css/theme-simple.css}"],
      buildStartStop: false,
      buildNavigation: true
    }'>
    <BOUCLE_slider(ARTICLES) {!par date}{par num titre} {0,10}>
    <li class="panel">
                ....  contenu de chaque item .....
    </li>
    </BOUCLE_slider>
  </ul>
</div>
</B_slider>

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 :

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

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.

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

35 discussions

  • baloo

    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

  • DD

    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

  • chris

    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

  • Benolaos

    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

  • 1
    dnc

    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 !

    • ed_kaka

      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

  • 2
    Philippe Pilard

    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

  • 2
    aliosha

    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 ?

    • Valéry

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

    • ygornet

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

    Répondre à ce message

  • 5
    Michel

    Bonjour,

    le plugin fonctionne bien dans l’ensemble à l’exception d’un problème gênant.

    Lors du chargement de la page contenant le slider, il y a un flash, lors duquel on aperçoit d’autres images que la première, quelques fois on voit même toutes les images du slider alignées verticalement pendant une seconde avant que le slider démarre.

    J’ai lu dans les précédents posts que d’autres personnes ont déjà eu ce problème, mais personne ne semble avoir trouvé de solution.
    Je me permets donc de relancer le sujet.

    J’ai essayé de mettre un display:none sur les li.panel et de définir des dimensions fixes et un overflow:hidden sur .anythinkSlider pour forcer la mise en page mais rien à faire.

    Quelqu’un peut-il m’aider ?
    Merci
    Michel

    • Michel

      Le problème vient bien du plugin.
      J’ai fait une install de anythingSlider sans le plugin, tout fonctionne correctement.

    • Clémence

      Bonsoir Michel,

      J’ai le même souci et cela me titille. Pouvez-vous m’en dire plus sur l’installation sans le plugin... je ne comprends pas comment faire.

      Merci.

    • Michel

      Bonjour,
      inserer et adapter le code à votre page.
      Bien mettre la librairie dans lib/

      <link rel="stylesheet" href="lib/anythingslider/anythingslider.css">
<script src="lib/anythingslider/jquery.anythingslider.js"></script>
<script type="text/javascript">
        $(function(){
            $('#slider').anythingSlider({
                 hashTags : false,
                 expand : false,
                 resizeContents : false,
                 buildArrows : false,
                 buildNavigation : false,
                 buildStartStop : false,
                 toggleControls : false,
                 autoPlay : true,
                 delay : 5000
             });
      });
</script>


<B_slider>
<div>
  <ul id="slider" style="width: 980px; height: 299px;">
    <BOUCLE_slider(ARTICLES) {!par date}{par num titre} {0,10}>
    <li>
                ....  contenu de chaque item .....
    </li>
    </BOUCLE_slider>
  </ul>
</div>
</B_slider>
    • Clémence

      Merci Michel pour la réponse.

      Après quelques balbutiements (les chemins de fichiers pas tout à fait identiques), j’ai réussi à faire fonctionner avec votre méthode, et de fait, plus de flash de départ.

      Par contre, je ne comprends pas, et peut être pourriez m’aider à comprendre : si je choisis une autre feuille de style (je souhaite theme-simple.css), alors le slide s’affiche dans le bandeau du site, sur toute largeur....

      Je ferai de nouveaux tests demain, et vous direz si j’ai trouvé une solution.

      Encore merci.

    • Karen

      Bonjour,
      Pourriez-vous préciser un peu la procédure pour faire une installation sans le plugin ?
      En effet, je rencontre le même soucis, mais, malgré mes tentatives, je n’arrive pas à aboutir sur cette installation.
      Merci d’avance pour votre aide.

    Répondre à ce message

  • eric

    Bonjour , pouvez vous me dire ou et comment modifier mon script pour intégrer une présentation comme la démo2
    http://css-tricks.com/examples/AnythingSlider/demos.html#&panel1-1&panel2-1&panel3-1

    Merci de votre aide

    Eric

    Répondre à ce message

  • 9
    Joce

    Bonjour,
    Tout d’abord merci pour ce plugin que j’utilise sur la page d’accueil d’un site en cours de développement.

    Je rencontre le problème suivant : un espace se génère sous la zone d’affichage des contenus de façon plus ou moins grande selon le nombre d’articles inclus dans le slider. J’ai beau me creuser la tête, je n’arrive pas à trouver l’erreur (je joins un visuel de l’affichage public car le site est hors ligne pour le moment).

    Le code html intégré :

        <B_slider>
    <div class="slider-conteneur liste article">
     <ul class="slider-anythingslider liste-items"
  data-slider='{
     css:["#CHEMIN{lib/anythingslider/css/theme-mini-light.css}"],
     buildStartStop: false,
     buildNavigation: false,
     autoPlay: true,
     delay: 8000,
   }'>
        <BOUCLE_slider(ARTICLES){id_rubrique!=2} {id_rubrique!=1}{doublons}{par date} {0,3} {age<=0}>
        <li class="panel">
		<BOUCLE_afficher_document6(DOCUMENTS){mode=image}{id_article}{0,1}{par date}{extension IN jpg}>
<p class="encart1"><a href="#URL_ARTICLE" title="#TITRE">[(#FICHIER|image_reduire{500,*})]</a></p>
</BOUCLE_afficher_document6>
		<div class="cartouche">
				[<p class="#EDIT{surtitre} surtitre">(#SURTITRE)</p>]
				<h1 class="#EDIT{titre} surlignable"><a href="#URL_ARTICLE">#TITRE</a></h1>
				[<p class="#EDIT{soustitre} soustitre">(#SOUSTITRE)</p>]				
			</div>
        </li>
        </BOUCLE_slider>
      </ul>
</div>
    </B_slider>

    Le code css de l’encart1 en sus des css de base
    .encart1 {clear: both; float: left; width: 60%; }

    Si quelqu’un peut éclairer ma lanterne, un grand merci !

    • DjackO

      Bonjour,

      Exactement le même problème. Plus j’ajoute de « slides », plus la hauteur augmente. Cela doit venir du mode calcul de la hauteur du slide dans AnythingSlider .
      J’ai par exemple :

      <li class="panel activePage" style="width: 664px; height: 1975px;">

      Le slide fait 1975px alors qu’il devrait faire 500px max.

      Et je ne m’en sors pas.
      Je suis en jQuery v1.7.2

    • Joseph

      Bonjour,

      pour ce type de problème liés au script AnythingSlider, le plus utile est d’en discuter sur GitHub (https://github.com/CSS-Tricks/AnythingSlider/issues).

    • jeanmarie

      Salut,

      j’ai eu même pb et en fouillant sur le GitHub comme conseillé par Joseph, j’ai trouvé une solution. Du coup, je la recopie ici, si ça peut éviter à d’autres de parcourir les posts...

      Il faut forcer la hauteur du div.anythingSlider-default avec la taille du contenu + !important :
      .anythingSlider-default {height : XXXpx !important;}

      Voir par là : https://github.com/CSS-Tricks/AnythingSlider/issues/431#issuecomment-13057804

      Par contre, je n’ai pas bien compris pourquoi ce souci arrivait et j’espère que cette solution ne pose pas d’autrs problèmes...

      jean marie

    • Daniel

      Bonjour,
      cette solution ne semble pas fonctionner pour la version 2.

    • jeanmarie

      Salut,

      pour info, ça fonctionne sur la version 2.0.0 - dev que j’utilise...

      Jean marie

    • Daniel

      J’utilise également cette version.
      J’ai appliqué le conseil dans anythingslider.css :

      Il faut forcer la hauteur du div.anythingSlider-default avec la taille du contenu + !important :
      .anythingSlider-default height : XXXpx !important ;

      pas de modification sur le site : la hauteur est environ 3 fois plus importante que demandé.
      Une solution ?

    • JLouis

      Mêmes symptomes que Daniel. Version 2.0.0 dev
      Ajout dans le .anythingsslider-default de la hauteur et !important

      et toujours une fenêtre trois fois trop haute.

      Merci de votre aide

    • DjackO

      Bonjour,
      Je pense que c’est plus au niveau de la déclaration des variables que cela se passe.
      En tous cas cela fonctionne pour cet exemple ci dessous.

      <ul class="slider-anythingslider"
								data-slider='{
								css:["#CHEMIN{css/theme-tabs-light.css}"],
								mode                : "horiz",
								buildStartStop      : false,
								autoPlay            : true,
								delay               : 3000,
								expand              : true,
								resizeContents      : false,
								pauseOnHover: true,
								clickControls       : "click focusin",
								
								enableArrows        : true,      // if false, arrows will be visible, but not clickable.
								enableNavigation    : true,
								navigationSize : 4, // number of tabs to show
								changeBy       : 1,
								onSlideBegin: function(e, slider) {
								slider.navWindow( slider.targetPage );
								}
								}'>
    • JLouis

      Merci de ta réponse mais désolé ça ne fctionne pas..
      Qqun d’autre a une idée ?

      Merci de votre aide
      JLouis

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom