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.
Discussions par date d’activité
21 discussions
J’ai un pb avec anythingslider ... je n’arrive pas à trouver pourquoi à partir de la 10e image les transitions se font avec un défilement très rapide de toutes les images du slider alors qu’avant la 10e 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 11e 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 !
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
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.
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
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 :
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 !
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
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 !
Bonjour. Un grand merci à Fulvio pour son astuce. J’avais le même problème avec SPIP 2.1.19 à partir de la 15è image. J’ai téléchargé la version jquery-1.6.3.js et l’ai placée dans un dossier « javascript » de « squelettes » en le renommant « jquery.js » et j’ai supprimé « cache-js » dans « loc ». Maintenant ça fonctionne bien. Vraiment merci car c’était une limitation un peu frustrante.
Ravi que cela puisse aider !
Il reste, tout de même, une limite de taille mémoire maxi allouée au slider ... dans des articles récents j’avais des diaporamas d’environ 50 images de 960px de large : ils bloquaient tous exactement à la 33e image ...
J’ai fini par réduire les images à 720px de large pour les faire défiler toutes : je m’en contente largement !
Oui, c’est suffisant comme largeur. Moi, je les cadre à 700px pour la largeur : http://www.christianjuliaphotos.fr/spip.php?article206
Merci encore pour votre aide précieuse.
Répondre à ce message
Bonjour,
je n’arrive pas à comprendre la façon dont if faut procéder por modifier l’apparence (=les thèmes) d’anything slider...
J’ai lu et relu la doc ci-dessus mais il y a un truc qui m’échappe : comment faut-il procéder exactement pour charger un thème ? Quelqu’un pourrait indiquer la démarche (et éventuellement compléter la doc : il y a visiblement un bug dans la partie Note de version (phrase incomplète) ?
Merci beaucoup d’avance
Répondre à ce message
Bonjour,
A quand une version 3.0 du plugin ? La majorité des fonctionnalités marche lorsqu’on augmente la compatibilité du plugin à 3.0x, sauf le startStop, qui est pourtant extrèmement utile.
Je tente de comprendre pourquoi ça ne marche pas, et je veux bien faire l’adaptation du plugin, mais je pens qu’il me manque des clefs ...
Si vous avez une idée, merci pour votre aide,
La documentation indique que pour le fonctionnement startStop, il faut ajouter le comportement autoplay=true ; Et ainsi, ça fonctione en 3.0x :).
http://blog.ludikreation.com/2009/11/18/jquery-plugin-anythingslider-slideshow/.
Et rajouter le script jquery-1.2.6.pack.js dans le header.
Bonjour,
la prochaine étape consite à fusionner cette version et celle dévelopée par Cédric (https://github.com/Cerdic/anythingslider-for-spip) en une v2 compatible spip 3.
Comme toujours, le principal problème est celui du temps disponible.
Bien cordialement
Vous avez fait un TODO ? Ca aiderait pour voir si je peux vous aider ...
Une TODO n’a pas été écrite. On peut se référer néanmoins au message de Cédric :
Il faudrait dès lors reprendre le fonctionnement proposé par Cedric tout en l’élargissant aux différents thèmes et aux scripts optionnels. Cela permettra de se passer du pipeline anythingslider_charger et de ne charger les scripts qu’au besoin.
Bien sur, c’est également l’occasion de passer à la dernière version stable du slider. Aussi ajouter les thèmes suplémentaires dispo sur https://github.com/CSS-Tricks/AnythingSlider-Themes .
Il y aura rupture de compatibilité donc il s’agira d’une nouvelle branche V2.
Cordialement
Répondre à ce message
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 !
Pour ceux qui rencontrent le même problème :
il faut insérer :
<param name="wmode" value="transparent" />
dans le fichier Prive>modele>video.html comme ceci :Cela évite que la vidéo ou anythingslide passe par dessus le menu.
Répondre à ce message
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
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
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
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
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
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 :
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
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...
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 !!!
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 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
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 ?
Salut
tu as essayé d’insérer une vidéo dans un article et de l’afficher ?
www.fsl-nancy.fr
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
tu peux peut etre aussi voir du coté de ce plugin : Plugin-Video-s ?
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...
probleme résolu ?
pour info, un site bien utile pour ce plugin : http://proloser.github.com/AnythingSlider/
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
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 : |