Nivo Slider

Publié le : 2 mars 2011 – Dernière modification le 21 décembre 2021 – par ngombe – 500 commentaires

1
2
3
4
5
150 votes
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

5 ans 1 an 3 mois Sans limite
par date
Filtrer

203 discussions

  • 2
    habbon

    Bonjour,

    J’ai du louper un truc, parceque chez moi ça ne fonctionne pas. J’ai qu’une puce qui tournicotte. Pourtant, y’a bien le css, le js, des images dans des portfolios.

    C’est dans un ZPIP tout frais.

    Merci.

    • habbon

      j’ai tout enlevé les autres plugins, j’ai la bonne version de jquery... J’arrive pas à voir où ça cloche. Si quelqu’un arrive à le faire marcher avec un SPIP 2.1.10 [17657] ...

    • habbon

      Et ben j’ai fini par comprendre. Enfin, en tous cas, ça marche. Pour y arriver, même si j’ai du mal à voir la cause à effet, j’ai installé GD et dit à SPIP de faire des vignettes. Peut-être que ça vaudrait le coup de la préciser dans la doc.

    Répondre à ce message

  • 6
    lookandsmile

    Bonjour,

    J’ai activé ce plugin sur mon SPIP (2.1.10) mais il ne fonctionne pas. J’ai essayé de le mettre dans l’article, dans le squelette, mais pas de changement. La version de JQuery est bonne, CFG est bien activé, et #INSERT_HEAD est présent (enfin normalement parce que je ne suis pas vraiment un professionnel du code, alors j’ai un peu de mal des fois. Enfin voilà, un peu d’aide serait le bien venu.

    Merci d’avance.
    Romain.

    • ngombe

      Salut,

      J’ai besoin d’une URL pour tester ...

    • lookandsmile

      Désolé, en fait je me suis rabbatu sur FancyBox au final. Mais merci quand même :)

    • Billard_fm

      J’ai eu le même problème qui venait du fait que les images n’étatent pas dans le portefolio.

      peut être faut il le préciser dans la doc de ce superbe plugin.
      S’il faut je peux le faire

      cordialement

      F BILLARD

    • Billard_fm

      Bonjour

      quand même cette bande blanche je ne vois pas comment faire en sorte que le fond du slider soit de la couleur que je souhaite.
      J’ai fait une modification à la ligne 21 du fichier css_nivoslider.html

      	background:  green url(#CHEMIN{css/loading.gif}) no-repeat 50% 50%;

      en espèrant obtenir un fond vert sans résultat.

      J’ai fait une recherche sans succès quand à ce changement de couleur de fond dans le fichier css_nivoslider.html et dans le fichier js.

      Merci pour votre aide.

      Cordialement
      François BILLARD.

    • ngombe

      Salut,

      Pour ce problème de bande blanche regarde du coté de la fonction image_recadre (le fond est alors spécifié par une couleur en 4e argument) dans la boucle doc des fichiers modeles/*.html ...

      @+

    • Merci beaucoup j’ai pas pensé à jeter un coup d’oeil de ce coté.

      François BILLARD

    Répondre à ce message

  • 4
    le moulpe

    Bonjour !

    Je n’y connais pas grand chose, mais j’ai malgré tout réussi à faire fonctionner des diaporamas avec le squelette soyez créateurs en utilisant les lignes <nivoslider_doc|...> dans le texte de mes articles. Y a t-il un moyen simple de placer le diaporama sur la droite ou sur la gauche ? pour l’instant il s’affiche systématiquement au centre.
    En tout cas merci, c’est déjà excellent !

    • ngombe

      Salut,

      Dans la CSS (fichier css_nivoslider.html) c’est l’attribut margin:0 auto ; de l’id # slider qui permets d’obtenir ce comportement.

      Pour aligner à droite tu remplace la ligne par float:right, à gauche par float:left... J’ai prévu de permettre ce choix directement depuis CFG dans les futures versions.

      En attendant si tu souhaite obtenir plus d’infos sur le CSS je te recommande ce super site si tu connais pas déjà : http://www.alsacreations.com/

      @+

    • le moulpe

      Super, ça a parfaitement marché ! merci
      http://col89-puisaye.ac-dijon.fr
      est-il possible de faire en sorte que le texte encadre le diaporama, comme pour une image ?
      merci encore.

    • ngombe

      Salut,

      Maintenant que ton slider flotte pour le faire entourer par le texte il te suffit d’enlever les balises BR après la dernière DIV dans le modèle que tu utilise :

      <br/><br style="clear:both"/>

      Et bien entendu tu doit déclarer le nivoslider avant ton texte dans l’article ...

      ++

    • le moulpe

      ça marche !
      Le texte entoure bien l’image, mais il n’y a pas la moindre marge. Y a t-il une modif du modèle qui permette de mettre une petite marge comme pour les images ?
      Autre chose : si je ne mets pas assez de blabla, ça déstructure le bas de la page (la partie « à la une » remonte trop et essaie d’entourer le diaporama ) j’ai bidouillé pour que ça ne le fasse pas sur mon portable, mais avec une résolution d’écran supérieure, ça risque de le faire..

      Merci pour ton aide précieuse, ça progresse !

      @+

    Répondre à ce message

  • 2
    gillesklein

    Excellent plugin.

    Mais j’ai une marge blanche autour des images que je n’arrive pas à réduire. Sauf à rajouter une div avec une marge négative. Mais dans ce cas la marge recouvre le texte (une histoire de z-index, certainement).

    Comment faire pour réduire complètement la marge autour des images ?

    • ngombe

      Salut,
      Peux-tu donner une URL que l’on puisse tester ?

    • Billard_fm

      La marge blanche vient sans doute de la différence de taille entre les images et la configuration de la bannière dans CFG. Il faut sans doute modifier la couleur de background de nivo slider en fonction de son site pour éviter cette bande blanche en cas d’erreur de taille des images.

      cordialement

      François BILLARD

    Répondre à ce message

  • jp56

    Merci beaucoup pour l’adaptation pour SPIP de ce chouette plugin que j’utilise sur ma page d’accueil :

    www.kerudo.net

    Cordialement.

    Répondre à ce message

  • 3
    A. LE GALL

    Bonsoir,
    Le plugin fonctionne parfaitement sur deux sites que je suis. Mais une restriction : des internautes me disent ne rien voir avec Internet Explorer comme navigateur. Incompatibilité ?

    Merci pour un tuyau.

    • ngombe

      Salut,

      J’ai fait des tests sous différents navigateurs, pas d’incompatibilités connues...

      Si tu as une URL pour que je regarde...

      Une version d’IE en particulier ?

      @+

    • A. LE GALL

      Merci d’avoir répondu et j’ai fait une légère modification dans le paramétrage de nivoslider (accepter les flèches). Il me semble que cela ait suffi pour débloquer.
      Voici un lien :
      http://stfrancoisdesodons.catholique.fr/spip.php?article93
      (sans prosélytisme bien sûr !)
      Merci et bravo pour ce plugin, très apprécié des internautes

    • ngombe

      Re,

      Je vois que tu utilise la toute première version du plugin (0.0.1)...

      La mise à jour en 0.1.0 règlera les bugs de la CSS :-)

    Répondre à ce message

  • 6
    Mtxr

    Bonjour,
    J’ai un site SPIP 2.1.10 avec CFG activé.
    Une fois nivo activé, dimensionné (340x200 dans mon cas), quand je mets un diapo dans un article, les photos s’affichent toutes à la fois, verticalement les unes en dessous des autres, dans l’ordre déclaré |id=1,2,3...
    Pour info j’ai le même résultat avec jw Image Rotator....

    Merci de votre aide

    • ngombe

      Salut,
      -  As-tu une balise INSERT_HEAD dans ton squelettes ?
      -  As-tu un lien vers la nivoslider_css et nivoslider.js dans le source de ta page ?
      -  Peux-tu donner une URL que l’on puisse tester ?

    • je t’ai répondu en pm

      Je barbotte et m’enfonce un peu ...

    • ngombe

      Je pense qu’il n’y a pas de balise INSERT_HEAD dans ton squelette ...

      Pour faire fonctionner ce plugin tu as deux possibilités :

      • Soit ajouter les balise #INSERT_HEAD et #INSERT_HEAD_CSS (en majuscule) dans ton < HEAD >, tu pourra alors retirer la fin concernant spip qui est actuellement intégrée à ton fichier plugins/graphisme_bleu_arrondi/_css/style_site.css car elle sera ajoutée automatiquement, de même que les autre CSS / JS des plugins qui fonctionnent dans la partie publique ... Je te recommande de procéder ainsi.
      • Sinon tu peux aussi mettre les liens en dur vers la CSS et le JS de nivoslider dans ton < HEAD > comme ceci : 
         <head>
 <...>
 <link rel="stylesheet" href="http://www.catho92-ndbs-stmarc.cef.fr/?page=css_nivoslider" type="text/css" media="all" />
 <script src="http://www.catho92-ndbs-stmarc.cef.fr/plugins/nivoslider/js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
 <...>
 </head>

      @+

    • Mtxr

      Il n’y a - ou il ne reste- que la dernière photo de visible.

    • Mtxr

      J’avais pris la deuxième option.
      En prenant la première (qui me parait en effet plus logique) ça a l’air de bien fonctionner.
      Mais je n’ai pas vraiment pigé ce que tu veux dire exactement
      « tu pourra alors retirer la fin concernant spip qui est actuellement intégrée à ton fichier plugins/graphisme.... css »
      Quelle ’fin’ ?

    • Mtxr

      En tous cas Merci, ça marche fort bien. !

    Répondre à ce message

  • 2
    David Fredette

    Bonjour,

    J’ai fait quelques adaptation à ce plugin.
    -  La première, j’ai modifié un peu le modèle nivoslider afin qu’il ne fasses pas un crop de l’image, mais bien une redimension puis un remplissage de couleur pour les espaces manquant... cela évite de couper des éléments de photos qui n’est pas toujours intéressant... La couleur de fond est paramétrable par les controle de nivoslider...

    -  J’ai aussi ajouté, dans les paramètres, la possibilité de faire afficher les miniatures en dessous du diaporama par une sélection oui/non...

    J’ai testé le tout sur un site ou j’ai mis ce plugin en production, et sur ce site, ça fonctionne très bien... Je ne sais pas s’il s’adapte bien a tout les contexte, mais au moins, ce que j’ai fait peut servir de base a la suite du développement ! :)

    Si ces modifications que j’ai fait au plugin vous intéresse, écrivez-moi a david.fredette@visioninfo.qc.ca, je vous ferez parvenir ma copie actuelle du plugin avec mes modifications ! :)

    • ngombe

      Salut,

      Je suis preneur de toute amélioration à intégrer au plugin...

      N’hésite pas à te créer un compte sur spip-zone et à contribuer !

      @+

    • David Fredette

      Ce serait sûremen très intéressant, mais je manque de temps pour explorer le fonctionnement exact d’un SVN et compagnie...

      Lorsque je fais des modifications comme ça, je laisse donc le soins a ceux qui font le travail d’intégrer ce qui leur semble le plus intéressant ! ;)

    Répondre à ce message

  • 4
    norbi90160

    Bonjour,

    Est-il possible de faire apparaître ce slider dans le bandeau d’un site ?

    La quetion a déjà été posée avec la réponse « C’est déjà fait, je l’ai ajouté dans l’article ci-dessus ... »

    Euh, sans doute mais à quel endroit, je n’ai pas bien saisi.
    Pourriez-vous être plus précis ?
    Merci.
    (Spip 2.1.8, sarka 3.0.4)
    site : www.denney.fr

    • ngombe

      La syntaxes à utiliser dans les squelettes est décrite dans la partie « Utilisation » de cet article.

      Pour sarka il faut créer un répertoire squelettes/noisettes/bandeau et y copier le fichier inc_bandeau_haut.html puis placer au bon endroit (après la div nav_bandeau par exemple) l’appel d’un modèle comme ceci ...

       
      [(#MODELE{nivoslider})]

       

      Etant donné que tu utilise un thème personnalisé tu devrais plutôt travailler directement dans le répertoire de ton thème ...

    • norbi90160

      Bonjour,

      Effectivement en plaçant au bon endroit le code dans le fichier inc_bandeau_haut.html (après la div nav_bandeau) le diaporama s’affiche bien le bandeau.
      Pour un site je l’ai fait avec nivo slider et pour un autre site avec jquery cylcle2.
      Merci pour ton aide.

    • François Daniel Giezendanner

      Bonjour ngombe,

      Je désire utiliser votre plugin pour un bandeau de site.

      Je ne souhaite pas utiliser les id des articles, car les administrateurs n’ont pas accès au code.

      Donc , je désire utiliser dans un squelette la syntaxe suivante que vous indiquez :

      [(#MODELE{nivoslider})]

      mais alors, quelles sont les images prises en compte ? De quel(s) article(s) ?

      Cordialement

      FDG

    • ngombe

      Salut,

      Comme son nom l’indique c’est le portfolio du diaporama par défaut (un article publié) définit dans CFG qui est utilisé lors de l’inclusion du modèle nivoslider sans paramètres ...

    Répondre à ce message

  • 1
    Paulbe

    Hello,

    Quelqu’un l’a déjà fait tourner avec des images provenant d’une rubrique ?

    Amitié

    Paulbe

    • ngombe

      Salut,

      voici le code pour le modèle modeles/nivoslider_rub.html : Attention tes images doivent se trouver dans le portfolio de la rubrique ...

       

      [(#REM) modèle Nivoslider pour une rubrique :
 - Depuis un article : < nivoslider_rubXX >, alors affiche les docs de la rubrique XX
 - Selon le modele CROCHET(# MODELE{nivoslider_rub}{id_nivoslider_rub=XX})CROCHET
]
[(#SET{id_rubrique,[(#ENV{id_nivoslider_rub, #CONFIG{nivoslider/id_defaut, 0} })]} )]
[(#SET{width,[(#ENV{width, #CONFIG{nivoslider/width, 500} })]} )]
[(#SET{height,[(#ENV{height, #CONFIG{nivoslider/height, 500} })]} )]
[(#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,true} })]} )]
[(#SET{pauseOnHover,[(#ENV{pauseOnHover, #CONFIG{nivoslider/pauseOnHover,true} })]} )]
[(#SET{captionOpacity,[(#ENV{captionOpacity, #CONFIG{nivoslider/captionOpacity,0.8} })]} )]
[(#SET{id_rand, #VAL{1}|rand{1000}})]
<B_doc>
<br/><br/>
<div id='slider' style="[width:(#GET{width})px;][height:(#GET{height})px]">
        <div id="slider_#GET{id_rand}" class="nivoSlider" style="[width:(#GET{width})px;][height:(#GET{height})px]">
        <BOUCLE_doc(DOCUMENTS){mode=document}{id_rubrique=#GET{id_rubrique}}{extension IN png,jpg,gif}{par num titre}>
        [(#FICHIER|image_recadre{#GET{width},#GET{height}}|inserer_attribut{title,[(#TITRE|supprimer_numero)]})]
        </BOUCLE_doc>
        </div>
</div>
<br/><br style="clear:both"/>
<script type="text/javascript">
        $(window).load(function() {
                $('#slider_#GET{id_rand}').nivoSlider({
        [effect:'(#GET{effect})',]
        [slices:(#GET{slices}),]
        [animSpeed:(#GET{animSpeed}),]
        [pauseTime:(#GET{pauseTime}),]
        [directionNav:(#GET{directionNav}),]
        [directionNavHide:(#GET{directionNavHide}),]
        [controlNav:(#GET{controlNav}),]
        [keyboardNav:(#GET{keyboardNav}),]
        [pauseOnHover:(#GET{pauseOnHover}),]
        [captionOpacity:(#GET{captionOpacity})]
                });
        });
</script>
</B_doc>

      Sinon plus simple pour faire défiler des images d’une rubrique : utiliser le modèle nivoslider_doc.

    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