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

  • dir_lendit

    Bonjour,
    J’ai un petit problème de décalage de mes images affichées avec anythingslider.
    Voici le lien http://www.lelendit.ac-creteil.fr/?lang=fr#&panel1-1
    Même si je n’affiche qu’une seule image elle apparrait en décalé.
    Voici le code source utilisé :

    data-slider =’
    resizeContents : false,
    buildStartStop : false,
    buildNavigation : true,
    autoPlay : true,
    pauseOnHover : true,
    buildArrows : false,
    delay : 3000
    ’ >

    Quelqu’un peut-il m’aider ?

    Répondre à ce message

  • 1
    Clémence LE TOUSEY

    Bonjour,

    Je me tourne vers vous pour un problème avec ce plugin... après avoir suivi cette installation http://wikitice.ac-versailles.fr/index.php?title=Personnaliser_squelette_scolaspip la balise B_slider ne semble pas reconnue, en effet le code s’affiche sur la page (voir ici).

    Je suis novice et n’y comprends pas grand chose, néanmoins cela ne semble pas être un problème de JS puisque j’ai sur le site des widgets qui fonctionnent très bien.

    Ma config : Spip 3.0.11, ScolaSpip 3.0.23, AnythingSlider 2.0.0

    Par avance merci.

    • Clémence LE TOUSEY

      J’ai résolu le problème ! Cela venait d’un fichier htlm fucker... j’avais copié du texte via TextEdit qui avait caché des balises .
      Super plugin en tout cas. Merci du boulot.

    Répondre à ce message

  • 1
    Jean-Michel Edition999

    Bonjour,
    Merci pour ce plugin,
    Par contre je n’arrive pas à enlever à la fin du lien : /#&panel1-2 qui change de n° d’url à chaque fois que change l’image.
    Je n’ai rien trouvé sur les différents forums du site.
    Merci d’avance de votre aide.

    http://www.surmonlit.com/#&panel1-2

    • DD

      Bonjour,

      J’avais le même problème et j’ai trouvé la solution en farfouillant sur le net (https://github.com/CSS-Tricks/AnythingSlider/issues/362) :
      Il faut ajouter

      hashTags:false,

      Exemple :

        <ul class="slider-anythingslider liste-items"
data-slider='{
css:["#CHEMIN{css/theme-simple.css}"],
autoPlay            : true,
hashTags:false,
mode                : "f",
}'>

      (c’est apparu après une mise à jour récente)

      dd

    Répondre à ce message

  • 1
    ygornet

    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.

    Certes, certes
    Je charge ainsi anythingslider.fx sans problème.
    Mais comment donc lui indiquer le nom de la classe qu’il doit traiter ?
    Peut-on le faire via data-slider ?
    Et avec quelle syntaxe ?

    • Joseph

      Avec un exemple précis et la syntaxe utilisée dans le cas où on intégrerait soi-même AnythingSlider dans son site, ce serait plus simple à comprendre.

      Cordialement

    Répondre à ce message

  • gilles

    J’ai le même problème de chargement.
    Il construit la liste à puce « li »
    Montre toutes les images et les puces
    Puis montre le slider.

    C’est embêtant.

    Est-ce parce qu’il charge le javascript à la fin du document ?

    Répondre à ce message

  • 1
    Tvier

    Bonjour,

    Je viens d’installer le plugin sur un site en dev. Il marche bien, correction de l’hauter reussi et j’ai mes articles qui s’affichent correctement.

    Par contre, à l’ouverture de la page, on voit les articles qui se superposent avant que le slider ne soit construit. Je cherche ainsi un parametre anythingslider ou bien une astuce pour la boucle qui permettrait de retarder le chargement de tous les slides de quelques secondes (charger le premier article de la boucle et afficher le slider) pour ne pas voir cela...pour l’instant je vais afficher 3-4 articles, mais je craint que cela devient lourd si jen ai plus...

    merci d’avance pour vos idées
    Tiago

    • Aline

      Bonjour,
      J’ai exactement le même problème que Tvier, y-t-il une solution ?

    Répondre à ce message

  • Madgad

    j’ai mis en place anythings slider et je me bats depuis 2 jours avec......
    je vais essayer de faire au plus clair (à la base je suis graphiste, pas du tout développeur ;) )
    donc sur ma page sommaire j’ai mis ce slider, avec le thème simple
    j’ai fait quelques petites modifs dans le CSS, mais rien de grave (changement d’épaisseur et de couleur de la bordure...)
    Ma boucle à pour objectif d’afficher dans le slider un résume article classique des articles auxquelles on applique le mot clé « a-la-une »

    J’ai 2 soucis :
    -  je n’arrive pas à régler la hauteur du slider..., si je mets une valeur (ex : « height:300px ») cela à pour effet de faire monter le texte du reste de la page mais pas la taille du slider... et firebug me montre une valeur de 663px que je n’arrive pas trouver...

    ensuite, et pas le moins grave, lol, je ne vois pas mes annonce défiler (j’ai fait les test de boucle seul qui fonctionne etc...) d’ailleurs si je désactive le CSS « position:absolute ; » à la ligne 22 la première annonce apparais convenablement... mais le slider ne défile pas...

    Voici la bouble que j’ai créé : (ne pouvant utiliser c l a s s , je le remplace par clas, mais il est bien sur avec 2 s sur ma page ;) (idem pour style)

    A la Une :


    • #INCLUREfond=inclure/article-resume,id_article

    et bien sur un lien sur ma page : http://www.comite-entreprise-wengel.fr/spip/

    merci d’avance pour l’éventuel dépannage
    PS : jsuis nul, j’rrive même pas à vous mettre le code de la boucle

    Répondre à ce message

  • 7
    Paulgelo

    Bonjour,

    je suis sous spip 3.0.8. J’ai installé le plugin anythingslider 2.0.0, dans mon squelette sommaire je créé la boucle de la doc avec #LOGO_ARTICLE mais rien n’est chargé. J’obtien une liste simple contenant les #LOGO_ARTICLE.
    J’ai bien ajouté #INSERT_HEAD dans mon head.html, qui lui même est inclu dans mes squelettes.

    Rien n’est appelé, ni le JS ni le CSS de anythingslider.

    Une idée ?

    • Joseph

      Merci d’être plus précis. La liste porte-elle bien la classe slider-anythingslider ?

    • Nvurok

      Oui, j’ai fais un copié collé de l’exemple de la doc ci-dessus
      « Insérer un slider dans son squelette »

      Dans mes pages (sommaire.html, article.html etc...) je fais un INCLURE=head entre les balises

      pour appeler le fichier head.html contenant lui #INSERT_HEAD et #INSERT_HEAD_CSS.

      Mais rien n’y fais. j’ai toujours une liste a puce classique sans JS ni CSS de anythingslider.
      Mon plugin est bien activé dans mon espace privé et est à jour

    • Joseph

      Juste histoire d’éliminer les basiques :

      • Cache vidé ?
      • Version de SPIP ? du plugin ?
      • URL pour voir en ligne le résultat ?
    • Nvurok

      -  caché vidé : done
      -  Version spip : 3.0.8
      -  Version plugin : 2.0.0
      -  URL voir en ligne : Je travail en local, site en dev. mais voici un screenshots :

      https://dl.dropboxusercontent.com/u/16312742/screen.TIFF
      (PS : Le slider Anneroumanoff est une simple image jpeg )

      On peut voir la liste à puce qui ici ne comporte que #TITRE.

    • Joseph

      Et le code HTML de la page produite ? Est-ce que le lancement d’anythingslider est bien inséré dans le HTML avant la balise

       ?

      Je ne connais jquery.wslide.js mais je ne sais pas si cela peut interférer ?

      Faire une page HTML basique toto.html dans laquelle on met juste une liste anythingslider. Est-ce que ça fonctionne ?

    • Nvurok

      Désolé pour jquery.wslide.js, ça na rien à voir. Bon j’ai résolu le problème mais ça reste étrange.
      J’ai fais un appel JS et CSS dans mon head

      <script type="text/javascript" src="squelettes/anythingslider.init.js"></script>

      J’ai du donc copier/coller le script et css du plugin dans mon dossier squelette.
      Le plugin marche correctement mais de ce fait #INSERT_HEAD et #INSERT_HEAD_CSS ne marcherait-il pas ?

      Je vais essayé la page basique et vous tenir au courant.

    • Joseph

      Dans le cadre de cette version 2, les scripts ne sont pas insérés via #INSERT_HEAD mais à la fin du HTML de la page (juste avant la fermeture de body), via le pipeline affichage_final, si et seulement si la chaine « slider-anythingslider » est trouvée dans le rendu final de la page.

      La question est donc de savoir si affichage_final a correctment fonctionné ou non et si non d’en comprendre les raisons.

    Répondre à ce message

  • Jean Christophe Villeneuve

    Très intéressant ce plugin mais j’ai un souci avec les images. En effet, avec ce code

    <B_slider>
