Module d'extension JQuery d'affichage dynamique de la légende en dessous des images.

Aio exemple a dropcaptions js 204x169 140724

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.

Insertion avec imgtDe 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});

Site le-jour-ou-la-nuit.fr

$('.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.

 

version 0.9.5-0409-140724
↑ Haut