Plugin Nivoslider + bouton accessibilité
Article mis en ligne le 15 janvier 2020
dernière modification le 14 avril 2020

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 = 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

   <!-- bouton de paramétrage pour l'accessibilité -->
   [(#CONFIG{escal/config/accessibilite}|=={oui}|oui)
   <div id="accessconfig"
   data-accessconfig-buttonname="Paramètres d’accessibilité"
   data-accessconfig-params='{ "Prefix" : "a42-ac", "ContainerClass" : "","ModalCloseButton" : "","ModalTitle" : "","FormFieldset" : "","FormFieldsetLegend" : "","FormRadio" : ""}' >
   </div>
   ]
   <div id="bandeau">
       [(#MODELE{nivoslider})]
   </div>

   <div class="nettoyeur"></div>