NivoSlider
Article mis en ligne le 28 novembre 2022
dernière modification le 26 août 2024
Diaporama jQuery avec de belles transitions !
un bandeau avec des images qui défilent de façon élégante.
Plugin Nivoslider
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 = 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)
- modifier /squelettes/perso.css en rajoutant
/* espace au dessus du bandeau */ div#bandeau { padding-top: 20px; }
- 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
modifier squelettes/inc-bandeau.html
[(#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>
<div class="nettoyeur"></div>
Remarque : le code prend en compte le bouton accessibilité
Ça pourrait donner ceci :
<nivoslider_doc|id=427,428,429,430,431,432,433|>