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
.
Discussions par date d’activité
Une discussion
Bonjour,
J’utilisais AnythingSlider 2.0.2 avec la version 3 de SPIP et aprés avoir fait evoluer mon site vers la version SPIP 4.2.4, je comprends que AnythingSlider 2.0.2 n’est pas compatible.
Je suis en PHP 8.2.
Est-ce que ce plugin évolura pour être compatible avec SPIP 4.2.4 ?
Merci
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 :
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.
Suivre les commentaires : |