Nivo Slider

Published : 2 March 2011 – updated on 24 August 2021 – by ngombe – 489 commentaires

1
2
3
4
5
149 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 years 1 year 3 months Without limit
par date
Filter

197 discussions

  • 1
    elesig

    Bonjour !
    J’ai installé nivoslider sur un spip 4 tout neuf, avec des plugins tous neufs. Ce qui est gênant, c’est que les logos sont interprétés par le slider, ce qui est gênant. Que puis-je faire? Ont-ils pris statut d’images?
    -  spip 4
    -  plugins: pages, le lecteur multimedia, nivolsider, spip-bonux, nuages.
    Merci de votre conseil!
    _

    Reply to this message

  • elesig

    Re-elesig...
    Bonsoir ! Mes logos continuent à être pris pour des images, et quand ils se mettent dans le slider, on ne peut plus aller plus loin.... Mais ce n’est pas tout: quand j’ordonne les images pour un “diaporama”, elles ne s’ordonnent pas dans le slider. C’est dommage!
    Une solution? Je suis trop béotienne pour m’en tirer! Mais ce serait bien que slider et diaproma aillent du même train! Si vous y pouvez quelque chose, merci!

    Reply to this message

  • 3
    beno

    Bonjour,
    Juste pour signaler que les liens vers la démo et vers le script ne sont plus bons,

    • JLuc

      J’ai corrigé. Merci.

    • beno

      Bonjour JLuc,
      Merci pour le changement de lien (en bas d’article) j’ai pu voir que c’est bien le plugin que je cherchais. Mais comme je suis un chouilla chipoteur, en haut de page, le lien “Intégration pour SPIP du script NivoSlider” devrait alors pointer également vers https://themeisle.com/plugins/nivo-slider/, ce serait plus clair que le lien générique parce que sinon c’est pas évident de comprendre que ce site vantant Wordpress va présenter NivoSlider ;-) Merci, doublement ::—))

    • Ben.

      c’est (re)corrigé beno, merci

    Reply to this message

  • Philippe

    bonjour

    merci pour ce plugin que j’ai utilisé plusieurs fois.

    cependant, je m’étonne que n’existe pas pour Spip (à ma connaissance), un slider d’articles qui mettent en image les logos (et non les docs) des articles et qui pointent vers les articles.
    c’est pourtant un basique du web depuis des lustres et je n’ai jamais rien vu pour Spip.
    bien sur, on me dira, il suffit de bidouiller un peu le nivoslider (ou autre) et le tour est joué...

    mais bon, voilà.

    merci, bonne suite.

    Reply to this message

  • 2
    Billard_fm

    Bonjour
    dans le cadre d’un test j’ai modifié le paquet.xml de nivo slider en lui indiquant que la compatibilité était avec Spip 4. Et le plugin devenu compatible semble fonctionner sans problème.
    J’ai une version du plugin en 3.2.9.
    Merci

    Reply to this message

  • 2
    RealET

    Bonjour,

    Je suis tombé sur un os dernièrement.
    Dans le texte de l’article : <nivoslider_doc|id=67, 69, 70, 71, 72, 73 |effect=fade|controlNav=false>
    Mais certaines des images supprimées du site.

    Résultat : nivoslider cherche quand même à les afficher, mais demande https://www.urldusite.tld/ecrire/undefined comme nom d’image ce qui provoque une 403 sur le serveur.

    • RealET

      En fait, c’est seulement dans l’admin, les echappe-js sur les data :

      <code class="echappe-js">&lt;img src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==' width='1920' height='1440' alt='' title='salon de jardin en fer ' data-src='../local/cache-gd2/48/40e74bea5af0ba6a5eea0b9830215e.jpg?1567770598' class='no_image_filtrer no-adapt-img' /&gt;</code>
    • RealET

      Résolu par https://git.spip.net/spip-contrib-extensions/nivoslider/commit/2fc16f04
      Merci à Cédric pour la piste (sur liste SpipDev).

    Reply to this message

  • pamillet

    je découvre un problème dont je ne sais pas s’il est ancien ou pas...
    ca fonctionne bien, mais quand je clique sur une image, ca me renvoie sur un lien bizarre fabriqué avec la description de l’image...
    je ne me souviens pas de ce comportement, mais le squelette propose effectivement un calcul du lien à partir de la description...

            #SET{lien,''}
                [(#DESCRIPTIF|oui)
                        [(#SET{lien,#VAL{'spip.php?'#DESCRIPTIF}|attribut_html|replace{' ',''}})]
                        [(#SET{fancyornot,''})]
                        [(#DESCRIPTIF|match{doc}|=={doc}|?{
                                [(#PLUGIN{FANCYBOX}|oui)
                                        [(#SET{fancyornot, [(#CONFIG{fancybox/selecteur_commun,'.fancybox'}|replace{'\.',''})]})]
                                ]
                                [(#SET{lien, #URL_DOCUMENT})]
                        })]
                        [(#DESCRIPTIF|match{http}|=={http}|?{
                                [(#SET{lien, [(#DESCRIPTIF|textebrut)]})]
                        })]
                ]

    j’avoue que je ne vois pas bien... il faudrait supposer que la description de l’image doit contenir un lien ?

    Reply to this message

  • 2
    elm31rugby

    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

    • elm31rugby

      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.

    • cvrlh

      Le plus propre c’est d’utiliser le système de numérotation de SPIP que l’on peut aussi appliquer aux articles pour les trier :
      Dans le champs titre des images, les numéroter ainsi 1. (un chiffre, un point et un espace vide derrière le point), 2. pour l’image suivante, 3. pour la suivante et ainsi de suite...

      Avec cette numérotation (un chiffre, un point et un espace vide derrière le point) le champs titre est considéré comme vide par SPIP mais l’ordre de classement est pris en compte. Du coup les images sont triés sans que Nivo slider n’affiche le titre des images.

    Reply to this message

  • conil26

    Bjr,

    Exite-t-il un paramètre me permettant l’affichage de 4 photos côte-à-côte dans le bandeau ?
    Ça m’éviterait d’avoir à construire x photos de 5 images collées.
    https://www.agha.fr/neo/
    C’est moche
    Merci

    Reply to this message

  • dean22

    Bonjour,

    Mon site est multilingue français/anglais/breton avec nivoslider dans le squelette, tout s’affiche correctement en français et en anglais mais quand je sélectionne la langue bretonne le slider disparaît.... J’ai testé d’autres langues pas de soucis.. Il n’y a qu’avec / ?lang=br que ça disparaît.

    Merci pour votre aide.

    Reply to this message

Add a comment

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 / PostgreSQL
  • 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 apparait.

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.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom