Nivo Slider

Nivo Slider pour SPIP permet d’intégrer des diaporamas en JQuery dans vos articles et squelettes.

Intégration pour SPIP du script Nivo Slider.

Introduction

Nivo Slider pour SPIP permet d’agrémenter facilement vos articles et squelettes de diaporamas en JQuery.

Dépendances

Nécessaire :
-  # INSERT_HEAD
-  CFG
-  JQuery 1.4+

Recommandé :
-  Palette
-  FancyBox

Installation

  1. Téléchargez l’archive dans le dossier plugins de votre SPIP
  2. Activez le plugin depuis l’espace privé.

N’oubliez pas de sélectionner une méthode de fabrication des vignettes dans Configuration > Fonction avancées de SPIP !

Description

Ce plugin ajoute les balises nivosliderXX, nivoslider_rubXX et nivoslider_doc|id=n,... à utiliser avec ou sans paramètres dans vos articles et squelettes.

Par défaut le modèle nivosliderXX utilise le portfolio d’un article mais ce comportement peut être changé facilement en modifiant le paramètre vu=non du fichier modele/nivoslider.html .

Utilisation

Pour afficher tous les documents du portfolio de l’article 24 depuis un article :

<nivoslider24|controlNav=false>

Dans un squelette on utilise la syntaxe suivante (sans argument id_article) pour afficher le portfolio de l’article par défaut (id_defaut défini avec CFG) :

