Module d'extension JQuery d'affichage dynamique de la légende en dessous des images.
1. Fonctionnalités
Le module d'extension Jquery a_dropcaptions affiche dynamiquement la légende en dessous des images lors du survol ou du toucher. La légende est replié à la fin du survol. Contrairement aux modules similaires qui place la légende dans le bas de l'image, a_dropcaptions maintient la visibilité complète de l'image, surtout quand elle est de petit format.
Pendant l'affichage de la légende, l'image et sa légende sont provisoirement passées au premier plan, comportement très utile quand plusieurs images se chevauchent.
L'utilisation de ce module n'est pas limitée aux images, mais il peut être appliqué sur tout élément HTML.
2. Téléchargement
a_dropcaptions.js - version 1.1.1
3. Référence et licence
Ce module est une adaptation du module jquery.dropcaptions.js décrit et téléchargeable sur le site catchmyfame.com.
Il est diffusé sous la licence Creative Commons Attribution-Share Alike 3.0.
4. Usage
4.1. Données
Le texte de la légende des images est à placer dans l'attribut title de ces images.
L'image peut ou non être encapsulée dans un, voire plusieurs blocs HTML.
4.2. Appel
$(sélecteur).dropCaptions(paramètres);
Le sélecteur doit désigner les éléments dont la légende doit être affichée par le module.
Les paramètres, tous optionnels, sont à mentionner au format Json. Voir les exemples ci-dessous.
Attention ! L'image doit être créée et dimensionnée en largeur lors de l'appel de la fonction. L'activation sur une image de l'évènement load n'étant pas certain suivant le contexte (présence ou non dans le cache notamment), il est le plus souvent préférable d'inclure l'appel à la fin du chargement de la fenêtre du navigateur, y compris de son contenu :
$(window).load(function() {
$('.captioned_images img').dropCaptions();
});
4.3. Paramètres
showSpeed, hideSpeed : durée en millisecondes de l'apparition ou du retrait du volet de la légende.
Valeur par défaut : 500
showOpacity, hideOpacity : opacités maximale et minimale du fond du volet de la légende.
Valeurs par défaut : 0.8 et 0 (transparent)
showEasing, hideEasing : fonctions des animations de l'apparition ou du retrait du volet de la légende.
Valeurs par défaut : swing
container : sélecteur du parent conteneur (facultatif).
Valeur par défaut : aucun (pas de conteneur)
deltaWidth : adaptation de la largeur (en pixels) du volet de la légende.
Valeur par défaut : 0
deltaX, deltaY : décalages horizontal et vertical du volet de la légende.
Valeurs par défaut : 0
enterCallback, leaveCallback : fonctions appelées après l'apparition ou la disparition d'un volet de légende.
Valeurs par défaut : null
Paramètres d'appel des fonctions : obj, container
obj : objet Jquery sélectionné
container : objet Jquery du conteneur de cet objet, s'il existe
Valeurs par défaut : 0
4.4. Mise en forme
Le volet de légende est ajouté avec la classe .drop_caption juste après l'élément concerné ou son conteneur s'il en a un.
La feuille de style a_components.css du projet_a comporte la règle suivante, modifiable bien sûr pour chaque site :
.drop_caption {background:#333; border:1px solid #666; padding:4px;
font-size:12px; font-family: Verdana, sans-serif; color:#fff; text-align:left;
border-bottom-right-radius:6px; border-bottom-left-radius:6px;}
5. Exemples
Les composants p5003_free, p1021_works_images et p1501_article du logiciel projet_a de la plateforme AIO activent par défaut le module d'extension Jquery a_dropcaptions.
De plus, l'inclusion d'image dans un article par la commande {\%imgt:...%} lui transfère automatiquement le titre de l'objet auquel elle est rattacher. Voir l'article Références de fichiers dans les textes.
Les sites AIO présente soit des galeries d'œuvres au moyen de l'un des deux premiers composants cités, soit des articles au moyen du troisième. La plupart ont activé le module a_dropcaptions, avec le cas échéant un ajustement du volet de la légende suivant la mise en page propre à chacun.
Voici quelques exemples d'appel du composant :
Site a-io.eu (cette page)
$('.captioned_images img[title]').dropCaptions();
Site dominique-moreau.fr
$('.captioned_images img[title]').dropCaptions({"container":"div[id^='sticker']","deltaWidth":2});
$('.captioned_images img[title]').dropCaptions(
{"container":".image","deltaWidth":-20,"deltaX":10,"deltaY":-10});
Le même exemple avec des fonctions de rappel : l'image sélectionnée est encadré en rouge pendant le survol.
$('.captioned_images img[title]').dropCaptions({
container:".image", deltaWidth:-20,"deltaX":10,"deltaY":-10,
enterCallback: function(obj, container){ obj.css('border', '1px solid red'); },
leaveCallback: function(obj, container){ obj.css('border', '1px solid transparent'); }
});
6. Évolution possible
HTML 5 préconise de placer une image dans un élément figure et sa légende à côté dans un élément figcaption.