SPIP-Contrib

SPIP-Contrib

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

278 Plugins, 195 contribs sur SPIP-Zone, 150 visiteurs en ce moment

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

Nivo Slider

2 mars 2011 – par ngombe – 330 commentaires

83 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 :

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

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

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

Retour en haut de la page

Vos commentaires

  • Le 27 avril à 18:17, par jules En réponse à : Nivo Slider

    Je n’arrive pas à faire fonctionner les miniatures. Quand je choisis l’option miniature dans la configuration, après la sauvegarde des données, le formulaire change l’option à non.

    Ai-je manqué quelque chose ? J’utilise Spip 3.0.8 et NivoSlider 2.0.1.

    • Le 1er mai à 17:34, par jules En réponse à : Nivo Slider

      Quelqu’un peut-il m’aider ?

      Les miniatures fonctionnent t-elle dans ce plugin ?

    Répondre à ce message

  • Le 26 avril à 18:53, par HENNEBERT Mickael En réponse à : Nivo Slider

    Bonjour à tous,

    je voudrais intégrer le nivo_slider sur la page d’accueil de mon squelette maparaan et ainsi faire défiler les articles (toutes rubriques confondues). Hélas je ne sais pas où renseigner cette ligne [(#MODELEnivoslider_docid=’4|2|5|7|9’controlNav=falsecaptionOpacity=0)]

    D’après ma logique, il faut que je colle cette ligne sur la page d’accueil de mon thème.
    Je compte sur vos idées pour éclairer mon esprit.

    merci d’avance
    Mickael

    Répondre à ce message

  • Le 12 avril à 20:01, par Eric En réponse à : Nivo Slider

    Bonjour,

    J’essaye désespérément d’utiliser le modèle pour afficher les images du portefolio de l’article en cours en utilisant des options différentes de celle définies dans CFG.

    Cela ne fonctionne pas, je pense que j’ai loupé quelque chose
    Dans le squelette j’ai mis :

    [(#MODELE{nivoslider}{id_nivoslider=#ID_ARTICLE}{width=600}{height=480}{directionNav=yes}{directionNavHide=no}{controlNav=yes}{controlNavThumbs=yes}{controlNavThumbsWidth=50}{controlNavThumbsHeight=50})]

    Seule la dernière image du portefolio s’affiche ....

    Merci d’avance pour votre aide

    Répondre à ce message

  • Le 11 avril à 22:28, par fnutthedog En réponse à : Nivo Slider

    Bonjour,

    J’ai un pb avec l’orientation de photo. Si je choisi par exemple 640 par 480 dans les parametres, mes photos verticales sont coupées. Comment faire pour avoir toutes mes photos en entier, quelle soit verticales ou horizontales ?

    Merci

    Répondre à ce message

  • Le 2 mai 2012 à 23:08, par mickamoi En réponse à : Nivo Slider

    Bonjour,

    je souhaite créer une boucle spéciale pour afficher mes dans Nivo-slider les logos des articles de rubriques selon un filtrage par mots clés.

    voici la boucle qui affiche ce que je veux et que je veux montrer via nivo-slide (vignette + garnde image) :

             <BOUCLE_art(MOTS){id_article}>
             <BOUCLE_mots(ARTICLES){id_mot} {exclus} >
    <a href="[(#URL_PAGE{article}|parametre_url{'id_rubrique',#ID_RUBRIQUE})]" alt="#TITRE">[(#LOGO_ARTICLE_RUBRIQUE||image_reduire{100,100}|
    |inserer_attribut{'alt',#TITRE}|inserer_attribut{'title',#TITRE} )]</a>
    </BOUCLE_mots>
    </BOUCLE_art>

    .

    Je n’arrive cependant pas à générer de boucle pour afficher de diaporamas avec vignettes. J’ai essayé via les modèles mais rien n’y fait !

    Comment réaliser cette boucle et afficher mes logos dans une boucle nivo-slide ?

    Merci d’avance.

    • Le 3 mai 2012 à 09:50, par Haqqtiviste En réponse à : Nivo Slider

      bnjour

      en créant un nouveau modèle : nivoslider_logo.html
      avec comme boucle interne :

      <B_logo>
      <div id='slider' style="[width:(#GET{width})px;][height:(#GET{height})px]">
              <div id="slider_#GET{id_rand}" class="nivoSlider">
              <BOUCLE_logo (ARTICLES) {id_mot=#GET{id_mot}} {par date inverse} {doublons} {0,5}>
                      <a href="[(#URL_PAGE{article}|parametre_url{'id_rubrique',#ID_RUBRIQUE})]" alt="#TITRE">[(#LOGO_ARTICLE_RUBRIQUE||image_reduire{100,100}|
      |inserer_attribut{'alt',#TITRE}|inserer_attribut{'title',#TITRE} )]</a>

              </BOUCLE_logo>
              </div>
      </div>

      à coller à la place de la boucle doc dans nivolider_doc.html et renommer nivoslider_logo.html
      NE PAS OUBLIER de fermer la boucle logo à la place de doc tout en bas du document

      je ne suis pas spécialiste, si quelqu’un veut modifier, bienvenue

    • Le 3 mai 2012 à 09:55, par Haqqtiviste En réponse à : Nivo Slider

      oubli :

      modèle Nivoslider_logo pour afficher des logos d’articles choisis selon un mot clé :
      - Depuis un article : < nivoslider_logoXX >, alors affiche les logos des articles qui ont le mot clé XX
      - Selon le modele
      [(# MODELE{nivoslider_logo}{id_nivoslider_logo=XX})]

    • Le 4 mai 2012 à 00:38, par mickamoi En réponse à : Nivo Slider

      Merci d’avoir pris le temps de jeter un coup d’oeil à mon problème. Cependant malgré quelques tests rien ne s’affiche !

      Cela vient-il du fait que la boucle <BOUCLE_art(MOTS){id_article}> ait disparu ? Comment la réintégrer ?

      Pour {id_nivoslider_logo=XX} comment le faire fonctionner ? Je ne peux pas rentrer de chiffre car celui-ci est dynamique.
      Logiquement la boucle récupère le mot clé de l’article mais celui-ci est différent selon les articles.

      Ps : mon site est en local pour l’instant malhereusement !

    • Le 4 mai 2012 à 07:44, par Haqqtiviste En réponse à : Nivo Slider

      effectivement, s’il y aplusieurs mots clés, c’est pas la même. je pensais que vous vouliez les articles du mot clé XX dans un slider.
      mais vous voulez tous les articles mais classés par mots.
      dans ce cas là votre première boucle est la bonne, mais il me semble que le id_article est en trop. moi j’aurais écrit ça :

      <BOUCLE_mots(MOTS) {tout}>
              <BOUCLE_art(ARTICLES){id_mot} {par date inverse} >
                      <a href="[(#URL_PAGE{article}|parametre_url{'id_rubrique',#ID_RUBRIQUE})]" alt="#TITRE">[(#LOGO_ARTICLE_RUBRIQUE||image_reduire{100,100}|
      |inserer_attribut{'alt',#TITRE}|inserer_attribut{'title',#TITRE} )]</a>
              </BOUCLE_art>
      </BOUCLE_mots>

      mais étant donné que c’est une boucle assez basique de spip, on doit la retrouver dans les squelettes standards.

    • Le 5 mai 2012 à 18:44, par mickamoi En réponse à : Nivo Slider

      GENIAL !!! Merci, ca marche ! Après coup cela ne semblait pas si compliqué !

      J’ai quelques petites questions encore après avoir cherché de mon côté :
      -  les vignettes ne s’affichent pas même après activation des vignettes dans les fonctions avancées de spip. Est-ce dû au fait que je sois en local sur Mamp ?

      -  les images se chevauchent et vu qu’elles ne sont pas de la même taille certaines apparaissent par dessus les autres ! Comment faire pour que : lorsqu’une image apparaise, l’autre située dessous disparaisse totalement ?

      -  Peut-on centrer les images au centre du slider. Ceci ne semble pas fonctionner malgré center center dans le CFG ?

      -  Comment mettre les vignettes au dessus du slider, avec une présentation de toutes les vignettes puis le slider en dessous ? Je ne trouve pas comment faire ? Est-ce dans les fichiers js ?

      Merci encore

    • Le 11 avril à 17:04, par mickamoi En réponse à : Nivo Slider

      Bonjour,

      j’aimerai positionner mes vignettes, miniatures au dessus de mon slider sans cet effet de chevauchement .

      Comment positionner .nivo-control au dessus de nivo-dlider en relatif pour que la page s’adapte si j’ajoute du contenu ?

      Merci d’avance.

      PNG - 84.6 ko

    Répondre à ce message

  • Le 19 mars à 23:37, par mickamoi En réponse à : Nivo Slider

    Bonjour,

    comment placer les miniatures au dessus du slider pour créer un affichage sympa de prévisualisation et que le slider s’aligne en clear:both en dessous ?

    Merci d’avance

    • Le 26 mars à 13:45, par mickamoi En réponse à : Nivo Slider

      Voici le code de ma boucle. Faut-il jouer sur le CSS ou puis-je séparer miniatures et aperçu directement en Div et boucles distinctes ?

      <B_mots>

      <div id='slider' style="[width:(#GET{width})px;][height:(#GET{height})px]">
             <div id="slider_#GET{id_rand}" class="nivoSlider">
             
               <BOUCLE_mots(MOTS){id_article}>
                       <BOUCLE_art(ARTICLES){id_mot} {exclus} >
                         <a href="#URL_RUBRIQUE" alt="#TITRE">[(#LOGO_ARTICLE_RUBRIQUE|inserer_attribut{rel,#LOGO_ARTICLE_RUBRIQUE|image_reduire{#GET{controlNavThumbsWidth},#GET{controlNavThumbsHeight}}|extraire_attribut{src}}|image_passe_partout{#GET{width},#GET{height}}|image_recadre{#GET{width},#GET{height},#GET{imageAlign},#GET{imageBackcolor}}|inserer_attribut{title,[(#TITRE|supprimer_numero)]})]
                         </a>
                       </BOUCLE_art>
               </BOUCLE_mots>

             </div>
      </div>

      </B_mots>

    Répondre à ce message

  • Le 21 mars à 18:22, par jp En réponse à : Nivo Slider

    Bonjour , je suis sous SPIP 2.1.12 et j’ai Nivo Slider installer sur ma première page avec un code du genre <nivoslider_doc|id=214,215,196,170,164,|effect=fade|controlNav=false> . Mon problème est le suivant au premier chargement de la page quelque soit le navigateur ou l’ordi, j’ai toute les images qui deffile très rapidement et après le slide commence normalement , si je réactualise la page tout fonctions normalement. le problème c’est que ce n’est pas très beau pour les gens qui arrive sur le site. quelqu’un aurait il une piste pour résoudre mon problème merci d’avance

    Répondre à ce message

  • Le 20 janvier à 23:56, par Pierre KUHN En réponse à : Nivo Slider

    Bonsoir

    Je viens de voir un soucis en spip 3
    IL me liste les numéros de documents en rouge en haut de l’image. Déjà vu ?

    • Le 13 mars à 12:50, par Oualembo En réponse à : Nivo Slider

      Bonjour,
      J’ai le même soucis que Pierre KUHN, la liste les numéros de documents s’affiche au dessus des images.
      Quel est la solution pour résoudre se problème ?

    • Le 13 mars à 12:58, par Pierre KUHN En réponse à : Nivo Slider

      Salut

      IL faut modifier le modele en fait, avec var_mode=inclure tu peux vite trouver où est le soucis.

    • Le 13 mars à 14:13, par Oualembo En réponse à : Nivo Slider

      Merci pour la réactivité.
      Dans quelle fichier apporter la correction ?

    • Le 13 mars à 14:25, par Pierre KUHN En réponse à : Nivo Slider

      Faut voir ce que tu utilise, en lisant le code tu peut trouver.

    Répondre à ce message

  • Le 11 mars à 14:16, par Yop En réponse à : Nivo Slider

    Bonjour

    Je cherche à mettre en page d’accueil le diaporama mais j’ai une erreur à la validation HTML5 :
    j’utilise le [(#MODELEnivoslider)] dans le sommaire, qui va chercher un article où il y a toutes les images. Ca fonctionne correctement mais à la validation HTML5, j’ai une mention sur l’attribut rel pour toutes les images : comment puis je faire pour le supprimer ? quel(s) fichier(s) ?

    Error: Attribute rel not allowed on element img at this point.
    From line 192, column 4; to line 192, column 178
    TTTT" >↩                        <img src='local/cache-gd2/729138578bdd2a6366e0a1a00ef42ea4.jpg' width='450' height='310' style='' title='TTT' rel='local/cache-vignettes/L50xH35/TTT5-ae218.jpg' />↩       

    Quelqu’un aurait une solution ? merci !

    Répondre à ce message

  • Le 4 mars à 19:31, par Edouard Le Roy En réponse à : Nivo Slider

    J’ai installé nivoslider pour SPIP 3.0 et la version pour SPIP 3.0 de CFG et je n’arrive pas à paramétrer nivoslider quang je veux lancer le parametrage depuis la gestion des plugins j’ai le message suivant :

    Accès interdit

    Vous n’avez pas le droit d’accéder à la page configurer_nivoslider.

    qu’ais-je oublié de faire ??

    • Le 6 mars à 17:59, par edouard Le Roy En réponse à : Nivo Slider

      Il faut avoir les droits de webmestre pour pouvoir configurer le plugin. J’ai fini par trouver en regardant la doc de fonctionnement dans le pugin cfg

    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

  • SPIP 3.0

    19 mai 2012 – 90 commentaires

    Nous avons le plaisir de vous annoncer la sortie de SPIP 3.0 ! Cette nouvelle version vous permet toujours de publier du contenu pour internet et de créer des sites avec une grande facilité. De nombreuses évolutions facilitent son utilisation (...)

  • ScolaSPIP pour SPIP3

    21 mai 2012 – 216 commentaires

    Un plugin-squelette personnalisable pour sites Web d’établissements scolaires

  • Le plugin ZotSpip

    28 mai 2012 – 69 commentaires

    Synchronise Spip avec une bibliothèque (personnelle ou partagée) de références bibliographiques Zotero. Utilisez Zotero pour gérer / importer / rédiger vos références bibliographiques, puis incorporez vos références bibliographiques dans votre Spip avec (...)

  • Bibliographie AERES 2.0

    31 janvier – 11 commentaires

    Ce plugin fournit une interface pour faciliter la réalisation d’une bibliographie au format AERES. Les auteurs peuvent indiquer en ligne des corrections à effectuer ou bien indiquer des références à ajouter. Avertissement Ce plugin n’a ni pour objet (...)

  • MediaBox

    10 mai 2010 – 299 commentaires

    Aperçu La MediaBox est une Boîte multimédia polyvalente et personnalisable. Le plugin est basé sur la librairie moderne ColorBox, qui a été enrichie et adaptée pour SPIP. Par défaut, mediabox propose 5 habillages. Il est assez facile d’en créer de (...)