slideshow_billboard ~ diaporama d'images avec légendes

Un diaporama d'image avec des légendes HTML dans un article ou un module

➠ slideshow_billboard : Slideshow responsive d'images avec légendes et liens

Cliquer pour lire la documentation

syntaxe 1:
{up slideshow_billboard=chemin_sous_dossier}
syntaxe 2:
{up slideshow_billboard}
<img src="/images/img.jpg" alt="légende"> // image avec légende dans alt
<a href="#"><img src="/img.jpg"></a> // image avec lien
{/up slideshow_billboard}
author LOMART version 1.0 license GNU/GPLv3 credit Easy jQuery Responsive Slideshow - Billboard de Spalmer
  • slideshow_billboard: si indiqué, toutes les images de ce dossier (ordre alpha)
  • label=1: affiche la légende des images (attribut alt ou nom fichier humanisé).
  • class: classe(s) ajoutées au bloc principal
  • style: style inline ajouté au bloc principal
  • ease=easeInOutExpo: mode de transition
  • speed=1000: durée des transitions en millisecondes
  • duration=5000: durée entre les changements d'images
  • autoplay=1: démarrage automatique
  • loop=1: diaporama en boucle si exécution automatique est vraie
  • transition=left: "fade", "up", "down", "left", "right"
  • navType=list: "controls", "list", "both" or "none"
  • styleNav=1: applies default styles to nav
  • includeFooter=1: afficher/masquer le pied de page (légende et navigation)
  • autosize=1: hauteur diaporama fixe. calcul sur 1ère image
  • resize=0: tente de détecter automatiquement la taille de chaque diapositive
  • stretch=1: étire les images pour remplir le conteneur

    Sur le script Easy jQuery Responsive Slideshow - Billboard de Spalmer, licence MIT

    •  600x400
    •  200x600
    •  600x200
    •  400x300
    •  400x400

    La méthode simple : indiquer le nom du dossier

    {up slideshow-billboard = images/photos/1}

    Il suffit d'indiquer le chemin relatif du sous-dossier contenant les images (jpg, png et gif). Elles seront affichées dans l'ordre alphabétique de leurs noms.

    Par défaut, la légende est définie à partir du nom du fichier. Les tirets et traits de soulignement sont remplacés par des espaces. Pour afficher un tiret, il suffit de le doubler.

    Le slideshow occupe toute la largeur de son bloc parent. Par défaut, la hauteur est calculée pour la première image affichée et sera identique pour toutes les images. Les images seront agrandies ou réduites pour tenir dans cet espace.

    La seconde méthode : spécifier les images entre les shortcodes

    {up slideshow-billboard | duration=3000 | transition=fade}
      <img src="images/photos/Ecureuil-rouge-eurasien.jpg" alt="Un petit écureuil">
      <a href="????"><img src="images/photos/Un_leopard-africain--2.jpg"></a>
    {/up slideshow-billboard}
    

    Si nécessaire, il est possible d'ajouter un lien sur chaque image.

    La légende de l'image sera le contenu de l'attribut 'alt' de l'image. Et à défaut, le nom 'humanisé' du fichier (ex: Un_leopard-africain--2.jpg ⇒ Un leopard africain-2 ).

    Il est possible d'interdire l'affichage de la légende

    Pour la démo, 2 options sont spécifiées: la durée d'affichage de chaque image et le mode de transition. Voir la documentation pour connaître les options possibles.

    • Un petit écureuil
    • Un leopard africain-2
    • Kenya Cheetah Masai Mara
    • Perroquets rouges en Equateur
    • Black crested macaque