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

  • 4
    Guillaume

    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

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

    • Guillaume

      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 !

    • 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.js est-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.

    • Guillaume

      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

  • 4
    guillaume

    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,

     .articles ul li {clear : both ; padding: 0.40em 0.20em; }

    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 !

    • guillaume

      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 ?

    • merci ! j’avais le meme problème d’affichage, et c’était bien ça.

    • Un grand très merci pour cette remarque…

    • Renée Picard

      Au risque d’être redondante MERCIIIIIIIIIIIIIIIIIIIIIIIIII mille fois.
      RP

    Répondre à ce message

  • Bonjour
    ,
    Merci avant tout pour ce plugin. Il est comme d’autres, bien utile pour nos développements.
    J’ai fais un petit site qui a pour but de montrer quelques projets que j’ai réalisé. Ainsi je liste des écrans exemples sur des projets (ykurtz.com)

    Mais quand je liste les documents (copies d’écran) de mes rubriques (projets) et que j’utilise anythingslider pour en faire une sorte de diaporama, des fois (souvent), rien n’est affiché, et je ne vois que les contrôles du plugin. Il ignore tout simplement l’image. Quand je rafraîchi, elle réapparaît.
    Je n’arrive pas à comprendre, désolé. J’ai essayé de résoudre avec le cache mais rien.

    Est-ce lié au plugin ?

    merci
    yonnel

    Répondre à ce message

  • 4

    Bonjour,
    Bravo et merci pour ce magnifique plugin que je viens de tester et d’adopter !!!
    Il est tellement « souple » que le code d’insertion dans un squelette peut être adapté pour créer des modèles-spip permettant aux rédacteurs d’insérer le slider dans le corps du texte d’un article : ceux que je viens de créer font défiler des images (avec titre et texte descriptif) et s’écrivent <slidertypenn> où à la place de « type » il faut écrire le type de slider et à la place de « nn » le numéro de l’article contenant les images à faire défiler. Rien n’empêche de créer autant de modèles qu’on veut ... c’est simplement magique !!!
    (voir des exemples sur mon site de test http://educeco.free.fr)
    Juste deux petites questions :
    -  je ne vois pas de différence entre les types minimaliste-round et minimaliste-square
    -  en ajoutant la commande « vertical : true ; » (comme indique la doc du plugin) je n’obtiens pas de défilement vertical des slides.
    Où est mon erreur ?

    • Piero d’Houin

      Bonjour.
      Je suis très intéressé par l’intégration de AnythingSlider dans le corps du texte d’un article du type de ce que tu annonces :

      <slidertypenn>

      mais ça ne marche pas chez moi : http://emploi.spf75.org :-((
      Peux-tu me donner un exemple, svp ? Y a-t-il des espaces entre « slider » « type » et « nn » ? ou des « | » ?

      Pour info : J’ai adapté la présentation des articles du slider par mot-clef, pour n’afficher que les articles qui possèdent le mot-clef : « affich_article ».
      Voir ci-dessous.
      Cordialement
      Piero d’Houin
      ==========
      Boucle pour un affichage des articles possédant le mot-clef « affich_article »
      ==========

      <BOUCLE_liste_articles(ARTICLES){titre_mot=affich_article}>
                  <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>]
      					<br>
                          [<div class="introduction entry-content">(#INTRODUCTION)</div>]
      					<br>
                          <div class="meta-publi">
                                  <a class="lire-la-suite" href="#URL_ARTICLE"><span class="lire-la-suite-titre"><:zpip:lire_la_suite_de:> <em>#TITRE</em></span></a>
                          </div>
                  </li>
                  </BOUCLE_liste_articles>
    • Bonjour,
      voici un exemple de modèle « slidersimple.html » à placer dans le dossier « modeles » de ton squelette :

      [(#REM) slider : ne prends que les .jpg / le slider occupe tout la largeur de l'article (100%) : adapter la largeur des slides dans le filtre image_reduire ci-dessous]
          
          <B_liste>
      <div style="width:100%;">
      
      	<ul id="slider5">
      	<BOUCLE_liste(DOCUMENTS) {id_article=#ID} {extension=jpg} {par titre}>
      	<li style="width:100%; background-color:#333; color:white; text-align:center;">
      		<br />
      		#COMPTEUR_BOUCLE sur #TOTAL_BOUCLE
      		<br />
                      <BOUCLE_liste2(DOCUMENTS) {id_document}>
      		<a href="#URL_DOCUMENT"><img alt="" src="[(#FICHIER|image_reduire{470,0}|extraire_attribut{src})]" /></a>
      		<br />
                      <b>[(#TITRE|textebrut|couper{100})]</b>
      		<br />
                      <i>[(#DESCRIPTIF|textebrut|couper{400})]</i>
      		<br />
                      </BOUCLE_liste2>
      		
      	</li>
      	</BOUCLE_liste>
      	</ul>
      </div>
      <script type="text/javascript">// <![CDATA[
      	$(document).ready(function(){
      		$('#slider5').anythingSlider({
      			expand: false,
      			resizeContents: false,
      			vertical: true,
      			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: false,
      			buildStartStop: true,
      			toggleControls: false,
      			startStopped: false,
      			autoPlay: true,
      			delay : 5500
      		});
      	});
       //]]></script>
      </B_liste>

      Comme tu vois, je n’ai fait qu’adapter l’exemple fourni dans cet article de spip-contrib à mon besoin : faire défiler des images (donc utilisation de la boucle DOCUMENTS au lieu de ARTICLES et extraction de chaque image, titre et descriptif pour affichage dans le slider.
      Maintenant, tu crées un nouvel article (auquel spip donnera un numéro « nn », supposons 123) dans lequel tu télécharges des images jpg : dans le corps du texte tu insères <slidersimple123> et le tour est joué. Tu peux créer autant de modèles de slider que tu veux et les appeler comme tu veux, ex. trucmuch.html : dans un article quelconque t’ecris <trucmuch123> et ça t’affichera le slider des images de l’article n°123.
      Voili voilou ...
      Par ailleurs, je n’ai toujours pas de solution à mes deux questions ... toi, tu vois une différence entre les types minimalist-round et minimalist-square du plugin anythingslider ? Et pourquoi ça ne veut pas défiler verticalement ?

    • Pardon ... j’ai écrit une phrase incomplète ... correction :
      dans le corps du texte tu insères <slidersimple123> et le tour est joué

    • Piero d’Houin

      Fulvio, merci.
      Tes indications sont très claires. Bon sang, mais c’est bien sûr ! j’aurai du penser au modèles. C’est quand même un gros progrès de pouvoir coller ce slider où l’on veut sans avoir à créer un squelette spécifique pour 1 article.
      Cela répond à la remarque du 7 août de Cedric Morin.

      Voir la page : http://emploi.spf75.org/Journee-Portes-Ouvertes-a-Ramey.html

      Pour tes questions :
      -  je ne vois pas de différence entre les types minimaliste-round et minimaliste-square C’est énorme la différence :-)))) Dans minimaliste-round les bulles de défilement sous l’image (qui indiquent sur quelle image on est par rapport à la totalité des images chargées) sont rondes. Dans minimaliste-square elles sont ... vertes (mais non, je plaisante elles sont carrées)
      -  vertical : true ; : pas de réponse. J’ai inclus cette commande, recalculé la page, vidé le cache, fait deux fois à cloche-pied le tour de mon bureau, passer l’argument en false, puis de nouveau en true. Pas de changement.

      Pour résumer : AnythingSlider est vraiment le meilleur slider que j’ai expérimenté pour SPIP. En particulier par rapport à Nivo Slider qui est pas mal mais qui ne redimensionne pas les images à la volée.
      Pour le mettre ce plugin en œuvre, il faut savoir :
      -  Installer un plugin
      -  Mettre une boucle dans un article (voir l’exemple de « boucle à insérer dans un squelette » dans le chapitre Fonctionnement de cette page)
      ou
      -  Créer un fichier comme l’indique Fulvio par exemple slidersimple.html à placer par FTP dans SPIP/squelelettes/modèles/slidersimple.html
      -  Dans l’interface privée/Configuration réglage de AnythingSlider cocher la ou les présentations et l’indiquer aussi dans le script - exemple : theme : ’simple’,

    Répondre à ce message

  • 1

    Bonjour,

    Mmmm, et pour un débutant un peu paumé qui a un squelette d’installé (Sarka-Spip) et qui veut afficher ce slider à partir d’un portfolio d’images chargées sur un article, il fait comment ?

    Pas familier avec la notion squelette-noisette, je veux juste utiliser le plugin pour afficher le slider dans mon article : j’ai loupé une étape ? Si on me répond : « plugin-in avec truc Aveline », pourquoi installer 2 plugins pour afficher un « simple » slider d’images ?

    Pas évident, un peu de lumière serait bienvenue. Merci pour vos confirmations et explications.

    • Ce plugin est destiné à des utilisateurs confirmés sachant modifier leur squelettes et ayant une connaissance de HTML et de JavaScript.

      Dans le cas de Sarka-SPIP, il faut voir si d’autres utilisateurs de ce squelette ont été confrontés au même souci. Je ne crois pas que ce squelette prévoit une utilisation conjointe avec AnythingSlider : cela signifie qu’il faudra développer soit une personnalisation, soit une surcharge. A voir donc en fonction de votre niveau et/ou avec les autres utilisateurs du squelette sus-mentionné. cf http://www.sarka-spip.net/

      Aveline + noiZetier constituent un squelette en tant que tel (comme Sarka-SPIP), modulaire (chaque petit morceau de page étant appelé une noisette). Pour les utilisateurs de Aveline, la compatibilité avec AnythingSlider est déjà prévue. Mais si vous utilisez Sarka-SPIP, cela ne vous concerne pas.

      Cordialement

    Répondre à ce message

  • 1

    Il y a deux choses que je n’arrive pas à faire :

    -  en me basant sur la page de démo j’ai créé un slider.html dans lequel j’ai modifié la largeur du logo, en mettant en paramètre [(#LOGO_ARTICLE||image_reduire{350})] (au lieu de 150). Mais s’il n’y a pas de logo, ou un texte très court, alors la hauteur du slider varie. Je voudrais rendre cette hauteur fixe. Est-ce possible ?

    -  Il y a des numéros que l’on peut cliquer pour afficher une vue du slider. Je n’ai pas réussi à différencier le numéro de la vue active. Est-ce possible en css ? Ou faut-il bouger autre chose ?

    • J’ai fini par régler le problème en recopiant anythingslider.css dans mon dossier squelettes/css et en modifiant :
      -  pour la hauteur : la classe div.anythingSlider .anythingWindow, en y remplaçant la valeur height:auto; par la valeur de mon choix en px...
      -  pour faire ressortir le numéro de la vue active, j’ai surchargé une classe en rajoutant cette ligne dans le fichier

      div.anythingSlider.activeSlider .anythingControls ul a.cur { background-color: #028553; }

      Je ne sais pas pourquoi je n’arrivais pas à voir où faire les modifs avec firebug... J’ai fini par y arriver en tâtonnant ^^

    Répondre à ce message

  • Juste pour dire :
    Chapeau ! - Merci ! - Génial !

    Répondre à ce message

  • 1

    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

    • Bonjour Cédric,

      insérer les CSS et javascript uniquement sur les bonnes pages est en effet une bien meilleure démarche et cela évite d’avoir à faire un pipeline anythingslider_charger pour charger les scripts optionnels.

      Il faudrait clairement fusionner les deux plugins (celui sur la zone et celui que tu as commencé à développer) pour reprendre le fonctionnement que tu proposes, étendu aux scripts optionnels.

      Pour le moment, je n’ai absolument pas de temps pour m’en occuper (je suis plongé dans les démarches administratives et un déménagement à organiser en afrique du sud). S’il y a un besoin urgent, tu (ou un autre volontaire) peux modifier tout ce que tu veux sur la zone. Pour ma part, je n’aurai du temps qu’en septembre pour m’y pencher.

      Bien amicalement

    Répondre à ce message

  • 4

    Merci pour ce plugin.
    En cours d’utilisation sur www.la-laddh.org - SPIP 2.1.10 [17656]

    Par contre j’ai remarqué certaines difficultés à appeler les thèmes (même si cochés dans la config du plugin), les thèmes theme-construction.css, theme-metallic.css, theme-minimalist-round.css n’apparaissent pas !!
    seuls fonctionnent :
    theme-cs-portfolio.css
    theme-minimalist-square.css
    theme-simple.css

    Ce qui est déjà pas mal !

    Merci et @+

    • Autre remarque, fonctionne mois bien sur les pages (contenu en html) en langue arabe (voir : http://www.la-laddh.org/?lang=ar).

      @+

    • Je viens de refaire un test : tous les thèmes cochés sont bien chargés dans la page. Êtes vous sur d’avori appelé correctement le thème dans le script ? Il faut mettre juste le nom du thème sans theme- avant, par exemple theme:'metallic'.

      Pour les langues de droite à gauche, il y a une option playRtl, voir https://github.com/ProLoser/Anythin.... Je crois qu’il y a aussi une option pour inverser les flèches de navigation. Mais il faut voir ça sur la doc du script.

      Cordialement

    • Bravo pour cette nouvelle version avec des exemples clairs.

      Si ça peut aider, pour intégrer le slider, je me suis servi de la page exemple du plugin « page-demoanythingslider.html » je l’ai renommée « slider1.html » et je l’ai intégrée (j’utilise zpip) dans le dossier inclure ( monsite\squelettes\inclure\slider1.html). Dans une page-sommaire je l’ai intégré au moyen d’un inclure :

      <div>
      	 <INCLURE{fond=inclure/slider1}>
      	</div>

      Et ça marche très bien !

      Comme personnalisation j’ai juste réduit la taille de l’image de [(#LOGO_ARTICLE||image_reduire{400})], pour mon besoin 400 était suffisant (le texte de l’article se met en L autour de l’image)

      Sans aucun paramétrage supplémentaire ça s’intègre parfaitement dans un zpip de base. Sinon si ça ne marche pas avec un thème il faut essayer avec un autre. Avec « Keep It Simple » ça passe nickel ! (avec d’autres ou alors... trop trifouillés par mes soins, c’était plus compliqué :D)

      Ensuite en se servant de la doc en ligne on peut modifier quelques paramètres, par exemple j’ai ajouté la ligne autoPlay: true, et modifié « delay », question de goût ^^

      J’en profite pour poser une question est-il possible d’intégrer dans une même page deux sliders ? Par ex slider 1 et slider1 ? J’ai l’impression que non (en lisant ’article j’avais cru le contraire, mais je n’y suis pas arrivé ?)

      Dernier commentaire ; ça serait bien de signaler dans la doc du plugin que c’est porté en SPIP, avec un lien vers cet article ;)

      A propos ce serait bien de traduire cette doc et de la mettre dans jquery.info par ex. Si quelqu’un est d’accord pour le mettre en ligne là je peux aider à la traduction.

      En tout cas bravo pour cette intégration à Spip !

    • Il est possible de mettre plusieurs sliders sur une page. Il suffit de faire plusieurs listes HTML avec un identifiant différent sur chaque <ul> puis d’appeler plusieurs fois le script anythigslider avec ces différents identifiants.

      Cordialement

    Répondre à ce message

  • 2

    Salut

    Votre plugin est très cool.

    J’ai installer le plugin mais je ne vois pas l’effet sur mon site.

    Cependant je voudrais savoir comment insérer les slides s’affiche dans une partie spécifique du site ?

    • Bonjour,

      ce plugin se contente de fournir et d’inclure dans les en-têtes HTML des pages les fichiers javascript et CSS des pages. Il n’ajoute pas automatiquement un slider dans les pages.

      Il faut soit que votre squelette prévoit des sliders pour AnythingSlider, soit que vous modifier vos squelettes pour créer un ou plusieurs sliders.

      Un slider est composée d’une liste HTML (balise <ul>) contenant les différents slides et d’un appel javascript en jQuery demandant à appliquer AnythingSlider sur cette liste.

      Vous trouverez un exemple de code dans cette page de documentation. Pour plus de détails sur la manière d’appeler AnythingSlider, il faut vous référer à la documentation du script : https://github.com/ProLoser/Anythin....

      Cordialement

    • Merci pour tes conseils mais c’est exactement ce quej’ai fait ! (sans theme, et toute le reste...)
      En effet tout est chargé dans lapage mais à la navigation, les choses ne se déroulent pas si bien que ça sur le site en version arabe.

      Bravo encore pour ce superbe plugin.

      @+

    Répondre à ce message

  • 1
    florent

    Bonjour,

    Quelqu’un pourrait-il expliquer simplement comment intégrer anythingslider à son site spip ? Je suis débutant en spip donc si quelqu’un connaît la procédure je suis preneur.
    PS : j’utilise le squelette maparaan (base Zpip)
    Merci

    • Bonjour,

      ce plugin se contente de fournir et d’inclure dans les en-têtes HTML des pages les fichiers javascript et CSS des pages. Il n’ajoute pas automatiquement un slider dans les pages.

      Il faut soit que votre squelette prévoit des sliders pour AnythingSlider, soit que vous modifier vos squelettes pour créer un ou plusieurs sliders.

      Un slider est composée d’une liste HTML (balise <ul>) contenant les différents slides et d’un appel javascript en jQuery demandant à appliquer AnythingSlider sur cette liste.

      Vous trouverez un exemple de code dans cette page de documentation. Pour plus de détails sur la manière d’appeler AnythingSlider, il faut vous référer à la documentation du script : https://github.com/ProLoser/Anythin....

      Cordialement

    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