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é).
  • zoom-suffix: si indiqué, seules les images avec ce suffixe sont utilisées
  • class: classe(s) ajoutées au bloc principal
  • style: style inline ajouté au bloc principal
  • css-head (base-css):
  • 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

    Slideshow avec lightbox

    Version 1.7

    • Ecureuil rouge eurasien
    • Leopard africain
    • Black crested macaque

    Pour agrandir les images du slideshow dans une fenêtre popup, vous pouvez utiliser l'action modal

    {up modal=img}
       {up slideshow-billboard = images/photos/2
        | zoom-suffix=-mini}
    {/up modal}

    Il suffit d'inclure l'action slideshow-billboard comme contenu de modal

    L'option zoom-suffix permet d'utiliser uniquement les images d'un dossier dont le nom se termine par ce terme.
    Cette méthode, partagée par plusieurs actions, permet d'avoir 2 versions d'une image : petite pour le slideshow et grande pour la lightbox modale.
    C'est à vous de créer ces 2 images avec toutes les libertés que cela procure!

    Le suffixe sera retiré du texte pour la légende.
    Les 2 images doivent se trouver dans le même dossier.
    Il est évident que le terme pour le suffixe doit être identique pour les 2 actions.
    S'il n'est pas nécessaire d'indiquer le suffixe pour modal (-mini par défaut), il faut le préciser pour slideshow-billboard pour indiquer que l'on veut faire une sélection dans les images du dossier.

    Note: Cette méthode est également prise en charge pour les images spécifiées dans le contenu.

    On peut également utiliser le plugin LM-ZOOM. La prise en charge sera automatique. Il suffit de préciser zoom-suffix