AnythingSlider version 2.x.x

Ce plugin permet d’utiliser aisément le script AnythingSlider dans ses squelettes.

ATTENTION : plugin pour utilisateur averti.

Note : le numéro de version du plugin est différent du numéro de version du script embarqué.

Note de version

Cette version 2 du plugin fonctionne de manière totalement différente des précédentes versions, adoptant le fonctionnement proposé par Cédric sur GitHub.

Dans cette version 2, le code javascript et CSS d’AnythingSlider n’est pas chargé sur toutes les pages mais seulement pour celles utilisant un slider.

Le parti pris est de considérer qu’on n’a a priori jamais de slider sur toutes les pages du site, et qu’insérer le JS et les css sur tout le site est dispendieux. Du coup on insère tout cela de manière intelligente uniquement quand un slider est présent dans la page, repéré par la classe slider-anythingslider.

AnythingSlider

Pour une présentation et une démo d’AnythingSlider, voir http://css-tricks.github.com/Anythi....

Le plugin intègre également les thèmes additionnels développés pour AnythingSlider (démo) distribués sur GitHub.

Les différentes options du script ne sont pas détaillées ici. Merci de se référer à la documentation d’AnythingSlider.

Insérer un slider dans son squelette

Un slider peut facilement être inséré dans un squelette, sans une seule ligne de javscript, de la manière suivante :

<B_slider>
<div class="slider-conteneur liste article" style="width:500px;">
  <ul class="slider-anythingslider liste-items">
    <BOUCLE_slider(ARTICLES) {!par date}{par num titre} {0,10}>
    <li class="panel">
                ....  contenu de chaque item .....
    </li>
    </BOUCLE_slider>
  </ul>
</div>
</B_slider>

Le plugin détecte automatiquement les listes portant la classe slider-anythingslider, charge le javascript nécessaire et initialise le slider. Bien entendu, on peut boucler sur ce que l’on veut.

Transmettre des options au slider

Les options à transmettre au slider peuvent être précisées via un attribut data-slider à ajouter au ul.slider-anythingslider. Par exemple :

<B_slider>
<div class="slider-conteneur liste article" style="width:500px;">
  <ul class="slider-anythingslider liste-items"
  data-slider='{
      startText : "Démarrer",
      stopText: "Arrêter",
      buildStartStop: false,
      buildNavigation: true
    }'>
    <BOUCLE_slider(ARTICLES) {!par date}{par num titre} {0,10}>
    <li class="panel">
                ....  contenu de chaque item .....
    </li>
    </BOUCLE_slider>
  </ul>
</div>
</B_slider>

Pour la liste complète des options disponibles et de leur valeur par défaut, voir la documentation d’AnythingSlider.

Changer le thème du slider

Pour changer le thème du slider, on ajoutera à data-slider une option css contenant le chemin du fichier CSS du thème. Il est inutile de préciser le paramètre theme, ce dernier étant calculé automatiquement d’après le nom de la CSS.

Exemple :

<B_slider>
<div class="slider-conteneur liste article" style="width:500px;">
  <ul class="slider-anythingslider liste-items"
  data-slider='{
      css:["#CHEMIN{lib/anythingslider/css/theme-simple.css}"],
      buildStartStop: false,
      buildNavigation: true
    }'>
    <BOUCLE_slider(ARTICLES) {!par date}{par num titre} {0,10}>
    <li class="panel">
                ....  contenu de chaque item .....
    </li>
    </BOUCLE_slider>
  </ul>
</div>
</B_slider>

Personnaliser les onglets de navigation

Par défaut, et pour les thèmes les prenant en charge, les onglets de navigation sont numérotés séquentiellement. Il est cependant possible de les personnaliser en ajoutant dans chaque <li></li> un élément avec la classe slider-nav contenant le contenu de l’onglet de navigation. Par exemple :

