Un diaporama d'image avec des légendes HTML dans un article ou un module
{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}- 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
Style CSS
- id: id genérée automatiquement par UP
- class: classe(s) ajoutées au bloc principal
- style: style inline ajouté au bloc principal
- css-head (base-css): style ajouté dans le HEAD de la page
paramètres Javascript pour configuration
- 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: 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
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, webp 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.
Slideshow avec lightbox
Version 1.7
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 disponible sur le site lomart.fr. La prise en charge sera automatique. Il suffit de préciser zoom-suffix
upactionslist (1) slideshow-billboard (3) modal (1) jcontent-info (1)