SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 248 visiteurs en ce moment

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

Nivo Slider

2 mars 2011 – par ngombe – 452 commentaires

143 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 (définit dans 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.

PNG - 61.8 ko

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 18 novembre 2015

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 18 février à 18:16, par François Daniel Giezendanner En réponse à : Nivo Slider

    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

  • Le 24 août 2014 à 23:59, par pamillet En réponse à : Nivo Slider

    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>
    • Le 25 août 2014 à 00:20, par pamillet En réponse à : Nivo Slider

      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

    • Le 25 août 2014 à 16:39, par pamillet En réponse à : Nivo Slider

      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

    • Le 26 août 2014 à 21:35, par Aline En réponse à : Nivo Slider

      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 ?

    • Le 13 octobre 2014 à 21:19, par Jean Christophe Villeneuve En réponse à : Nivo Slider

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

    • Le 14 février à 05:17, par beno En réponse à : Nivo Slider

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

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

      Télécharger

      fasse l’affaire.

    Répondre à ce message

  • Le 13 février à 14:10, par beno En réponse à : Nivo Slider

    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

  • Le 22 octobre 2016 à 06:16, par beno En réponse à : Nivo Slider

    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 ?

    • Le 13 février à 13:09, par beno En réponse à : Nivo Slider

      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.

      1. <div class="slider_accommodation_box">
      2. #SET{sliderdoc, #ARRAY}
      3.  
      4. <BOUCLE_art(ARTICLES){branche}>
      5. <BOUCLE_docs(DOCUMENTS){id_article}{extension IN png,jpg,gif}{0,1}>
      6. #SET{sliderdoc, #GET{sliderdoc}|push{#ID_DOCUMENT}}
      7. </BOUCLE_docs>
      8. </BOUCLE_art>
      9.  
      10. <INCLURE{fond=modeles/nivoslider_base,env,id_document=#GET{sliderdoc}} />
      11. </div>

      Télécharger

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

    • Le 13 février à 13:59, par beno En réponse à : Nivo Slider

      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

  • Le 18 décembre 2016 à 07:08, par foster En réponse à : Nivo Slider

    Bonjour

    Le slider ne fonctionne plus chez moi depuis la mise à jour spip 3.0.18 et aujourd’hui 3.0.24.

    J’ai tout essayé en vain. Quelqu’un peut-il me donner un coup de main.

    Merci d’avance

    Répondre à ce message

  • Le 7 décembre 2016 à 02:40, par El_Faro En réponse à : Nivo Slider

    Le bloc de code que j’utilise pour afficher mes articles dans cette section est :

    Comme la mise en œuvre du code de me faire NivoSlider pivoter la section 3 éléments, chacun d’eux avec votre lien.
    MILLE MERCI.

    JPEG - 103.3 ko

    Répondre à ce message

  • Le 7 décembre 2016 à 01:27, par El_Faro En réponse à : Nivo Slider

    Quelqu’un peut me aider.

    Je cherche le code exact à utiliser Nivo curseur pour faire défiler une sélection d’articles qui sont contenus dans la même section, étant en mesure de relier l’un d’eux comme on le fait ici.

    Je ne peux pas trouver la programmation appropriée pour cela.

    merci

    Répondre à ce message

  • Le 30 novembre 2016 à 08:26, par beno En réponse à : Nivo Slider

    Bonjour,

    Je voudrais afficher, sur une rubrique, les images contenues dans les articles de cette dite rubrique.
    Une bonne âme saurait-elle m’indiquer la manière de faire ?
    En remerciant d’avance cette âme charitable ;-)

    Répondre à ce message

  • Le 29 septembre 2016 à 11:32, par rubenxela En réponse à : Nivo Slider

    Bonjour. Je me trouve confronté à un petit problème avec NivoSlider.
    Aucun problème d’installation, tout roule. Or je me demande :
    J’ai besoin d’utiliser plusieurs types de slider sur le site. Or je n’arrive pas à spàécifier des dimensions particulières en fonction de des besoins. Ce sont toujours les dimensions remplies dans le paramétrage du plugin qui sont prises (voir redimensionnée).
    Y a t-il des paramètres permettant de spécifier la taille pour un Slider particulier ?

    merci

    • Le 29 septembre 2016 à 11:41, par rubenxela En réponse à : Nivo Slider

      J’ai réussi en créant des modèles.

    • Le 27 octobre 2016 à 15:10, par chris En réponse à : Nivo Slider

      Je cherche aussi à pouvoir donner aux admins d’un site la possibilités de faire des sliders carré ou 4/3 en fonction des pages. Tu peux en dire un peu plus sur la création des modèles : emplacement, nommage, partie du code à modifier, appel pour l’admin....

      Merci

    Répondre à ce message

  • Le 2 octobre 2016 à 18:27, par crem-spip En réponse à : Nivo Slider

    Bonjour,

    Avant, nivoslider, c’était simple...
    Là je suis sous spip 3.1.3, avec en plus le plugin du kit cnrs 5.4.2.
    Impossible de lire mes diaporamas comme auparavant quand je mettais simplement : nivoslider_rubXX ou nivosliderXX

    Si je dois insérer un modèle, où dois-je le mettre ? Dans quel squelette ?
    Je voudrais pouvoir créer un diaporama dans n’importe quel article ou rubrique.
    J’ai lu différentes contributions, mais cela ne m’a pas vraiment inspirée.

    Bien à vous,

    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

  • Réservation d’événements

    16 mars 2015 – 241 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification (...)

  • Moulinette

    17 juillet 2015 – 34 commentaires

    Un squelette qui monte et qui descend ! Moulinette est un squelette basé sur le thème Grayscale (documentation) pour Bootstrap 3. Le type de site attendu est un site en une seule page : une rubrique avec quelques articles, des titres courts, des (...)

  • Formulaire de contact avancé

    23 mars 2009 – 1372 commentaires

    Un formulaire de contact configurable, avec de multiples options.

  • Plugin « Agrandir la largeur de page »

    3 août 2015 – 21 commentaires

    Ce plugin permet d’agrandir la largeur de la page dans l’espace privé de SPIP. Vous pourrez personnaliser cette largeur si besoin. Préambule Dans l’espace privé de SPIP, lorsque nous sommes connectés, nous pouvons choisir dans nos préférences (...)

  • Levenshtein

    9 mai 2016 – commentaires

    Proposition de mots lors de la recherche. La principale vocation du plugin Levenshtein est de proposer des corrections de mots lors de la recherche. Dépendance Pour fonctionner le plugin a besoin d’un lexique dans lequel faire les (...)