<div class="slider-conteneur liste article" style="width:400px;" >
  <ul class="slider-anythingslider liste-items"
    data-slider='{
      css:["#CHEMIN{lib/anythingslider/css/theme-metallic.css}"],
      expand: false
    }'>
    <BOUCLE_slider(DOCUMENTS){id_article}>
    <li class="panel">
            <img src="#FICHIER" alt='[(#TITRE)]'/>
    </li>
    </BOUCLE_slider>
  </ul>
</div>
</B_slider>

    dans une boucle article, j’ai bien mes images mais démesurément allongé en hauteur (3426px quand même !)

    Si je rajoute height:300px; dans le style="width:400px;", je n’ai plus l’allongement mais les proportions des images ne sont évidemment plus respectées.

    Une idée pour corriger ?

    Répondre à ce message

  • 2
    Arno

    Bonjour,
    j’avais le même problème de hauteur augmentant selon le nombre d’images chargées. Il a suffi de transmettre l’otpiton « resizeContents : true » (false par défaut) au slider pour régler le problème.

    • DjackO

      amusant : pour mon cas, c’est l’inverse : resizeContents : false corrige le problème de la hauteur . Et je viens de revérifier à l’instant en lisant votre message.

    • Arno

      Vous avez raison, j’ai écrit trop vite le post

    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