<B_slider>
<div class="slider-conteneur liste article" style="width:500px;">
  <ul class="slider-anythingslider liste-items"
  data-slider='{
      css:["#CHEMIN{lib/anythingslider/css/theme-default1.css}"],
      buildStartStop: false,
      buildNavigation: true
    }'>
    <BOUCLE_slider(ARTICLES) {!par date}{par num titre} {0,10}>
    <li class="panel">
                ....  contenu de chaque item .....
      <span class="slider-nav" style="display: none;">[(#TITRE|couper{20})]</span>
    </li>
    </BOUCLE_slider>
  </ul>
</div>
</B_slider>

Utilisations avancées

Si pour des usages plus avancés d’AnythingSlider (voir documentation d’AnythingSlider), vous avez besoin de charger plusieurs CSS et/ou script JS supplémentaires, ces derniers peuvent être indiqués via les options css et js de l’attribut data-slider.

Discussion

35 discussions

  • Bonjour,
    J’utilisais AnythingSlider 2.0.2 avec la version 3 de SPIP et aprés avoir fait evoluer mon site vers la version SPIP 4.2.4, je comprends que AnythingSlider 2.0.2 n’est pas compatible.
    Je suis en PHP 8.2.
    Est-ce que ce plugin évolura pour être compatible avec SPIP 4.2.4 ?
    Merci

    Répondre à ce message

  • 2

    Bonjour,

    Est-ce que ce plugin a un avenir sous Spip 4 ?
    Pour l’instant, avec Spip 4.0.0-alpha, même en changeant les bornes de compatibilité, il reste impossible à installer : « version incompatible ».

    Merci.

    • Je ne sais pas trop s’il est encore utilisé. Pas dit qu’il y ait une demande / un besoin pour Spip 4.

    • En fait, le plugin fonctionne sous Spip 4.0.0-alpha.
      Je m’étais trompé de fichier pour les bornes de compatibilité.
      J’ai bien compris que ce plugin est peu utilisé, mais pour faire défiler des articles en « diaporama » sur la Une d’un site, je n’ai pas trouvé plus simple...

    Répondre à ce message

  • 2

    Bonjour,

    J’ai eu le même problème que Joce, jeanmarie et jacot concernant la hauteur du conteneur de classe .anythingSlider-default.

    Je pense qu’il s’agit d’un bug du plugin qui est mal initialisé (valeurs par défaut).

    En effet, en étudiant l’exemple fourni par Jaco, j’ai constaté que la seule variable resizeContents initialisée à false suffisait à contourner ce bug d’affichage.

    En d’autres termes, d’après moi, le code minimal nécessaire et suffisant pour afficher correctement les slides (sans aucun besoin d’ajouter .anythingSlider-default height : XXXpx !important ;) est :

    <ul class="slider-anythingslider" data-slider='{
        resizeContents: false
      }'
      <li class="panel">...</li>
      <li class="panel">...</li>
      ...
      <li class="panel">...</li>
    </ul>
    • MERCI !

      Je devenais fou avec ce truc, mais pourquoi c’est pas par défaut !!!

    • Désolé, je ne suis plus de loin ce plugin.

      Ne pas hésiter, si pertinent, de le faire évoluer sur la Zone.

    Répondre à ce message

  • 2

    bonjour

    comment fonctionne la fonction image_reduire avec les 2 valeurs entre les accolades ? J’ai des images qui se réduisent et d’autres qui n’apparaissent pas en entier.
    Est-ce également lié à ma class=« panel » dans laquelle la fonction est appelée ?

    Merci pour vos retours

    • j’ai refait mon slider
      Du coup j’ai mon image assez grosse et le texte en dessous (j’ai associé mes articles avec le mot clé slider pour avoir les articles que je veux dans le diaporama)

      voici le code si ça intéresse certains, à ajuster selon vos envies...

    • J’ai refait mon slider,et ça marche (fixe image + texte)

    Répondre à ce message

  • Bonjour,
    J’ai un problème de dimension
    Je ne comprends pas où sont calculés width et height
    Voir capture écran
    Pouvez-vous m’aider
    Merci

    Répondre à ce message

  • Bonjour,

    Lorsque je lance une boucle, le slider s’affiche mais suivi d’un un espace vide correspondant au nombre de résultats trouvés.

    Le premier élément est bien remonté et les boutons de navigation opérationnels mais beaucoup trop bas dans un espace vide .

    Merci de votre aide.

    Répondre à ce message

  • 2

    Bonjour,

    J’essaye d’utiliser ce plugin pour afficher des brèves. J’ai mis le paramètre « showMultiple : 2, » mais je n’ai qu’une seule brève. Si je règle la largeur max des <li> en css a une valeur fixe (ie. 25rem) j’arrive à voir plusieurs brèves mais ça ne fonctionne que sur une largeur de viewport fixe...
    Je travaille en local pour le moment, désolée, ce n’est sûrement pas très explicite mais si quelqu’un peut m’aider....

    Merci beaucoup d’avance.

    Voici le code de mon squelette :

    <B_breves>
    	<div class="menu menu_breves">
    	<div id="titre_breves" class="table">
    		<h2><:dernieres_breves:></h2>
    		<a rel="nofollow" href="spip.php?page=actus"><:voir_toutes_breves:></a>
    	</div>
    	<ul class="slider-anythingslider table"  
    			data-slider='{
    				                showMultiple : 2,
    						buildNavigation : false,
    						buildStartStop : false,
    						resizeContents : true,
      						}'>
    	        <BOUCLE_breves(BREVES) {!par date}{age <180}>
    		        <li class="breve">
    			        <a href="#URL_BREVE">
    				     [<h3>(#TITRE|couper{80})</h3>]
    				     [<small>(#DATE|affdate_jourcourt)</small><br/>]
    				     [<h4>(#SOUSTITRE|couper{150})</h4>]
    				     [<span>(#INTRODUCTION|couper{200})</span>]
    			        </a>
    		       </li>
    	        </BOUCLE_breves>
              </ul>
    	</div>
    </B_breves>

    la partie de css qui s’applique :

    /* apparence des brèves en page d'accueil */
    
    /*------------- flèches */
    .anythingSlider-default .arrow {
    	position: absolute !important;
    	top:80% !important; 
    }
    
    .anythingSlider-default .back {
    	left:-80px !important; 
    }
    
    .anythingSlider-default .back a {
       background: url(img/sprite.png) no-repeat scroll -8px -46px !important;
    }
    .anythingSlider-default .forward {
    	left:-40px  !important; 
    }
    .anythingSlider-default .forward a{
       background: url(img/sprite.png) no-repeat scroll 13px -46px !important;
    }
    
    .anythingSlider-default .arrow a {
    		background-color: rgba(173, 217, 224, 254) !important;
    		width:30px !important;
       	display: block !important;
    		height: 30px !important;
    		margin: 0px  !important;
    }
    
    /*----------------- blocs brèves */
    
    .anythingSlider-default {
    	padding: 0 !important;
    }
    .anythingSlider-default.activeSlider .anythingWindow {
        border-color: #eee !important;
    }
    
    div.menu_breves ul li {
    	border-top: solid 1px #eee;
    	border-bottom: solid 1px #eee;
    	border-left: solid 1px #eee;
    	border-right: solid 1px #eee;
    }
    
    div.menu_breves ul li.breve a {
    	padding: 1rem;
    }
    
    div.menu_breves ul li.breve a:hover {
    	background-color: #eee;
    }
    
    div.menu_breves ul li.breve a:hover * {
    	color:#e17000;
    }
    
    div.menu_breves ul li.breve a::after {
    	content: '';
    	background: url("img/sprite.png") no-repeat scroll 27px -76px;
    	display: block;
    	height: 15px;
    	width: 15px;
    	bottom: 5px;
    	right: 5px;
    }
    
    div.menu_breves ul li.breve a:hover::after {
    	background: url("img/sprite.png") no-repeat scroll 50px -76px;
    }
    
    
    div.menu_breves ul li.breve span, div.menu_breves #titre_breves a {
    	color: #003C69;
    }
    div.menu_breves ul li.breve h3, div.menu_breves h2 {
    	color: #e17000;
    	font-weight: bold;
    	margin-bottom: 1em;
    }
    
    div.menu_breves h2 {
    	text-transform: uppercase;
    	font-size: 1rem;
    	margin: 1rem auto;
    }
    
    div.menu_breves #titre_breves a {
    	background-color: #eee;
    	display: block;
    	padding: 2%;
    	text-align: center;
    }
    
    div.menu_breves #titre_breves {
    	border-top: solid 1px #eee;
    	border-bottom: solid 1px #eee;
    	vertical-align: middle;
    	text-align: center;
    	background-color: #eee; 
    }
    
    div.menu_breves h3 a { text-align: left;}
    • je ne sais pas avec ton code mais

      en mettant dans data-slider : showMultiple :2, changeBy : 1,
      avec des images cela prend bien 2 images et une seule change à la fois ... par contre je n’arrive pas à avoir le responsive dans ce cas

    • la doc pour un slider multiple est la
      http://jsfiddle.net/Mottie/ycUB6/40/

    Répondre à ce message

  • Bonjour,
    est-ce que le plugin va être porté en spip 3.2 ?
    merci

    Répondre à ce message

  • Bonjour,

    Merci pour cet excellent slider !

    Maintenant, que j’ai réussi à l’implémenter dans mon site, je souhaiterais pouvoir utiliser les options avancées mais je ne sais ni où ni quel code je dois insérer pour utiliser le animate.css

    Voici ce que j’utilise pour le moment mais j’aimerais aussi jouer avec les textes...

    Merci

    <B_slider>
    <div class="slider-conteneur liste article" style="width:650px;height:280px;">
    	<ul class="slider-anythingslider liste-items" style="width:650px;height:280px;"  data-slider='{
    	  css:["#CHEMIN{lib/anythingslider/css/theme-polished.css}"],
    	  js :["#CHEMIN{lib/anythingslider/js/jquery.anythingslider.fx.caption.js}"],
    	  js :["#CHEMIN{lib/anythingslider/js/jquery.anythingslider.fx.min.js}"],
    	  js :["#CHEMIN{lib/anythingslider/js/jquery.easing.1.2.js}"],
    	  infiniteSlides : true,
    	autoPlay : true,
    	pauseOnHover : true,
    	delay : 8000,
    	resumeDelay : 1000,
    	delayBeforeAnimate : 0,
    	autoPlayLocked : true,
    	buildStartStop : true,
    	enableStartStop : true,
    	  mode : "fade",
    	  startText : "Démarrer",
    	  stopText: "Arrêter",
    	  buildNavigation: true
    	}'
    	[(#REM) Affiche les 10 articles les plus récents associés au mot-clé : slider]	
    	<BOUCLE_slider(ARTICLES){branche}{id_mot=229} {!par date} {doublons} {0, 10}>
    	<li>
    	<BOUCLE_image(DOCUMENTS){id_article}{mode=image}{titre==^spip\_}{0,1}>
    	 [<a href="#URL_ARTICLE">(#FICHIER|image_reduire{650}) </a>]
    	</BOUCLE_image>
    	<div class="caption-right" >[(#DESCRIPTIF)]</div>
    	</li>	
    	</BOUCLE_slider>
    	</ul>
    </div>
    </B_slider>

    Répondre à ce message

  • Bonjour,
    j’ai un slider en bandeau du site
    Au chargement de la page, on voit le chargement des images une après l’autre avec le css du li avant de les voir comme il faut dans le slider .
    Savez vous comment faire pour les précharger et éviter cet effet
    pas de pb pour des sliders « moins large ».
    merci

    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