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é
35 discussions
Bonjour,
Je reviens ici car j’’ai un conflit entre les plugins AnythingSlider et GIS4, empêchant ce dernier d’afficher les cartes géographiques.
J’ai besoin d’afficher sur les mêmes pages une carte et un portfolio en slider.
L’espace pour l’emplacement de la carte est créé mais la carte n’apparait pas.
Dés que j’enlève l’appel js de la fonction, la carte apparait bien...
Comment contourner le problème ?
Merci pour votre aide
P.S. Le site est en dev mais je peux transmettre des identifiants si nécessaire
Répondre à ce message
Bonjour,
même problème que les copains : plus il y a d’images, plus la taille augmente, j’ai essayé trois tonnes de trucs : vidage cache soft et hard, passage en display:none et autres....
tout est OK, sauf cette taille en hauteur...
le source de mon gabarit :
en modifiant certains attributs pour les contraintes du site
[(#SETthe_article,#ID_ARTICLE)]
#TITRE
Publié le #DATE_MODIF
#TEXTE
[(#FICHIER|image_reduire600,400)]
Retour
la moitié du commentaire bouffé.....
on va essayer de faire......
Répondre à ce message
Bonjour,
J’utilise AnythingSlider (v2.0.0) sur un site en dev (SPIP 3.0.6 maj ce matin) et jusqu’à présent tout ce passait bien, mais depuis hier, plus rien ne fonctionne, et mes pages sont en vrac...
J’ai fait les manipulations habituelles, vidage du cache à la main, désactivation et réactivation, etc... rien à faire.
Une idée ou un conseil ?
C’est comment dire... presque urgent :-/
Merci,
kris
Sans lien ? ni description détaillée du problème ?
Désolé pour le bruit, un reliquat de js provoquait une erreur !
Merci de ta réactivité :)
Répondre à ce message
Rebonjour,
j’ai réussi à insérer du code qui affiche bien le logo et le titre de l’article. Le problème est qu’il y a beaucoup d’espace, le slider devient très haut... J’ai essayé pas mal de choses pour voir d’où vient le pb mais il semble y avoir un bug....
HELP
Bonjour,
en premier lieu lire http://contrib.spip.net/Les-choses-a-faire-avant-de-poser-une-question peut toujours aider.
Malheureusement une phrase comme Il semble y avoir un bug... ne permet pas d’identifier ou de reproduire le bug en question.
Bien cordialement
Bonjour, j’ai à peu près le même souci j’imagine, sur spip 3.0.5 j’ai mis en Balise le logo... sauf que la taille en hauteur de l’image est énorme.
Le site ou se visualise le problème : http://quinzainedelafabrique.csc49.fr
Site sur ovh... je ne sais pas si ça aide.
Merci
L’option expand définie à true ? (cf. http://css-tricks.github.com/AnythingSlider/)
Un rapide regard au code source :
<img class="spip_logos" alt="" src="IMG/arton1.jpg?1360616921" width="449" height="168" style="width: 100%; height: 100%;">Les images sont forcées en 100% dans un li de 800 par 531px. Rien d’étonnanthonte à moi ! merci, je vais faire la modif, je n’avais pas pris en compte le li, je l’avais zappé celui ci !!!!
En tout cas plugin aisé à configurer malgré ce petit soucis rencontré, merci, je m’en vais m’amuser avec !
Répondre à ce message
Bonjour, je ne suis pas expert en spip mais je voudrais utiliser anythingslider. J’ai réussi à installer le plugin et j’ai inséré le script dans le squelette mais je ne sais pas quoi mettre dans ... contenu de chaque item... pour faire défiler tout simplement les articles avec leur logo et le texte. Quelqu’un pourrait-il m’aider ? merci d’avance
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 :
|
