Note : le numéro de version du plugin est différent du numéro de version du script embarqué.
Présentation d’AnythingSlider
Pour une présentation complète du script AnythingSlider et de son utilisation, voir :
Fonctionnement
Une fois activé, ce plugin charge le script jQuery AnythingSlider dans les pages publiques du site. Plus précisément, il charge le script de base, jquery.anythingslider.min.js, ainsi que les CSS du thème par défaut, à savoir anythingslider.css et anythingslider-ie.css [1]. Il utilise pour cela balise #INSERT_HEAD. Vous devez donc vérifier que votre squelette la prévoit.
Charge ensuite à vos squelettes d’appeler le script en suivant la documentation du plugin.
Voici un exemple d’insertion dans un squelette :
- <B_liste_articles>
- <div class="liste anythingslider articles">
- <h2 class="h2">Démo AnythingSlider</h2>
- <ul id="slider1">
- <BOUCLE_liste_articles(ARTICLES){!par date}{0,10}>
- <li class="item hentry" style="width:100%;">
- <h3 class="h3 entry-title"><a href="#URL_ARTICLE" rel="bookmark">
- [(#LOGO_ARTICLE||image_reduire{150})]<span>#TITRE</span>
- </a></h3>
- [<div class="info-publi"><abbr class="published" title="[(#DATE|date_iso)]">(#DATE|affdate_jourcourt)</abbr></div>]
- [<div class="introduction entry-content">(#INTRODUCTION)</div>]
- <div class="meta-publi">
- <a class="lire-la-suite" href="#URL_ARTICLE"><:zpip:lire_la_suite:><span class="lire-la-suite-titre"><:zpip:lire_la_suite_de:> <em>#TITRE</em></span></a>
- </div>
- </li>
- </BOUCLE_liste_articles>
- </ul>
- </div>
- <script type="text/javascript">// <![CDATA[
- $(document).ready(function(){
- $('#slider1').anythingSlider({
- expand: false,
- resizeContents: false,
- startText : "Start",
- stopText : "Stop",
- theme : 'simple', // Si la CSS du thème n'a pas été activée dans le formulaire de config, le thème par défaut sera utilisé.
- buildArrows: true,
- buildNavigation: true,
- buildStartStop: false,
- toggleControls: false,
- startStopped: false,
- delay : 2000
- });
- });
- //]]></script>
- </B_liste_articles>
Si vous utilisez Zpip, vous pouvez voir le résultat en vous rendant sur la page http://mon.site.net/spip.php?page=demoanythingslider.
Si vous utilisez Aveline, vous disposez déjà de noisettes pour l’utilisation d’AnythingSlider (voir AnythingSlider pour Aveline).
Script optionnels
Pour disposer de plus d’effets, vous pouvez activer plusieurs scripts additionnels :
-
jquery.anythingslider.video.min.js -
jquery.anythingslider.fx.min.js -
jquery.easing.1.2.js -
swfobjet.js
Pour insérer ces scripts dans vos pages, vous pouvez utiliser le formulaire de configuration d’AnythingSlider (disponible via les Menus ou en allant directement sur ./ecrire/?exec=configurer_anythingslider. Il vous suffit dès lors de cocher les scripts à inclure dans les en-têtes des pages du site publique.

Thèmes
Le plugin SPIP est livré avec plusieurs thèmes pour script AnythingSlider. Cette liste de thèmes pourra être amenées à augmenter au cours du temps.
Note de version : pour les personnes ayant utilisé la version 0.1.3 du plugin (qui embarquait la version 1.5.9 d’AnythingSlider), sachez que la gestion des thèmes. Si auparavant le script pouvait charger lui-même les CSS des thèmes utilisés, ces derniers doivent maintenant être chargés dans l’en-tête des pages HTML [2].
Vous pouvez choisir sur le même formulaire de configuration les thèmes que vous souhaitez charger. Sélectionnez les thèmes désirés et enregistrez votre configuration
Utilisation depuis un autre plugin
Si vous souhaitez développer un plugin qui nécessite AnythingSlider et des scripts optionnels et/ou des thèmes, la démarche est relativement simple et analogue au plugin jQuery UI pour SPIP.
Tout d’abord, il est nécessaire d’ajouter un élément <necessite ... /> à votre plugin.xml (cf documentation) comme ceci :
- <necessite id="anythingslider" version="[1.0.0;]" />
Ensuite, le plugin AnythingSlider déclarant son propre pipeline pour les thèmes et scripts optionnels, anythingslider_charger, il suffit d’ajouter les fichiers que l’on souhaite utiliser comme ceci (dans l’exemple, on utilise monplugin comme préfixe de notre plugin imaginaire, on souhaite utiliser le script additionnel pour la gestion des vidéo et les thèmes construction et metallic) :
- function monplugin_anythingslider_charger($scripts){
- $scripts[] = "jquery.anythingslider.video.min.js";
- $scripts[] = "theme-construction.css";
- $scripts[] = "theme-metallic.css";
- return $scripts;
- }
Une saisie themes_anythingslider peut être utilisée dans vos formulaires pour sélectionner un thème parmi ceux activés.



anythingslider.zip
Vos commentaires
# Le 10 avril à 14:36, par dominique robin
En réponse à : AnythingSlider version 1.x.x
Bonjour,
je me répond car j’ai réagi que je pouvais me servir de l’exemple basé sur la table article. J’ai donc créé une table avec un ID qui m’a permis de classer les diapos en insérant soit du texte en m’inspirant fortement de l’exemple soit une image.
Il y a encore des améliorations à faire avec le css mais c’est déjà pas mal
merci pour ce plugin qui apporte vraiment un plus par rapport à un diaporama classique. Vous pouvez voir le résultat sur le site www.preuillysurclaise.fr et sans doute m’apporter quelques conseils car pour le texte c’est brut de décoffrage
Répondre à ce message
# Le 9 avril à 14:34, par dominique robin
En réponse à : AnythingSlider version 1.x.x
Bonjour, j’ai fais plusieurs essais avec ce super plugin que je voudrais mettre en place dans le sommaire du site de ma commune. J’ai réussi sans problème à le faire tourner avec des images mais je ne comprend pas comment insérer des diapos en texte et comment mettre ce texte en boucle spip. C’est à dire quelle boucle faire pour intervertir texte et images. Est ce avec une boucle recursive ?
J’ai bien réussi à intégrer un pdf mais en mettant en dur dans le code l’adresse de mes images et de mon pdf en utilisant la balise iframe comme dans la documentation mais je n’arrive pas à rédiger la boucle correctement.
merci de votre aide
Répondre à ce message
# Le 31 mars à 13:31, par juan-luis
En réponse à : AnythingSlider version 1.x.x
español : en habillage eliminá en .articles ul li
.articles ul li clear : both
funciona bien con el BOUCLE propuesto en el artículo
ahí funciona.
Répondre à ce message
# Le 23 mars à 11:21, par Patman
En réponse à : AnythingSlider version 1.x.x
Bonjour,
J’utilise theme-simple.css pour 2 slides (A et B) qui sont affichés dans la même page.
Quand il y a 1 seul slide les onglets sont des petits points gris. mais à 2 : les onglets du slide A sont les points mais ceux de B sont en carré gris.
Si je zappe (clique sur les flèches gauche/droite) sur le contenu de B, cela change les onglets de A en carrés gris, mais cela remet les onglets de B en petit points gris.. Et inversement °-(
Cela doit ce passer au niveau srcipt = hors de mon champ de compétence.
J’ai creusé les forums mais j’ai rien vu qui traite de ce problème.
Avez-vous une solution ? Merci d’avance
# Le 29 mars à 12:25, par Patman
En réponse à : AnythingSlider version 1.x.x
Ceci n’est pas LA solution, mais c’est celle qui est à ma hauteur :
j’ai bricolé le anythingslider.css que j’ai mis dans squelettes/css/
j’ai commenté : /* */
div.anythingSlider .anythingControls ul a.cur, div.anythingSlider .anythingControls ul a
et
div.anythingSlider .anythingControls ul a
et
div.anythingSlider .anythingControls ul a:hover
Cela contrarie le thème par défaut, mais je n’utilise que thème simple.
Si il y a mieux à faire (genre : script du bouton), je suis preneur.
SPIP 2.1.12 - AnythingSlider Version : 1.1.1
Répondre à ce message
# Le 17 février à 10:37, par Glika Tchu
En réponse à : AnythingSlider version 1.x.x
Bonjour,
J’utilise cette version d’Anythingslier, avec un spip 2.1.10. J’utilise également le plugin menus déroulants (et d’autres, mais la liste ne devrait pas être utile).
Tout marche impeccablement : mais voilà, j’ai des sous-rubriques, et le menu déroulant se trouve juste au-dessus du slider. Les sous-rubriques passent derrière le slider, et sont donc illisibles, et inaccessibles.
J’ai tenté de solutionner le problème avec des z-index, mais c’est parfaitement inopérant.
Je me débrouille bien en CSS, mais je suis une bille en java... par contre, je peux comprendre un script, voir même opérer dessus sur des choses simples. Bref : j’ai besoin d’une piste.
Le site en question : http://www.yakayaka.org
Et merci déjà pour ce plugin, tout à fait excellent !
Répondre à ce message
# Le 19 janvier à 22:12, par crazyspip
En réponse à : AnythingSlider version 1.x.x
Bonjour,
Merci pour ce plugin !!! Enfin un slider qui n’oblige pas à n’utiliser que des images de même proportion. Je rencontre cependant 2 soucis.
1/ Régulièrement, le redimensionnement de la fenêtre a un raté, et tronque totalement mon image en hauteur. Dès que cela se produit, si je passe à la dia suivante, elle est généralement coupée de la même manière. Par contre, dès que je fais un « refresh », le problème disparaît.
2/ En autoplay, le défilement se bloque parfois. Il faut arrêter le diapo puis le relancer pour qu’il accepte de continuer.
Avez-vous rencontré le même souci ? Une idée ? Une solution ?
Spip 2.1.10
Réglage du plugin dans mon squelette :
expand: false,resizeContents: false,
vertical: false,
startText : "Start",
stopText : "Stop",
theme : 'cs-portfolio',
buildArrows: true,
buildNavigation: true,
buildStartStop: true,
toggleControls: false,
startStopped: false,
autoPlay: false,
delay : 5500
# Le 20 janvier à 09:30, par Joseph
En réponse à : AnythingSlider version 1.x.x
A première vue, cela ressemble a un souci avec le script AnythingSlider lui-même et non son portage sur SPIP. Je dois dire aussi que cela sort de mon domaine de compétence.
Je vous invite éventuellement à voir du côté de http://proloser.github.com/AnythingSlider/ et/ou à essayer d’installer manuellement le script dans sa dernière version.
Bien cordialement
# Le 28 janvier à 23:40, par crazyspip
En réponse à : AnythingSlider version 1.x.x
Bonjour Joseph,
Merci pour ta réponse rapide et pardon de réagir si tard.
Je ne suis pas certaine d’avoir les compétences nécessaires pour me lancer dans une installation manuelle. Si je dois plonger les mains dans les js et le jquery, je vais tout de suite atteindre mes limites. Aussi, j’ai réglé le problème des images coupées en forçant la hauteur de la div par un height. Reste l’autoplay qui se fige de temps en temps mais c’est moins gênant.
Ce qui m’étonne, c’est que personne d’autre ne semble rapporter des problèmes similaires. Or je ne dois pas être la seule à faire tourner ce plugin sur un 2.1.10. Etrange...
# Le 3 février à 14:27, par mickamoi
En réponse à : AnythingSlider version 1.x.x
Même problème, mes images y sont mais elles sont coupées, ou invisibles. Le slider se redimensionne à la taille des images mais celles-ci ne sont pas centrées sur la page. Elles sont quichées (hidden) en haut, ou à gauche, etc. hors de l’affichage du slider.
Problème de CSS ? De JS ?
Si quelqu’un a une solution car le recadrage selon la taille des images était vraiment sympa !!!
# Le 3 février à 14:56, par mickamoi
En réponse à : AnythingSlider version 1.x.x
Même problème, cela semble venir du slider, des postions left ou margin.
S’il y a une image, celle-ci est centrée mais au fur-et-à-mesure que l’on en rajoute, leurs positionnements se décale sur la gauche dans la section hidden de « anythingslider », dans le panel.
Je joint la capture d’écran où l’on peut voir que la première image est décalé en left"-366px" (d’où sont invisibilité...).
# Le 7 février à 21:49, par mickamoi
En réponse à : AnythingSlider version 1.x.x
Le problème pour moi venait de la classe « .articles ul li », présente dans le squelette-dist de spip ou squelette d’origine dans la page du css : « habillage.css ».
Il suffit de supprimer : « clear : both » (.articles ul li clear : both ; padding : 0.40em 0.20em ; ) pour que les images s’alignent et se redimensionnent en même temps que la fenêtre de présentation.
Répondre à ce message
# Le 22 janvier à 19:40, par benoloas
En réponse à : AnythingSlider version 1.x.x
Bonjour,
magnifique plugin, qui fonctionne à merveille (un peu déçu tout de même qu’il n’y ait pas d’effet « fade » pur jus) pour les images.
Mais comment faire pour afficher des vidéos ? Quelqu’un aurait-il essayé la manip ?
# Le 22 janvier à 23:29, par laurent
En réponse à : AnythingSlider version 1.x.x
Salut
tu as essayé d’insérer une vidéo dans un article et de l’afficher ?
www.fsl-nancy.fr
# Le 23 janvier à 19:28, par benoloas
En réponse à : AnythingSlider version 1.x.x
Tu as raison, c’est une question d’affichage.
J’essaye d’afficher les images (et vidéos) via Anything Slider à partir d’une boucle DOCUMENTS directement dans le squelette... c’est bien là que ça coince. Les images s’affichent mais pas les vidéos. Merci pour l’aiguillage
# Le 24 janvier à 05:52, par laurent
En réponse à : AnythingSlider version 1.x.x
tu peux peut etre aussi voir du coté de ce plugin : Plugin-Video-s ?
# Le 24 janvier à 08:46, par benoloas
En réponse à : AnythingSlider version 1.x.x
je suis allé voir du côté du Plugin Video(s), et du côté de Video_accessible. Les 2 fonctionnent, les vidéos s’affichent. Par contre l’anything Slider ne s’enclenche pas...
# Le 28 janvier à 07:00, par laurent
En réponse à : AnythingSlider version 1.x.x
probleme résolu ?
pour info, un site bien utile pour ce plugin : http://proloser.github.com/AnythingSlider/
# Le 30 janvier à 08:03, par benoloas
En réponse à : AnythingSlider version 1.x.x
Bonjour Laurent,
Et non, problème non résolu :-|
Merci pour le lien ; mais
1) j’avoue avoir déjà lu (et tout ce qui peut être lu, je crois ;-))
2) car finalement je pense que la solution est spipienne et non Anythingienne ;-)
Pour autant, quand je vois ton site, je sens bien que ce plugin est très souple... Aurais-tu une autre piste de recherche et de réflexion ?
Répondre à ce message
# Le 25 janvier à 22:15, par Guillaume
En réponse à : AnythingSlider version 1.x.x
Bonjour à tous,
j’ai actuellement un problème avec ce plugin :
je l’ai téléchargé et installé mais il semble ne pas fonctionner ?
J’ai utilisé le code de cette page de spip contrib et les articles s’affichent les uns en dessous des autres et non sous forme de slider. Et pourtant, il y a longtemps sur un autre projet ça avait fonctionné sur mon PC (je n’ai rien changé de spécial entre temps) ?
Est-ce que quelqu’un aurait une idée ?
désolé si je m’exprime mal, mais je n’ai aucune idée de la cause du problème...
si vous avez des questions, ne pas hésiter à me les poser.
merci !
Guillaume
# Le 26 janvier à 07:51, par Joseph
En réponse à : AnythingSlider version 1.x.x
Attention, la manière d’appeler le plugin a changé entre la v0 et la v1.
Par ailleurs, est-ce que les scripts javascript sont correctement chargés dans vos pages ?
# Le 26 janvier à 10:10, par Guillaume
En réponse à : AnythingSlider version 1.x.x
merci pour cette réponse,
j’ai utilisé le script plus haut sur cette page pour appeler le plugin.
Comment vérifier les scripts javascript ?
comme je débute, j’ai parfois du mal avec la terminologie...
merci beaucoup !
# Le 26 janvier à 10:52, par Joseph
En réponse à : AnythingSlider version 1.x.x
A lire Les choses à faire avant de poser une question.
Quels plugins sont installés ? Quelles versions de SPIP ? Quel squelette ? Des personnalisations dans le dossier squelettes ? La balise #INSERT_HEAD est-elle présente dans le squelette ? Dans la partie head de vos pages, le script
anythingslide.jsest-il appelé ? cela signifie, que dans le code de la page, vous devez avoir une ligne telle que :<script type='text/javascript' src='plugins/auto/anythingslider/js/jquery.anythingslider.min.js'></script>Si cette ligne n’est pas présente, il est possible que la compression des scripts javascript soit activée. Auquel cas vous auriez plutôt une ligne telle que :
<script type='text/javascript' src='local/cache-js/b6faec8d0f6553847210f6a20b049797.js'></script>Il vous faudra alors ouvrir ce fichier. Au début de celui-ci, vous aurez la liste des scripts compactés.
# Le 26 janvier à 18:17, par Guillaume
En réponse à : AnythingSlider version 1.x.x
Bonjour,
tout d’abord désolé pour la mauvaise description que j’ai faite du problème dans mon message. Le problème est résolu : il manquait bel et bien #INSERT_HEAD dans le head de mes pages !
un grand merci à vous...
et je saurais maintenant comment poser une question sur Spip de manière plus efficace :-)
merci
Guillaume
Répondre à ce message
# Le 19 janvier à 17:04, par Fulvio
En réponse à : AnythingSlider version 1.x.x
J’ai un pb avec anythingslider ... je n’arrive pas à trouver pourquoi à partir de la 10ème image les transitions se font avec un défilement très rapide de toutes les images du slider alors qu’avant la 10ème les images glissent correctement. C’est plus facile à comprendre sur cette page de test :
http://educeco.free.fr/spip.php?article197
Je retrouve toujours ce problème sur différents sites, sur différents serveurs (providers) et avec des images différentes : même en avançant manuellement les images, à partir de la 11ème les transitions s’affolent, soi en avant qu’en arrière, comme si au lieu de faire 10->11 le slider faisait 1->11.
Une piste : en mettant animationTime=0 tout est parfait, car il n’y a plus d’effet de glissement des images ; c’est donc, peut être le processus de construction de la transition qui est en cause, mais je ne vois pas où il faut « bricoler » pour tenter d’y remédier.
Si qqun pouvait m’aider ... merci !
# Le 20 janvier à 09:30, par Joseph
En réponse à : AnythingSlider version 1.x.x
A première vue, cela ressemble a un souci avec le script AnythingSlider lui-même et non son portage sur SPIP. Je dois dire aussi que cela sort de mon domaine de compétence.
Je vous invite éventuellement à voir du côté de http://proloser.github.com/AnythingSlider/ et/ou à essayer d’installer manuellement le script dans sa dernière version.
Bien cordialement
# Le 21 janvier à 14:56, par Fulvio
En réponse à : AnythingSlider version 1.x.x
J’ai bien trouvé et installé la dernière version du script (1.7.23) mais le dysfonctionnement reste le même ... et c’est vraiment dommage de limiter ce superbe slider à une dizaine d’images avec transition ! Ou alors, sans transitions (animationTime : 0) on peut en mettre autant qu’on veut (d’au moins je n’ai pas trouvé la limite).
Si qq’un trouve une parade, je suis preneur ... merci de me contacter.
# Le 21 janvier à 15:46, par Joseph
En réponse à : AnythingSlider version 1.x.x
Il semble donc que le problème vienne du script lui-même.
Je vous suggère de le signaler sur la page de développement de ce dernier.
Bien cordialement
# Le 24 janvier à 10:55, par Fulvio
En réponse à : AnythingSlider version 1.x.x
Judicieux conseil ... d’abord sur le site du développeur https://github.com/ProLoser/AnythingSlider/wiki on trouve toute information pour bien utiliser le slider ... et puis j’ai eu réponse à mes questions dans l’heure ... chapeau ! La solution se trouve dans la version de jquery embarquée par spip2.1.12 qui est la v1.4.4 : il faut la mettre à jour en v1.7 (ça se trouve sur le net) et depuis anythingslider fonctionne à merveille !
Pour tester la version en service, il suffit d’insérer dans le texte d’un article spip :
<html><script type="text/javascript">
<!--
alert('jQuery v.' + jQuery.fn.jquery);
//-->
</script>
</html>
Pour mettre à jour spip il suffit d’ajouter à « squelettes » un répertoire « javascript » dans lequel on met jquery-v1.7 qu’on renomme « jquery.js » et surtout il faut effacer le répertoire « cache-js » dans « local ».
Ben ... faudrait tout de même que jquery soit mis à jour d’office dans la prochaine upgrade de spip !
# Le 24 janvier à 11:08, par Joseph
En réponse à : AnythingSlider version 1.x.x
A priori, devrait être fonctionnel (d’après la page de ProLoser) à partir de jquery 1.6.3.
Il faut savoir que SPIP 3 embarque jQuery 1.6.4 (mais changement toujours possible avers une version plus récente dans les semaines à venir).
Par contre, le présent plugin n’est pas encore dispo pour SPIP 3. Il y a donc un petit travail de portage à effectuer, en partant idéalement du travail de Cédric sur https://github.com/Cerdic/anythingslider-for-spip (voir cette discussion sur le forum) et en lui ajoutant les scripts additionnels et la gestion des thèmes.
Cordialement
# Le 24 janvier à 14:43, par Fulvio
En réponse à : AnythingSlider version 1.x.x
Un petit bémol à ma joie ... spip2.1.12 montre une incompatibilité avec jquery1.7 (je suis descendu à la 1.6.4) : les chargements des documents et images dans les articles n’aboutissent pas ... la roulette tourne sans fin. En fait le document est bien chargé mais c’est la routine de chargement qui boucle à la fin au lieu d’afficher la vignette du document téléchargé. Nobody’s perfect !
Répondre à ce message
# Le 12 août 2011 à 15:49, par guillaume
En réponse à : AnythingSlider version 1.x.x
Bonjour !
ça peut aider ( vu le temps que j’ai mis pour trouver d’où ça venait !) :
Pour les personnes utilisant le theme Versatily ( et peut être avec d’autres...), dans le fichier « habillage.css », il y a, ligne 425 environ,
Il suffit d’enlever clear:both.
EN effet, si celui ci est laissé rien n’apparait dans les sliders !
voili voilou !
merci bien pour ce plugin !
# Le 12 août 2011 à 17:10, par guillaume
En réponse à : AnythingSlider version 1.x.x
euh ... par contre mon design est extensible, avec des %. je n’arrive pas à rendre le slidershow de même... savez vous où je peux changer ces fonctions ?
# Le 22 septembre 2011 à 17:39, par Sarah
En réponse à : AnythingSlider version 1.x.x
merci ! j’avais le meme problème d’affichage, et c’était bien ça.
# Le 4 novembre 2011 à 16:50, par Steph
En réponse à : AnythingSlider version 1.x.x
Un grand très merci pour cette remarque…
# Le 18 janvier à 19:34, par Renée Picard
En réponse à : AnythingSlider version 1.x.x
Au risque d’être redondante MERCIIIIIIIIIIIIIIIIIIIIIIIIII mille fois.
RP
Répondre à ce message