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
    Eric

    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

  • Fabrice

    Bonjour,
    Bravo pour ce beau plugin !

    Pourriez-vous résoudre ce problème ?
    -  (Version Spip 2.1.23) Les liens du type http://nomdedomaine/.....html, dans le descriptif du document, sont tronqués lors de l’affichage du document dans la partie publique après 4 caractères après nomdedomaine/.

    http://nomdedomaine/toto.html fonctionne

    http://nomdedomaine/totoo.html renvoie une page d’erreur

    D’avance merci.

    Répondre à ce message

  • erational

    Quelques notes sur l’utilisation de Nivoslider (avec ou sans plugin) dans SPIP

    Le plugin SPIP Nivoslider 2.0.1 utilise le Nivoslider v2.5.2

    Versions du script Nivoslider

    versioncompatibilité SpipAvantages
    nivoslider 2.5.2 version du plugin spip Nivo Slider v 2.0.1 léger et intégré dans le plugin spip.
    nivoslider 3.0.1 compatible avec spip 3.0.10 (jquery 1.7) responsive, introduction des thèmes
    nivoslider 3.2.0 incompatible spip 3.0.10 (jquery 1.9)

    Consulter le Changelog des versions de nivoslider

    Nivoslider : options du lecteur
    Consulter la documentation officielle Sur cette page, cliquer sur l’onglet jquery plugin

    Nivoslider et bootstrap
    Il y a un petit conflit qui peut être résolu facilement avec ce correctif

    J’espère que ces notes pourront être utile à d’autres :)

    Répondre à ce message

  • Thierry S

    Bonjour,

    Je cherche à faire une transition « Fade Out / Fade In » entre mes images en passant par un fond blanc (pas de « Cross-fading »)...

    Je ne connaît pas grand chose au javascript....

    Une idée s’il vous plaît ?

    merci d’avance

    Répondre à ce message

  • 1
    jules

    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.

    • jules

      Quelqu’un peut-il m’aider ?

      Les miniatures fonctionnent t-elle dans ce plugin ?

    Répondre à ce message

  • HENNEBERT Mickael

    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

  • fnutthedog

    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

  • 6
    mickamoi

    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.

    • Haqqtiviste

      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

    • Haqqtiviste

      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})]

    • mickamoi

      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 !

    • Haqqtiviste

      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.

    • mickamoi

      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

    • mickamoi

      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.

    Répondre à ce message

  • 1
    mickamoi

    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

    • mickamoi

      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

  • 4
    Pierre KUHN

    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 ?

    • Oualembo

      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 ?

    • Pierre KUHN

      Salut

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

    • Oualembo

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

    • Pierre KUHN

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

    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