[(#MODELE{nivoslider})]

Ou si l’on souhaite utiliser l’article 32 comme réservoir d’images depuis un squelettes :

[(#MODELE{nivoslider}{id_nivoslider=32})]

Pour fabriquer un diaporama des documents n°4,2,5,7,9 avec l’effet ’sliceUp’ sans puces depuis un article :

<nivoslider_doc|id=4,2,5,7,9|effect=sliceUp|controlNav=false>

Le même en squelette :

[(#MODELE{nivoslider_doc}{id='4|2|5|7|9'}{controlNav=false}{captionOpacity=0})]

Liens

Pour ajouter un lien sur une image on renseigne dans le champ description du fichier :
-  article31313 pour pointer vers l’article 31313 (forgera le lien spip.php ?article31313)
-  doc43129 pour déclencher fancybox (si installé)
-  Un lien type http://www.perdu.com/ ou ftp://ftp.lip6.fr

Paramètres

  • effect
  • slices
  • animSpeed
  • pauseTime
  • directionNav
  • directionNavHide
  • controlNav
  • keyboardNav
  • pauseOnHover
  • captionOpacity
  • imageAlign
  • imageBackcolor
  • controlNavThumbs
  • controlNavThumbsWidth
  • controlNavThumbsHeight

Configuration

Ce formulaire permet de modifier rapidement les options d’affichage.

Conditions d’utilisation

Ce plugin est une adaptation pour SPIP du script « jQuery Nivo Slider v2.5.2 » créé par Gilbert Pellegrom, distribué sous licence MIT.

Pour plus d’informations, reportez-vous au site https://themeisle.com/plugins/nivo-slider

Compatibilité

Testé avec :
-  Firefox
-  Chrome
-  IE
-  Opera

Important !

Lisez la doc et tous les messages du forum avant de poser une question, la réponse est peut-être sous vos yeux !

Si vous remarquez un dysfonctionnement, souhaitez dire bonjour ou demander une amélioration n’hésitez pas à l’exprimer dans le forum...

Discussion

203 discussions

  • 3

    salut
    bonsoir
    bonjour

    je viens de mettre a jour mes plugins et
    nivoslider me fait tourner une image qui n,est bas dans le portfolio

    cache vider de partout en et sur le site et sur l’hébergement

    voila voila

    • Re-bonjour

      suite à mise à jour du plugin, il me prends toujours l’image de mon article d’accueil qui n’est
      pas mis dans le porfolio.
      ça a bien fonctionné 3 ans, ben quoi qui a changé ???
      j’ai enlevé l’image puisque l’on peut vivre sans, mais j’aimerai bien la remettre

      amicalement
      momo

    • Bonjour,

      Je viens de faire une migration d’un site sous Spip 2 à Spip 3.1 et j’ai eu le même problème : toutes les photos s’affichaient et pas seulement celles du portfolio. J’ai l’impression que le mode document n’est plus pris en compte par défaut quand on passe par la balise incluse dans un squelette.

      J’ai résolu le problème en passant le mode comme paramètre de la balise :

      [(#MODELE{nivoslider}{mode=document})]
    • Yesss ! Et merci pour l’info, effectivement, il faut passer mode=document et mes problèmes semblables aux vôtres sont rentrés dans l’ordre !

    Répondre à ce message

  • Bonjour,
    est-il possible de faire fonctionner le plugin ordoc avec le NivoSlider 3.2.8 ?
    je suis en 3.1.7.

    Et si oui, comment faire ??

    Merci !
    Paul

    Répondre à ce message

  • Bonjour,
    Je voudrais savoir s,il y avait des paramètres pour avoir des lightbox dans Nivo Slider ?

    Votre réponse me serais d’une grande aide ; Merci.

    Répondre à ce message

  • Bonjour,

    Avec SPIP 3.1.6, et la dernière version du plugin, il semble qu’on ne puisse pas modifier la taille des vignettes en dessous du slider :
    1) j’ai essayé via l’interface dans le back-office... rien, toujours 30x20 (d’ailleurs pourquoi 30x20 ???)
    2) également en dupliquant nivoslider_base, en le plaçant dans squelettes... toujours rien que du 30x20

    Avez-vous une solution ?
    En vous remerciant par avance ;-)

    Répondre à ce message

  • 1

    Bonjour la communauté.

    Suite à la mise à jour du plugin NivoSlider (revision = 103864), le slider ne fonctionne plus du tout sur un site, et continue à fonctionner sur un autre.

    Tous les deux sont en spip v3.1.4 [23444].

    Le site qui ne fonctionne pas utilise Sarka-SPIP 3.4.6 [102399]
    Le site qui fonctionne utilise SPIPr 0.4.15 [103913]
    Tous les autres plugins sont au dernier carat des mises à jour automatiques tout du moins.

    Le code utilisé est identique au numéro d’article prêt et à la dimension des images. Le cache a été vidé sans résultat. En annulant la révision 103864, tout rentre dans l’ordre.

    Sous Sarka-SPIP, surcharge de inc_bandeau_haut.html

    [(#REM) <!-- Bandeau Haut --> ]
    <div class="bandeau_haut">	
    	[(#PIPELINE{bandeau_haut_debut,
    		[(#ARRAY{args, [(#ARRAY{id_rubrique, #ENV{id_rubrique}})], data, ''})]}
    	)]
    	<div class="nav_bandeau">  
        	<!-- Navigation dans les langues -->
    		[(#CONFIG{sarkaspip_menus/position_langues, 4}|=={4}|oui)
    			<INCLURE{fond=noisettes/bandeau/inc_bandeau_langues}>
    		]
            <!-- Navigation dans les raccourcis -->
    		[(#CONFIG{sarkaspip_menus/position_pages, 1}|=={4}|oui)
    			<INCLURE{fond=noisettes/navigation/inc_menu_pages_speciales}{position=bandeau_haut}>
    		]
            <!-- Navigation dans les raccourcis -->
    		[(#CONFIG{sarkaspip_menus/position_formulaires, 1}|=={4}|oui)
    			<INCLURE{fond=noisettes/navigation/inc_menu_formulaires}{id_rubrique=#ENV{id_rubrique,0}}{position=bandeau_haut}>
    		]
    	</div>
    	[(#MODELE{nivoslider}	{id_nivoslider=9}{width=1200}{height=400}{effect=fade}{slices=15}{animSpeed=500}{pauseTime=6000}
    							{directionNav=false}{controlNav=false}{keyboardNav=false}{pauseOnHover=false}{imageAlign=center center}
    							{captionOpacity=0.5}{controlNavThumbs=false})
    	]
    	#SET{logo, #LOGO_SITE_SPIP}
    	[(#CONFIG{sarkaspip_bandeau/logo_reduit, 1}|=={1}|oui)
    		[(#SET{logo, [(#LOGO_SITE_SPIP|image_reduire{#CONFIG{sarkaspip_bandeau/taille_logo, 150}})]})]
    	]
    	[<a class="site_logo" href="#URL_SITE_SPIP" title="<:sarkaspip:accueil_site:>">(#GET{logo})</a>]
    	<div class="site_nom">
    		[(#CONFIG{sarkaspip_bandeau/titre_site, 1}|=={1}|oui)
    		   [<h1><a href="#URL_SITE_SPIP" title="<:sarkaspip:accueil_site:>">(#NOM_SITE_SPIP)</a></h1>]
    		]
    	   [<h2>(#CONFIG{sarkaspip_bandeau/slogan})</h2>]
    	</div>
    	<br class="nettoyeur" />
    	[(#PIPELINE{bandeau_haut_fin,
    		[(#ARRAY{args, [(#ARRAY{id_rubrique, #ENV{id_rubrique}})], data, ''})]}
    	)]
    </div>

    Sous SPIPr, surcharge de sommaire.html

    <section>
    	<header class="cartouche hide">
    		<h1>#NOM_SITE_SPIP</h1>
    	</header>
    
    	<div class="main">
    		[<div id="descriptif_site_spip">(#DESCRIPTIF_SITE_SPIP)</div>]
    		#SET{exclus,#ARRAY}
    		[(#MODELE{nivoslider}	{id_nivoslider=14}{width=1920}{height=900}{effect=fade}{slices=15}{animSpeed=500}{pauseTime=6000}
    								{directionNav=false}{controlNav=false}{keyboardNav=false}{pauseOnHover=false}{imageAlign=center center}
    								{captionOpacity=0.5}{controlNavThumbs=false})
    		]
    		<BOUCLE_art(ARTICLES){par hasard}{0,1}>
    		<INCLURE{fond=inclure/article-hero,id_article,env,ajax} />
    		#SET{exclus,#LISTE{#ID_ARTICLE}}
    		</BOUCLE_art>
    
    		<div class="liste long articles">
    		<INCLURE{fond=liste/articles-resume,articles_exclus=#GET{exclus},env,ajax} />
    		</div>
    	</div>
    
    </section>

    Votre aide est la bienvenue. Le debug est difficile car aucun code HTML est généré lorsque cela plante.

    • Par FTP, une suppression du répertoire v3.2.7, et une installation par le gestionnaire de plugin plus tard, cela fonctionne !!

      Il y a en effet plus de fichiers dans le répertoire modeles.

      La vidange du cache ne suffisait pas, il fallait aussi réinstaller le plugin.

    Répondre à ce message

  • Bonjour et bravo pour ce travail.

    J’ai déjà installé et configuré plusieurs fois le plugin sur d’autres sites.

    Mais là je bloque (Spip 3. 1.4 + Zoundation 1.0.39 + Nivoslider 3.2.7) :
    Je souhaite afficher le diaporama sur un bandeau max de 1980 x 280 px, dans la configuration du plugin, jusqu’à 1200 px, les images sont bien retaillées, au delà, l’image globale comprend la photo retaillée à 1200 à laquelle il rajoute des bandes blanches latérales alors que mes images du portfolio de l’article choisit sont en 1920 x 1080 px.

    Les cadres parents ne changent rien ?

    Merci pour vos avis et directions ...

    Répondre à ce message

  • Bonjour,

    Merci pour cet excellent plugin.

    Malheureusement, lorsque l’on affiche les documents des portfolios de depuis les articles N :

    <nivosliderN|controlNav=false>

    Il n’est pas possible de changer la largeur et la hauteur du diaporama d’article en article fixées dans le formulaire de Configuration.

    J’ai essayé de procéder comme suit par exemple :

    <nivoslider24|width=400|height=240|controlNav=false>

    Mais cela tronque le diaporama à 400 pixels de large et 240 pixels de hauteur au lieu de le redimensionner.

    Pourriez-vous adapter votre modèle « depuis les articles » afin de donner la possibilité de modifier ces dimensions de cas en cas.

    Bien cordialement

    FDG

    Répondre à ce message

  • 5

    bonsoir

    je pense que j’ai réussi mon premier nivoslider...

    avec un modèle qui affiche les images (ou logo si pas d’images) d’articles ayant un certain mot clé...

    ci-dessous le code du modèle que j’ai dénommé motcle_nivoslider par analogie avec les modèles sur article, rubrique...dont je me suis inspiré.

    (j’ai laissé tombé le codage de lien dans la description des images, car l’idée est plutôt de donner accès aux articles à travers ce slider)

    Par contre, je n’arrive pas à faire fonctionner la navigation par thumbnail... ce qui me semble dommage et n’est pas en lien avec mon modèle puisqu’elle ne fonctionne pas nonplus avec article_nivoslider...

    merci d’avance d’une piste...
    pam

    [(#REM) modèle Nivoslider pour une image par article sur mot clé: 
     - < nivosliderXX|motcle= >, alors affiche une image au hasard (sinon le logo) des articles avec mot clé
    ]
    
    [(#SET{width,[(#ENV{width, #CONFIG{nivoslider/width, 500} })]} )]
    [(#SET{height,[(#ENV{height, #CONFIG{nivoslider/height, 240} })]} )]
    [(#SET{effect,[(#ENV{effect, #CONFIG{nivoslider/effect, random} })]} )]
    [(#SET{slices,[(#ENV{slices, #CONFIG{nivoslider/slices,15} })]} )]
    [(#SET{animSpeed,[(#ENV{animSpeed, #CONFIG{nivoslider/animSpeed,500} })]} )]
    [(#SET{pauseTime,[(#ENV{pauseTime, #CONFIG{nivoslider/pauseTime,3000} })]} )]
    [(#SET{directionNav,[(#ENV{directionNav, #CONFIG{nivoslider/directionNav,true} })]} )]
    [(#SET{directionNavHide,[(#ENV{directionNavHide, #CONFIG{nivoslider/directionNavHide,true} })]} )]
    [(#SET{controlNav,[(#ENV{controlNav, #CONFIG{nivoslider/controlNav,true} })]} )]
    [(#SET{keyboardNav,[(#ENV{keyboardNav, #CONFIG{nivoslider/keyboardNav,false} })]} )]
    [(#SET{pauseOnHover,[(#ENV{pauseOnHover, #CONFIG{nivoslider/pauseOnHover,true} })]} )]
    [(#SET{captionOpacity,[(#ENV{captionOpacity, #CONFIG{nivoslider/captionOpacity,0.8} })]} )]
    [(#SET{imageAlign,[(#ENV{imageAlign, #CONFIG{nivoslider/imageAlign,'center'} })]} )]
    [(#SET{imageBackcolor,[(#ENV{imageBackcolor, #CONFIG{nivoslider/imageBackcolor,'transparent'} })]} )]
    [(#SET{controlNavThumbs,[(#ENV{controlNavThumbs, #CONFIG{nivoslider/controlNavThumbs,true} })]} )]
    [(#SET{controlNavThumbsWidth,[(#ENV{controlNavThumbsWidth, #CONFIG{nivoslider/controlNavThumbsWidth,50} })]} )]
    [(#SET{controlNavThumbsHeight,[(#ENV{controlNavThumbsHeight, #CONFIG{nivoslider/controlNavThumbsHeight,50} })]} )]
    
    [(#SET{id_rand,	#VAL{1}|rand{1000}})]
    
    [(#SET{motcle,[(#ENV{motcle,"slider"})]})]
    
    <script type="text/javascript">/*<![CDATA[*/
    	jQuery(function() {
    		$('#slider_#GET{id_rand}').nivoSlider({
    			[effect:'(#GET{effect})',]
    			[slices:(#GET{slices}),]
    			[animSpeed:(#GET{animSpeed}),]
    			[pauseTime:(#GET{pauseTime}),]
    			[directionNav:(#GET{directionNav}),]
    			[directionNavHide:(#GET{directionNavHide}),]
    			[(#CONFIG{nivoslider/controlNavThumbs}|=={'false'}|?{' ',''})
    				[controlNav:(#GET{controlNav}),]
    			]
    			[keyboardNav:(#GET{keyboardNav}),]
    			[pauseOnHover:(#GET{pauseOnHover}),]
    			[(#CONFIG{nivoslider/controlNavThumbs}|=={'true'}|?{' ',''})
    				[controlNavThumbs:(#GET{controlNavThumbs}),]
    				[controlNavThumbsFromRel:(#GET{controlNavThumbs}),]
    			]
    			[captionOpacity:(#GET{captionOpacity})]
    		});
    	});
    /*]]>*/</script>
    
    
    <B_articles>
    	<div id='slider' style="[width:(#GET{width})px;][height:(#GET{height})px]">
    	<div id="slider_#GET{id_rand}" class="nivoSlider">
    <BOUCLE_articles(ARTICLES){titre_mot=#GET{motcle}}{par date} {0,4}>
    	<B_doc>  <!-- il y a une image pour cet article-->
    	<BOUCLE_doc (DOCUMENTS) {id_article} {extension IN png,jpg,gif} {par hasard} {0,1}>
    		<a href="#URL_ARTICLE">		
    		[(#FICHIER|image_passe_partout{#GET{width},#GET{height}}
    			|image_recadre{#GET{width},#GET{height},#GET{imageAlign},#GET{imageBackcolor}}
    			|inserer_attribut{title,[(#_articles:TITRE|supprimer_numero)]}
    			|inserer_attribut{rel,#FICHIER
    						|image_reduire{#GET{controlNavThumbsWidth},#GET{controlNavThumbsHeight}}
    						|extraire_attribut{src}})]
    		</a>
    	</BOUCLE_doc>
    	</B_doc>  <!-- il n'y a pas d'image pour cet article-->
    		<a href="#URL_ARTICLE">		
    		[(#LOGO_ARTICLE_RUBRIQUE|image_passe_partout{#GET{width},#GET{height}}
    			|image_recadre{#GET{width},#GET{height},#GET{imageAlign},#GET{imageBackcolor}}
    			|inserer_attribut{title,[(#_articles:TITRE|supprimer_numero)]}
    			|inserer_attribut{rel,#LOGO_ARTICLE_RUBRIQUE
    					|image_reduire{#GET{controlNavThumbsWidth},#GET{controlNavThumbsHeight}}
    					|extraire_attribut{src}})]
    		</a>
    	<//B_doc>
    </BOUCLE_articles>
    	</div>
    	</div>
    	<br style="clear:both"/>
    </B_articles>
    • message envoyé incomplet...

      la navigation par thumbnail pose deux pbs différents selon les modèles
      -  avec le modèle standard article_nivoslider, il y a bien affichage du thumbnail en haut à gauche,mais toujours le même (celui de la première image) et qui est recouvert par les images successives...

      -  avec mon modèle motcle_nivoslider, les thumbnail se réduisent à des numéros 1,2,3,4... qui eux aussi son recouvert parles images et n’apparaissent qu’au changement d’image...

      pourtant, j’ai l’impression que le code généré est semblable... pour les vignettes et leur adresse....

      je suppose que la gestion de ces vignettes est leur position sont dans le js lui-même...?

      pam

    • pb résolu en réécrivant soigneusement les modèles et en initialisant correctement les paramètres...

      pour ceux que ca intéresse
      -  un modèle pour un slide d’articles sur mot clé
      -  un modèle pour un slide d’image des derniers articles d’une rubrique

      pam

    • Bonjour et merci pour ce plugin que je viens d’installer en local, et je rencontre deux problèmes d’affichages :

      1. quand je rétrécie le navigateur (@media (max-width : 640px)) et dès la première transition, une image s’allonge et deviennent deux images superposés avec une grand différence dans le hauteur..

      2. dès @media (max-width : 480px), la transition disparait et les petits miniatures apparaît, pourtant je les ai bien configuré pour ne pas les afficher.

      Avez-vous une idée comment résoudre ces deux problèmes d’affichage ?

    • Bonjour

      Je suis très intéressé par le modèle permettant d’afficher un slide d’articles sur mot clé mais où trouver le modèle corrigé ?

      J’ai bien essayé de gratter un peu dedans le modèle proposé au-dessus mais c’est un chouille au-dessus de mes compétences ...

    • Bonjour,
      en ce qui concerne ce point de l’étirement des photos et de déformation du nivoslider, il semblerait que

      .nivoSlider img{height:100% !important;} 
      .nivo-main-image{height:100% !important;}

      fasse l’affaire.

    Répondre à ce message

  • Bonjour,

    Une méthode décrite dans ce tuto ne semble pas fonctionner :
    [(#MODELE{nivoslider_doc}{id='4|2|5|7|9'}{controlNav=false}{captionOpacity=0})]
    ne m’affiche que la dernière image, pas les précédentes...

    Répondre à ce message

  • 2

    Bonjour,

    Sur un site, je faisais tourner une rubrique qui affiche une image de chaque article qu’elle contient. Chaque image pointant sur l’article en question.

    Avec le site mis à jour en 3.1 et le plugin également mis à jour, le slider ne fonctionne plus. Et avec la nouvelle mouture nivoslider_base.html, j’avoue ne pas savoir comment m’y prendre... Une idée ?

    • Je me suis dégoté une solution... qui peut éventuellement servir. Principe donc, on cherche à afficher 1 image de chaque article que contient une rubrique.

      <div class="slider_accommodation_box">
      #SET{sliderdoc, #ARRAY} 
      
      <BOUCLE_art(ARTICLES){branche}>
          <BOUCLE_docs(DOCUMENTS){id_article}{extension IN png,jpg,gif}{0,1}>
          #SET{sliderdoc, #GET{sliderdoc}|push{#ID_DOCUMENT}}
          </BOUCLE_docs>
      </BOUCLE_art>
      
      <INCLURE{fond=modeles/nivoslider_base,env,id_document=#GET{sliderdoc}} />
      </div>

      Bien entendu, la cerise aurait été de pouvoir associer le lien de l’article à l’image afin que les images soient cliquables et renvoient sur les articles... mais ça, je n’ai pas su faire...

    • A essayer (puisque indiqué dans le tuto) :
      Pour ajouter un lien sur une image on renseigne dans le champ description du fichier :
      -  article31313 pour pointer vers l’article 31313 (forgera le lien spip.php ?article31313)

    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