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
- Téléchargez l’archive dans le dossier plugins de votre SPIP
- 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 :
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) :
Ou si l’on souhaite utiliser l’article 32 comme réservoir d’images depuis un squelettes :
Pour fabriquer un diaporama des documents n°4,2,5,7,9 avec l’effet ’sliceUp’ sans puces depuis un article :
Le même en squelette :
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 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...




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