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

  • 1
    didine

    Bonjour j’utilise la version trunk adaptative et je souhaite afficher la description de l’image.

    Quel fichier dois-je retoucher ?

    Merci pour votre aide

    • jeanmarie

      Salut,

      pour ajouter la description, il faut modifier le fichier /modeles/nivoslider_base.html
      C’est la balise title (insérée via inserer_attribut L111) qui génère la légende...

      jean marie

    Répondre à ce message

  • 1
    jeromeD

    Bonjour,

    J’utilise ce plugin sur plusieurs sites. Merci à son créateur.

    Je voulais savoir si on pouvait le paramétrer pour qu’il soit full screen...dans la page de configuration on peut paramétrer la largeur mais en pixel...

    Est-ce que quelqu’un l’a déjà utilisé en plein écran ?

    Merci pour votre aide

    Jérôme

    • jeromeD

      Re,

      Pardon, mon terme n’était pas le bon...je cherche à rendre le slider full width...en pleine largeur et non en plein écran...
      Désolé

    Répondre à ce message

  • 2
    Benolaos

    Bonjour,
    Il semble que la dernière version n’offre plus la possibilité de paramétrer l’affiche des puces (bullets) dans le back-office...

    • Benolaos

      Pardon pour le bruit, c’était une fausse alerte !

    • Natacha Courcelles

      Bonjour

      pour ceux qui utilise Bootstrap petite modification pour rendre le slider « Responsive »
      enregistrez sous nivoslider_doc.html dans le dossier modeles de votre squelette

      ligne 27 ajoutez max-width:100% ; !! attention il manque le ; après le px de heigh

      <div id='slider'style="[width:(#GET{width})px;][height:(#GET{height})px;]max-width:100%;">

      ligne 31 ajoutez |inserer_attribut’class’,’img-responsive’

      [(#FICHIER|image_passe_partout{#GET{width},#GET{height}}|image_recadre{#GET{width},#GET{height},#GET{imageAlign},#GET{imageBackcolor}}|inserer_attribut{title,[(#TITRE|supprimer_numero)]}|inserer_attribut{'class','img-responsive'}|inserer_attribut{rel,#FICHIER|image_reduire{#GET{controlNavThumbsWidth},#GET{controlNavThumbsHeight}}|extraire_attribut{src}})]

      bon code
      Natacha

    Répondre à ce message

  • 5
    sirom

    Bonjour,

    Je cherche à rendre l’affichage des images de mon portfolio aléatoirement.

    le critère « par hasard » ne fonctionne pas .

    Merci.

    • sirom

      Bonjour,

      Personne ne sait comment rendre « simplement » l’affichage des images aléatoirement ?

      Cordialement.

    • sirom

      Oups !

      En fait le critere par hasard fonctionne, mais il faut l’insérer dans le fichier MODELE nivoslider_doc

      et remplacer par num titre, date à la ligne 29 dans la boucle BOUCLE_doc(DOCUMENTS).

      SI quelqu’un a une solution plus simple , je suis preneur...

    • Thierry

      Chez moi même en changeant le critère dans cette boucle j’ai le même comportement

    • Olivier

      Bonjour,
      Même chose pour moi. J’ai bien placé par hasard dans le modèle nivoslider_doc. Rien n’y fait. Mais en fait aucun changement n’est pris en compte : ni inverse ni 0,2 etc. J(ai même modifier toutes les boucles de tous les modèles...
      Quelqu’un aurait une idée ? Le principe du filtre est pourtant simple et je m’arrache les cheveux la dessus pour comprendre pourquoi le plugin ne prend pas en compte mes modifications.
      Cordialement

    • Xuol

      Bonjour

      Je réponds à tout hasard (c’est le cas de le dire !), ça peut servir : c’est en fait dans le modèle article_nivoslider.html qu’il faut mettre le critère « par hasard » à la place de « par num titre », ligne 31.
      Penser aussi à vider le cache de Spip (Maintenance / Vider le cache) pour que la page soit recalculée avec ce critère.

    Répondre à ce message

  • 1
    Fennec72

    Bonjour,

    J’aimerais savoir où se trouve le code qui détermine l’ordre d’affichage des slides dans l’option où l’on insère dans un squelette le modèle [(#MODELEnivosliderid_nivoslider=24)]

    Est-ce dans l’un des fichiers de modèles ou dans l’un des fichiers JavaScript ?

    Merci d’avance

    Répondre à ce message

  • josh

    Comment puis-je obtenir les flèches sur les NavThumbs ?

    Répondre à ce message

  • Seba

    Comment puis-je zoome effet pour « ken burns effect » com montre ce site ?
    http://www.soslignes-ecrivain-public.fr/Inner-zoom-plugin-Nivo-Slider.html

    J’utilise SPIP 3.0.17 Nivo 2.0.3
    Merci

    Répondre à ce message

  • joz

    Bonjour,
    j’ai des problèmes d’affichage avec les vignettes (aussi bien dans l’espace privé que sur le site publique) : quand il y a plusieurs lignes de vignettes ils passent au dessus du contenu qui suit le diaporama. Les vignettes ont en css « position : absolute ».

    Une idée comment résoudre cela ?

    D’avance merci
    joz

    Répondre à ce message

  • PAT

    Bonjour,
    merci pour ce plugin, je cherche afficher sur l’image un transparent pour y mettre des infos supplémentaires.
    Comment lier l’image à ce transparent et comment mettre du texte ?
    Merci pour votre aide
    Pat

    Répondre à ce message

  • 4
    job

    Super plugin, je l’utilise avec le squelette escal.
    Et je trouve le résultat excellent.

    Je voulais juste signaler une coquille dans le fichier nivoslider.css.html
    ligne 118 background:url( #CHEMINcss/img/bullets.png ) no-repeat ;
    Il faut bien mettre les espaces entre la parenthese et la balise CHEMIN sinon cela rentre en conflit avec la ligne 109 [(#CONFIGnivoslider/controlNavThumbs|==’false’| ?’ ’,’’)
    Et donc nous n’obtenons pas au final le résultat escompté

    Encore merci pour ce plugin

    • job

      Je remets un peu en forme le message précédent avec code :-) ce sera plus lisible

      Je voulais juste signaler une coquille dans le fichier nivoslider.css.html
      ligne 118 background:url(#CHEMINcss/img/bullets.png) no-repeat ;
      Il faut bien mettre un crochet et parenthes autour de la balise chemin
      espaces entre la parenthese et la balise CHEMIN
      background:url([(#CHEMINcss/img/bullets.png)]) no-repeat ;
      sinon la parenthes est interprété et donc on obtien dans le CSS
      background:urlchemin/css/img/bullets.png  no-repeat ;
      et c’est dur a interpréter pour les navigateurs

    • pamillet

      sauf erreur, il manque un { dans ta correction ?

      tu proposes

      background:url([(#CHEMINcss/img/bullets.png)]) no-repeat ;

      et ca doit être

      background:url([ ( #CHEMIN{css/img/bullets.png)]) no-repeat ;

      j’ai ajouté un espace avant et après la parenthèse, car je ne sais pas trop lequel compte ?

      enfin, dans ce fichier, il y a d’autres utilisations de la balise #CHEMIN, donc il faut peut-être reproduire ?

    • job

      non tu as oublié la fermante :-)

      background:url([(#CHEMIN{css/img/bullets.png})]) no-repeat ;
    • Francky

      Comme vous êtes semble t’il d’accord pour dire qu’il y a un bug et que vous avez donner une solution, j’ai fait l’ajout au plug de la correction :-)
      Le zip devrait prochainement être disponible
      http://zone.spip.org/trac/spip-zone/changeset/84510/_plugins_/nivoslider

    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