AnythingSlider version 1.x.x

Ce plugin permet d’insérer facilement le script AnythingSlider dans votre SPIP pour l’utiliser dans vos squelettes. Il peut être également être utilisé comme ressource pour d’autres plugins (voir par exemple AnythingSlider pour Aveline).

ATTENTION : plugin pour utilisateur averti.

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.

Notes

[1Cette feuille de style est insérée dans un commentaire conditionnel pour Internet Explorer 7 ou inférieur.

[2En effet, les CSS des thèmes doivent être chargées avant la CSS anythingslider-ie.css.

Discussion

21 discussions

  • 9

    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 :

      <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 !

    • 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 !

    • Christian Julia

      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 !

    • Christian Julia

      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

  • 5
    François M

    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,

    • François M

      La documentation indique que pour le fonctionnement startStop, il faut ajouter le comportement autoplay=true ; Et ainsi, ça fonctione en 3.0x :).

    • François M

      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 :

      Pour info, avant que tu ne démarres le chantier de cette nouvelle version, j’avais commencé avec tetue une autre version https://github.com/Cerdic/anythingslider-for-spip avec une approche de l’insertion du slider proche de ce que je fais aussi dans le plugin video-accessible.

      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.

      Un modèle par défaut, à enrichir, montre comment insérer un slider uniquement en html, sans aucune ligne de javascript. Un attribut data-slider permet de spécifier au cas par cas les paramètres de chaque slider, ce qui inclu un mécanisme de chargement de la bonne CSS.
      Il reste le cas des librairies complémentaires si nécessaire à traiter. Je pense simplement permettre de le spécifier dans les options fournies dans data-slider.

      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

  • 1
    Glika Tchu

    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 :

      <object width='#GET{largeur}' height='#GET{hauteur}'>
      <param name='movie' value='#URL_DOCUMENT' />
      <param name='src' value='#URL_DOCUMENT' />
      <param name="wmode" value="transparent" />
      [(#ENV*|env_to_params)]
      <embed src='#URL_DOCUMENT' [(#ENV*|env_to_attributs)] width='#GET{largeur}' height='#GET{hauteur}'></embed></object>

      Cela évite que la vidéo ou anythingslide passe par dessus le menu.

    Répondre à ce message

  • dominique robin

    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

  • dominique robin

    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

  • juan-luis

    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

  • 1

    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

  • 5
    crazyspip

    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
    • 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

    • crazyspip

      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

  • 6

    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...

      <li class="item hentry" style="width:100%;">
      	<BOUCLE_affichagedoc(DOCUMENTS){id_document}>
      	[(#MODELE{video,document=#ID_DOCUMENT,largeur=682,hauteur=492})]
      	</BOUCLE_affichagedoc>
      </li>
    • 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 :

  • 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