| |

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

#Photos et video

NivoSlider

Article mis en ligne le 3 février 2014

dernière modification le 6 mars 2023

par Jean Christophe Villeneuve

Un plugin intéressant pour faire un bandeau avec des images qui défilent de façon élégante.

Pour mettre un tel bandeau en place, on va :

installer le plugin NivoSlider, évidemment
créer un article dans une rubrique invisible dans les menus grâce aux mots clés adéquats
joindre à cet article les images que l’on veut en les ayant retaillées en amont (largeur minimum = celle du site, hauteur au choix mais identique pour toutes les images)
publier l’article ;-)
dans la configuration de nivoslider, régler la largeur et la hauteur en fonction de vos images et indiquer l’article créé comme réservoir d’images (les autres réglages sont à votre convenance)
reste à faire une copie de inc-bandeau.html de /escal/inclusions vers /squelettes/inclusions et dans ce fichier, effacer tout le code et mettre juste

[(#CONFIG{escal/config/accessibilite}|=={non}|non)
	<!-- bouton de paramètrage pour l'accessibilité -->
<div id="accessibilite">
	<div id="accessconfig"
		data-accessconfig-buttonname="<:escal:accessibilite:>"
		data-accessconfig-params='{ "Prefix" : "a42-ac", "ContainerClass" : "","ModalCloseButton" : "","ModalTitle" : "","FormFieldset" : "","FormFieldsetLegend" : "","FormRadio" : ""}' >
	</div>
	<a class="skip-link" href="#contenu"><:lien_rapide_contenu:></a>
	<span class="separateur">|</span>
	<a class="skip-link" href="#formulaire_recherche"><:lien_rapide_recherche:></a>
	<span class="separateur">|</span>
	<a class="skip-link" href="#pied"><:escal:lien_rapide_pied:></a>
	<div class="nettoyeur">
	</div>
</div>
]

<div id="bandeau">
[(#MODELE{nivoslider})]
</div>

et hop !

Et bien sur, on peut aussi l’utiliser dans un article

<nivoslider45|>

Répondre à cet article

NivoSlider en bandeau

JL Charpenteau - le 29 février 2016

Bonsoir

Sur le site http://limvelo-v5.le-pic.org nous avons
– installé le plugin Nivoslider (3.2.7)
– mis dans le répertoire squelettes/inclusions le fichier inc-bandeau.html

<div id="bandeau">
[(#MODELE{nivoslider})]
</div>

– mis dans une une rubrique "diaporama" munie des mots clés "pas-au-menu-vertical" un article "diaporama" avec 3 photos au bon format dans le portfolio et publié l’article
– paramétré le bandeau en option 4 et/ou 3 avec inclusions/bandeau.html

et hop rien ne se passe :-(

Nous sommes un peu "secs"....
Identifiants pour être webmestre du site par le contact sur demande

Merci de votre aide

Bien cordialement

Répondre à ce message

NivoSlider en bandeau

Jean Christophe Villeneuve - le 1er mars 2016

Hello

Déjà, une fois qu’on a modifié le fichier inc-bandeau.html, le paramétrage de celui-ci dans Escal devient inopérant

Ensuite, je ne vois pas de inc-bandeau.html dans le dossier /squelettes/inclusions pour le site cité dans ton message. Il faut bien un dossier "squelettes" à la racine du site, celui-ci contenant un sous-dossier "inclusions" qui lui même contient le fichier inc-bandeau.html

Répondre à ce message

NivoSlider en bandeau

JL Charpenteau - le 1er mars 2016

Bonjour

Merci pour ta réponse rapide.....
je viens d’aller faire un tour sur le site avec filezilla, il existe bien un fichier squelettes/inclusions/inc-bandeau.html à la racine du site

http://limvelo-v5.le-pic.org

Comme j’avais posé un autre question sur un autre site, tu as peut être confondu.....

Je maintiens ma proposition de t’envoyer une connexion webmestre si besoin (j’ai compris par la page contact de ce site , c’est bien ça ?)

Encore merci de ton aide

Répondre à ce message

NivoSlider en bandeau

Jean Christophe Villeneuve - le 1er mars 2016

oui je veux bien un compte admin/webmestre temporaire et si tu pouvais aussi me donner les codes d’accès ftp car ça me parait bizarre c’t’histoire ;-)

Répondre à ce message

NivoSlider en bandeau

JL Charpenteau - le 2 mars 2016

je t’ai envoyé tous les renseignements ce matin par la page contact du site....
Dis moi si c’est ça que tu voulais

JLouis

Répondre à ce message

NivoSlider en bandeau

JL Charpenteau - le 2 mars 2016

je t’ai envoyé tous les renseignements ce matin par la page contact du site....
Dis moi si c’est ça que tu voulais

JLouis

Répondre à ce message

NivoSlider en bandeau

Jean Christophe Villeneuve - le 2 mars 2016

Codes bien reçu et bug trouvé : il y avait une espace à la fin du nom du dossier /inclusions :-((

Répondre à ce message

NivoSlider en bandeau

JL Charpenteau - le 3 mars 2016

Bonjour

Merci beaucoup !!! Désolé pour cette faute
Il y a encore qq petits réglages à effectuer je pense dans la dimension des photos ... mais ça devrait aller maintenant

Encore merci de ta réactivité
Bonne fin de journée

Répondre à ce message

NivoSlider en bandeau

JL Charpenteau - le 17 mars 2016

Bonsoir

Encore moi avec mes pbs de diaporama dans bandeau.
En gros la mécanique fonctionne bien mais je n’arrive pas à trouver un réglage "fenêtre de nivoslider" vs "taille de l’image" qui me donne un diaporama satisfaisant.
Aurais tu une astuce ? du genre "mettre des photos plus grandes que la fenêtre" ou l’inverse ?
Sur http://limvelo-v5.le-pic.org j’ai une fenêtre 1000 x 270 et des photos qui sont aux alentours de 980 x 270 et ça merdouille comme tu peux le voir.....
Une idée ?
Merci de ton aide

JLouis

Répondre à ce message

NivoSlider en bandeau

Jean Christophe Villeneuve - le 21 mars 2016

Hello

si tu veux un slider bien propre, il faut que tes images soient exactement de la même taille. En tout cas au moins de la même largeur.

Répondre à ce message

NivoSlider en bandeau

JL Charpenteau - le 24 mars 2016

Bonjour

Merci du conseil, je vais m’appliquer ;-)

Répondre à ce message

Un "Slider - diaporama" en page d’accueil est-il vraiment utile ?

Jaseur boreal - le 3 octobre 2015

Bonjour,

A la lecture de quelques articles, j’en suis venu à (re)mettre en question l’utilité réelle d’un "slider" diaporama sur la page d’accueil.
Qu’il soit en bandeau , ou dans un article.

Plusieurs images en diaporama avec texte sont certes un outil parfait pour afficher un maximum d’informations sur une page d’accueil, mais est-ce que cela est efficace ?

Le contenu est-il vraiment mis en avant et l’internaute clique-t-il sur les slides ?

► Seulement 1%, des internautes clique sur un slide
► Sur ce 1%, entre 60% et 90% des clics sont sur la première position
► Dès le deuxième slide le taux de clics passe de 15% à 3%
(source : Carousel Interaction Stats – June 2013).

Comment mettre en avant du contenu ?

Comment font les médias des grands journaux qui doivent gérer cette grosse problématique.

Ces sites utilisent-ils le slider comme outil pour promouvoir leur contenu ? La réponse est NON !aucun de ces sites n’utilisent de sliders !

Le slider est-il toujours l’outil idéal pour mettre en avant vos contenus ?

Ok…mais on fait quoi ?
Quelques idées ici : http://www.doisjeutiliser.fr/unCarrousel/

@+

Répondre à ce message

NivoSlider

HANGARD Michel - le 23 avril 2015

Bonjour,
J’utilise le plugin NIVOSLIDER V2.0.3 avec le plugin ESCAL V3.79.1. En local, j’ai mis en service ce plugin pour afficher mon bandeau d’entête et cela fonctionne parfaitement.
J’ai installé mon site sur un serveur d’hébergement ; j’ai revérifié les procedures d’installation pour refaire fonctionner nivoslider et je n’arrive pas à afficher mon bandeau d’entête.J’ai bien véfifié que les images de mon bandeau sont bien incorporés dans mon article BANDEAU mais toujours sans résultat.
Cela peut il etre du au serveur d’hebergement ou pouvez me donner une idée ?
Merci d’avance

Répondre à ce message

NivoSlider

maurice - le 23 avril 2015

salut
tu as bien déposer tes images dans le portfolio

Répondre à ce message

NivoSlider

Jean Christophe Villeneuve - le 23 avril 2015

Hello

Pense aussi à vider les caches, éventuellement en par ftp.

Sinon, qu’est-ce qui s’affiche ? Une URL pour voir ?

Répondre à ce message

NivoSlider

Lhoual - le 25 décembre 2014

Bonjour,

Je voudrais utiliser ce pluggin qui me parait génial, mais le soucis est que j’ai suivi à la lettre la procédure et rien ne se passe ! Pour l’instant je travaille en local et je suis entrain de créer bénévolement un site d’une association. J’aimerai donc savoir(j’utilise spip 3 et Escal V3),si la copie de inc-bandeau.html se fait vers "spip\squelettes-dist\inclure" ou "spip\prive\squelettes\inclure" !? je l’ai déplacé dans les deux répertoires mais toujours pas d’images sur mon bandeau... Oubien peut être qu’il y’a une petite manup à faire sur un autre fichier pour indiquer le chemin d’accès.

Cordialement

Répondre à ce message

NivoSlider

Jean Christophe Villeneuve - le 26 décembre 2014

Hello

le fichier inc-bandeau.html doit se trouver dans /squelettes/inclusions. Si ce dossier n’existe pas encore, il faut le créer à la racine du spip, c’est à dire que le dossier /squelettes doit être créé au même niveau que /squelettes-dist et dans ce dossier /squelettes, on crée un dossier /inclusions dans lequel on met le fichier inc-bandeau.html

Répondre à ce message

NivoSlider

Lhoual - le 26 décembre 2014

Parfait et encore merci !!

Répondre à ce message

NivoSlider

Lhoual - le 27 décembre 2014

Rebonjour JC,

Désolé d’être si nul j’ai les photos de mon bandeau qui ne s’adaptent pas du tout sur la largeur de l’espace prévu !! J’ai changé et rechangé la taille des images mais toujours rien... j’ai mis une image du résultat ci jointe !

Merci d’avance

Répondre à ce message

NivoSlider

Jean Christophe Villeneuve - le 27 décembre 2014

Perso, je retaille toutes les images que je veux dans un nivoslider avec la même hauteur et la même largeur et j’indique ces valeurs dans la configuration de nivoslider.

Répondre à ce message

NivoSlider

Sylvain_LD - le 1er octobre 2014

Bonsoir,
J’ai suivi la procédure décrite, mais rien ne se passe hormis que j’ai le slide par défaut de nivoslider (il prend la collection de photos (en fait une seule) de l’article "Bienvenue".

J’ai un article n°47 "Mon bandeau" avec les photos, déposées dans le portfolio, que je souhaite voir défiler dans le bandeau. Il y a simplement la ligne :
<nivoslider47>.

L’article à la statut publié. La rubrique dans laquelle il est, a les mots clé pour ne pas apparaitre au menu ni dans le plan.

Répondre à ce message

NivoSlider

Jean Christophe Villeneuve - le 1er octobre 2014

Une URL pour voir ?

Et encore mieux, un compte admin/webmestre temporaire pour regarder sous le capot (à m’envoyer par la page contact).

Répondre à ce message

NivoSlider

Sylvain_LD - le 1er octobre 2014

Milles excuses pour le bruit.
Il faut bien faire attention à toutes les explications.
Promis j’essaie de ne plus recommencer|-)

Répondre à ce message

NivoSlider

Jean Christophe Villeneuve - le 1er octobre 2014

tss tsss tssss ... ça me rappelle mes élèves ... :-P

Répondre à ce message

NivoSlider

momo - le 1er octobre 2014

salut
tes images sont bien dans le portfolio

tu as bien mis le nom de l’article dans nivoslider

Répondre à ce message

NivoSlider

Sylvain_LD - le 1er octobre 2014

En bien oui j’avais oublié de mettre "Mon article" dans le paramètrage de nivoslider.

merci

Répondre à ce message

NivoSlider

Sylvain_LD - le 1er octobre 2014

Ne pas oublier dans la configuration de Nivoslider, de mettre l’article "Mon Bandeau" comme réservoir d’images du slide.

Répondre à ce message

NivoSlider

Philippe Pellicier - le 9 août 2014

Bonjour,
J’utilise nivolsider pour afficher le bandeau de mon site http://nature-en-tarentaise.org depuis longtemps. Tout fonctionne bien. Mais depuis quelques temps il y a une anomalie : on voit s’afficher en haut du bandeau 12345678 qui correspond aux 8 images que j’utilise. En plus il y a un décalage vers le bas du bandeau à cause de cette ligne de chiffres. Je ne sais pas pourquoi c’est apparu tout d’un coup... Merci pour votre aide.

Répondre à ce message

NivoSlider

job - le 11 août 2014

Bonjour

il faut dupliquer le fichier css/nivoslider.css.html qui se trouve dans le plugin nivoslider et le mettre avec le reste des squelettes et modifier la ligne 118
background:url(#CHEMIN{css/img/bullets.png}) no-repeat;
par
background:url([(#CHEMIN{css/img/bullets.png})]) no-repeat;
Ca corrigera au moins une erreur dan le fichier css

C’est un bug dans ce fichier

Répondre à ce message

NivoSlider

Philippe Pellicier - le 11 août 2014

Ok merci, tout est en ordre.

Répondre à ce message

Prob Dimension des Images du bandeau

jaseur Boreal - le 10 février 2014

Bonjour Jean Christophe,

Interressant d’utiliser Nivoslider dans le bandeau plutôt qu’un fichier GIF avec plusieurs images.
Je teste en local la mécanique dans un article spip d’escal ...
En fait si je comprend bien, que cela soit "nivoslider" ou un autre visualisateur de diaporama, tel "jQuery Cycle" un autre diaporama paramétrable pour Spip,
(Plugin-Spip-jQuery-Cycle)

On appelle le modèle dans le "bandeau-inc" et cela devrait ensuite tourner ...

Ici j’ai un truc bizarre simplement en ajoutant des images dans un article , soit des images tests bandeaux de 950 × 292 pixels, j’ai un message d’erreur bizarre :
"Les logos doivent obligatoirement faire moins de 900 × 900 pixels (ce fichier fait 950 × 292 pixels).
alors que ce ne sont que des documents images qui sont ajoutés, et pas comme logos.

Un reglage, en local serait-il oublié ?
Ou alors mon cache me jouerait des tours ....
Je teste et vérifie .

Répondre à ce message

Prob Dimension des Images du bandeau

Jean Christophe Villeneuve - le 10 février 2014

Hello

Le souci vient du fait que j’ai volontairement bloqué l’ajout d’images supérieures à 900px. Pourquoi ? Parce que plusieurs sites se sont trouvés bloqués ou dysfonctionnaient gravement en raison de rédacteurs non avertis qui balançaient des images issus directement d’un appareil photo et faisant 4000px par 3000px avec un poids de 4Mo !!

Mais c’est vrai que du coup, ça bloque pour le slider. Je vais passer la limite à 1000px.

Répondre à ce message

Prob Dimension des Images du bandeau

jaseur Boreal - le 10 février 2014

Tant qu’à faire, bloque plutot à 1025, pour que les images à 1024 passent ....

Je teste sur un changement de taille moyenne des écrans d’ordi ..

Répondre à ce message

Prob Dimension des Images du bandeau

Jean Christophe Villeneuve - le 10 février 2014

Soyons large ... ce sera 1050. Mais pourquoi une image ferait-elle 1024px de large plus qu’une autre valeur ?

Répondre à ce message

Prob Dimension des Images du bandeau

jaseur Boreal - le 10 février 2014

1024 c’est une dimansion moyenne de certains écrans anciens, et multiple de 512, 256, 128 etc ...

pour découper et calculer les colonnes d’escal an changeant les largeurs, c’est un peu plus simple ...

Je teste aussi certaines rubriques avec des affichages images pleine pages ...

Un amusement entre d’autres ..

Répondre à ce message

NivoSlider

jaseur Boreal - le 10 février 2014

Dans la configuration d’Escal pour le bandeau, du coup ce sont d’autres réglages je suppose ?

Répondre à ce message

NivoSlider

Jean Christophe Villeneuve - le 10 février 2014

Ah ben là du coup, les réglages d’Escal deviennent inopérant. On peut donc laisser n’importe quelle otion, elle ne sera pas prise en compte. Et exit le titre, le slogan et le descriptif. Ou alors il faut garder la partie de code correspondante.

Répondre à ce message

NivoSlider

antoine - le 10 février 2014

bonjour,

J’utilise le plug-in escal v3.
J’ai suivi la procédure que vous avez donné à savoir :

– installer nivoslider.
– assigner les mots "annonce-defilant" à un article.
– ajouter une image sur cet article
– indiquer les memes dimensions dans la partie "Configuration du carrousel NivoSlider".
– publier l’article.
– indiquer (dans la partie "Diaporama par défaut") l’emplacement de l’article qui comprend l’ image que je souhaite voire dans le diapo
– fait une copie de inc-bandeau.html avec le code que vous avez donné vers /squelettes/inclusions.

Pourtant, je ne vois aucun changement.
Pourriez vous m’aider s’il vous plait.
Je précise que je suis un débutant.

Répondre à ce message

NivoSlider

Jean Christophe Villeneuve - le 10 février 2014

Hello

Attention, la démarche indiquée est faite pour inclure un slider dans le bandeau !!

Rien à voir donc avec la noisette inc-annonce_defilant.html

Ensuite, un slider devient intéressant avec au moins 2 images.

Répondre à ce message

Dans la même rubrique

le 20 juin 2012
par Jean Christophe Villeneuve