SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

291 Plugins, 198 contribs sur SPIP-Zone, 108 visiteurs en ce moment

Accueil > Affichage multimédia > Galeries et diaporamas > Nivo Slider > Nivo Slider

Nivo Slider

2 mars 2011 – par ngombe – 470 commentaires

147 votes

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.

Pour voir une démo c’est par ici : http://webtice.ac-guyane.fr/contrib/?article1

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 :

  1. <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) :

  1. [(#MODELE{nivoslider})]

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

  1. [(#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 :

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

Le même en squelette :

  1. [(#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 http://nivo.dev7studios.com.

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

Voir en ligne : http://plugins.spip.net/nivoslider

Dernière modification de cette page le 24 novembre 2017

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 6 décembre à 10:33, par elm31rugby En réponse à : Nivo Slider

    Ordre des images
    Bonjour à tous et à toutes, il y a-t-il un moyen de définir l’ordre de passages des images dans le slider ?
    J’ai tenté en mettant des numéros au titre des images, mais de ce fait le titre de l’image s’affiche dans le Slider.
    Bonne journée,
    Eric LM

    • Le 7 décembre à 10:18, par elm31rugby En réponse à : Nivo Slider

      Ah bein, j’ai trouvé :

      L’astuce consiste à mettre comme titre de l’image du diaporama le numéro d’ordre de passage désiré.
      Mais dans ce cas, le numéro (le titre) s’affiche sur l’image du diaporama, ce qui n’est pas souhaitable. (en tout cas, pas pour moi)
      Dans ce cas, on modifie le fichier modeles>nivoslider_base.html, ligne 112 et on supprime
      |inserer_attributtitle,#TITRE
      Et les images s’affichent dans l’ordre voulu.

    Répondre à ce message

  • Le 5 mars à 17:31, par RP En réponse à : Nivo Slider

    Nivoslider en conflit avec Bootstrap4 existe-t-il une solution ?

    • Le 11 juin à 07:30, par beno En réponse à : Nivo Slider

      Je suis dans la même problématique... je crois avoir tout essayé avec les min-height, height et max-height, sans résultat.

      Pour l’instant, et pour info, on peut utiliser le Carousel fourni par Bootstrap, et afficher des images optimisées générées par le plugin Adaptative-images. Au petits oignons !

      Et puis il y a aussi Owl-Carousel-2 pour SPIP qui peut aider...

    Répondre à ce message

  • Le 1er mai 2017 à 21:19, par bbak-ludo En réponse à : Nivo Slider

    Bonjour,
    Je souhaiterais le plugins avec le nivoslider par mots clés.
    Soit je voie pas.
    Un style comme ça, sa peut fonctionner ?
    [(#MODELEnivoslidermots cles=slide)]
    D’avance merci.

    • Le 1er mai 2017 à 21:22, par bbak-ludo En réponse à : Nivo Slider

      [(#MODELE{nivoslider}{mots cles=slide})]
      Où peut-on modifier pour que sa fonctionne ?

      Merci.

    • Le 30 novembre 2017 à 08:18, par pamillet En réponse à : Nivo Slider

      j’ai fait un modèle pour cela... il fonctionne sur le site lepcf.fr et permet d’avoir un diapo sélectif en une...

      un pro l’améliorerait surement... il a des aspects autre que le motclé, par exemple, choisir une image si l’articlen’en a pas...

      je ne peux pas le mettre en attaché, on ne peut mettre que des images, mais je t’envoie le fichier complet si tu veux...

      la boucle principale est

      <BOUCLE_articles(ARTICLES){titre_mot=#GET{motcle}}{par date}{inverse}{0,#GET{nombre}}>               
      <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">       
      [(#SET{PAM-TITREDOCOUARTICLE,#TITRE|sinon{#_articles:TITRE|supprimer_numero} })]
              [(#SET{img,[(#FICHIER
              |image_passe_partout{#GET{width},#GET{height}}
                                                      |image_recadre{#GET{width},#GET{height},#GET{imageAlign},#GET{imageBackcolor}}
              |inserer_attribut{alt,''}
              |inserer_attribut{title,[(#_articles:DATE|affdate_court)]: [(#GET{PAM-TITREDOCOUARTICLE})]}
                                                      |nivoslider_img_display_first_only{#COMPTEUR_BOUCLE,#GET{nolazy}}
              |inserer_attribut{class,'no_image_filtrer no-adapt-img'})]})]
              [(#GET{controlNavThumbs}|=={'true'}|?{
              [(#GET{img}|inserer_attribut{data-thumb,
      #FICHIER|image_passe_partout{
      #GET{controlNavThumbsWidth},
      #GET{controlNavThumbsHeight}}|image_recadre{#GET{controlNavThumbsWidth},
              #GET{controlNavThumbsHeight},center,ffffff}|extraire_attribut{src}})]
              ,[(#GET{img})]})]
              </a>
                     
              </BOUCLE_doc>       
    • Le 2 juin à 12:30, par Spidermian En réponse à : Nivo Slider

      Heu...
      il manque pas un
      </BOUCLE_articles>
      à la fin ?

    Répondre à ce message

  • Le 14 février à 19:37, par pa.georges En réponse à : Nivo Slider

    Bonjour,

    pour les gens qui ont un site en HTTPS, il convient de faire la modification suivante dans le fichier css/nivoslider.css.html :

    Remplacer les 3 occurrences de :
    background:url(#CHEMIN{css/img/xxx.yyy})
    Par :

    background:url([(#CHEMIN{css/img/xxx.yyy}|url_absolue{#URL_SITE_SPIP/}
    |protocole_implicite)])

    Ainsi le fichier CSS généré ne contiendra que des urls « Protocol-relative » (comme dans le reste des fichiers CSS générés par SPIP)

    Ce serait bien d’intégrer cette correction dans les prochaines versions du plugin... Merci !

    • Le 14 février à 22:29, par Maïeul En réponse à : Nivo Slider

      Fait
      https://zone.spip.org/trac/spip-zone/changeset/108952

      je n’ai trouvé que deux #CHEMIN et pas trois.

      Pas besoin d’avoir du >#URL_SITE_SPIP puisque #URL_ABSOLUE fonctionne à partir de la requête qui a généré le hit, on aura forcément la bonne url.

    • Le 15 février à 09:49, par pa.georges En réponse à : Nivo Slider

      Merci beaucoup !

      C’est dans la version 2.0.4 qu’il y en avait trois occurrences, et dans la version 3.2.8 il n’y en a plus que deux.

      Et effectivement vous avez raison, le paramètre #URL_SITE_SPIP est superflu lors de l’appel au filtre url_absolue.

    Répondre à ce message

  • Le 12 décembre 2015 à 23:17, par momo En réponse à : Nivo Slider

    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

    • Le 14 décembre 2015 à 16:48, par momo En réponse à : Nivo Slider

      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

    • Le 16 septembre 2016 à 15:07, par Vincent Calame En réponse à : Nivo Slider

      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 :

      1. [(#MODELE{nivoslider}{mode=document})]
    • Le 2 février à 10:00, par elm31rugby En réponse à : Nivo Slider

      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

  • Le 26 janvier à 12:00, par paul En réponse à : Nivo Slider

    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

  • Le 18 juillet 2017 à 11:36, par Jhessy En réponse à : Nivo Slider

    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

  • Le 17 juin 2017 à 11:12, par beno En réponse à : Nivo Slider

    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

  • Le 19 avril 2017 à 15:44, par douki En réponse à : Nivo Slider

    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

    1. [(#REM) <!-- Bandeau Haut --> ]
    2. <div class="bandeau_haut">     
    3.         [(#PIPELINE{bandeau_haut_debut,
    4.                 [(#ARRAY{args, [(#ARRAY{id_rubrique, #ENV{id_rubrique}})], data, ''})]}
    5.         )]
    6.         <div class="nav_bandeau">  
    7.         <!-- Navigation dans les langues -->
    8.                 [(#CONFIG{sarkaspip_menus/position_langues, 4}|=={4}|oui)
    9.                         <INCLURE{fond=noisettes/bandeau/inc_bandeau_langues}>
    10.                 ]
    11.         <!-- Navigation dans les raccourcis -->
    12.                 [(#CONFIG{sarkaspip_menus/position_pages, 1}|=={4}|oui)
    13.                         <INCLURE{fond=noisettes/navigation/inc_menu_pages_speciales}{position=bandeau_haut}>
    14.                 ]
    15.         <!-- Navigation dans les raccourcis -->
    16.                 [(#CONFIG{sarkaspip_menus/position_formulaires, 1}|=={4}|oui)
    17.                         <INCLURE{fond=noisettes/navigation/inc_menu_formulaires}{id_rubrique=#ENV{id_rubrique,0}}{position=bandeau_haut}>
    18.                 ]
    19.         </div>
    20.         [(#MODELE{nivoslider}   {id_nivoslider=9}{width=1200}{height=400}{effect=fade}{slices=15}{animSpeed=500}{pauseTime=6000}
    21.                                                         {directionNav=false}{controlNav=false}{keyboardNav=false}{pauseOnHover=false}{imageAlign=center center}
    22.                                                         {captionOpacity=0.5}{controlNavThumbs=false})
    23.         ]
    24.         #SET{logo, #LOGO_SITE_SPIP}
    25.         [(#CONFIG{sarkaspip_bandeau/logo_reduit, 1}|=={1}|oui)
    26.                 [(#SET{logo, [(#LOGO_SITE_SPIP|image_reduire{#CONFIG{sarkaspip_bandeau/taille_logo, 150}})]})]
    27.         ]
    28.         [<a class="site_logo" href="#URL_SITE_SPIP" title="<:sarkaspip:accueil_site:>">(#GET{logo})</a>]
    29.         <div class="site_nom">
    30.                 [(#CONFIG{sarkaspip_bandeau/titre_site, 1}|=={1}|oui)
    31.                    [<h1><a href="#URL_SITE_SPIP" title="<:sarkaspip:accueil_site:>">(#NOM_SITE_SPIP)</a></h1>]
    32.                 ]
    33.            [<h2>(#CONFIG{sarkaspip_bandeau/slogan})</h2>]
    34.         </div>
    35.         <br class="nettoyeur" />
    36.         [(#PIPELINE{bandeau_haut_fin,
    37.                 [(#ARRAY{args, [(#ARRAY{id_rubrique, #ENV{id_rubrique}})], data, ''})]}
    38.         )]
    39. </div>

    Télécharger

    Sous SPIPr, surcharge de sommaire.html

    1. <section>
    2.         <header class="cartouche hide">
    3.                 <h1>#NOM_SITE_SPIP</h1>
    4.         </header>
    5.  
    6.         <div class="main">
    7.                 [<div id="descriptif_site_spip">(#DESCRIPTIF_SITE_SPIP)</div>]
    8.                 #SET{exclus,#ARRAY}
    9.                 [(#MODELE{nivoslider}   {id_nivoslider=14}{width=1920}{height=900}{effect=fade}{slices=15}{animSpeed=500}{pauseTime=6000}
    10.                                                                 {directionNav=false}{controlNav=false}{keyboardNav=false}{pauseOnHover=false}{imageAlign=center center}
    11.                                                                 {captionOpacity=0.5}{controlNavThumbs=false})
    12.                 ]
    13.                 <BOUCLE_art(ARTICLES){par hasard}{0,1}>
    14.                 <INCLURE{fond=inclure/article-hero,id_article,env,ajax} />
    15.                 #SET{exclus,#LISTE{#ID_ARTICLE}}
    16.                 </BOUCLE_art>
    17.  
    18.                 <div class="liste long articles">
    19.                 <INCLURE{fond=liste/articles-resume,articles_exclus=#GET{exclus},env,ajax} />
    20.                 </div>
    21.         </div>
    22.  
    23. </section>

    Télécharger

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

    • Le 19 avril 2017 à 16:29, par douki En réponse à : Nivo Slider

      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

  • Le 20 mars 2017 à 19:13, par AlainF En réponse à : Nivo Slider

    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

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Owl Carousel 2

    30 novembre 2017 – 42 commentaires

    Owl Carousel est un diaporama jQuery adaptable aux différentes tailles d’écran, qu’on peut actionner par glisser, il utilise CSS3 mais il est compatible avec les vieux navigateurs, et il est aussi paramétrable. Le présent plugin permet d’utiliser (...)

  • Formidable, le générateur de formulaires

    23 janvier 2012 – 2531 commentaires

    Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs. Introduction L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins (...)

  • Calendrier Mini 2.0

    19 mai 2012 – 256 commentaires

    Ce plugin ajoute la balise #CALENDRIER_MINI qui insère un petit widget de navigation par mois dans les dates des évènements. Fonctionnement du mini calendrier Le mini calendrier présente un mois à la fois. Les jours du mois comportant des (...)

  • Paiement avec Formidable

    16 février 2015 – 69 commentaires

    Ce plugin « Paiement avec Formidable » permet d’ajouter une étape de paiement à la fin de la saisie d’un formulaire créé par le plugin Formidable. Il le complète et nécessite par ailleurs le plugin bank qui gère l’interface technique avec les prestataires (...)

  • citrace : garder une trace de certaines actions

    26 juillet 2013 – commentaire

    L’objectif est de garder une trace, pendant une période déterminée, de qui a effectué quelle action sur le contenu du site et quand. Les objectifs de ce plugin L’objectif est de garder une trace, pendant une période déterminée, de qui a effectué (...)