Lightbox

But

Afficher des images et d'autres contenus dans une boîte de dialogue, soit individuellement ou comme partie d'une galerie. Implémente le modèle de conception WAI-ARIA Dialog (Modal).

Exemples

Comment implémenter

Items individuels

Ajouter un élément lien à la page avec la classe wb-lbx.
Ajouter un attribut href sur l'élément lien qui pointe à l'image (e.g., href="demo/1_b.jpg"), au fichier content le contenu (e.g., ajax/ajax.html) ou à l'identifiant (id) du contenu en-ligne (e.g., href="#inline-content).
Ajouter un attribut title au lien avec le texte à mettre en légende.
Facultatif : Filtrer le contenu avec le « hash » de l'URL (ajax/ajax4-fr.html#filter-id, v4.0.7+) ou avec un sélecteur (href="ajax/ajax4-fr.html" data-wb-lbx='{"filter": ".filter-selector"}', v4.0.12+).

Galeries

Ajouter un élément section ou un autre élément à la page avec les classes wb-lbx et lbx-gal.
Ajouter à l'intérieur de la section ou de l'autre élément un élément lien pour chaque item de la galerie.
Ajouter un attribut href sur chaque élément lien qui pointe vers l'image (e.g., href="demo/1_b.jpg"), le fichier contenant le contenu (e.g., ajax/ajax.html) ou l'identifiant (id) du contenu en-ligne (e.g., href="#inline-content).
Ajouter un attribut title à chaque élément lien avec le texte à mettre en légende.

Options de configuration

Option	Description	Comment configurer	Valeurs
`lbx-hide-gal`	Cache tous les éléments d'une galerie sauf le premier.	Ajouter `lbx-hide-gal` à l'attribut `class` de la `section` ou de l'autre élément de la galerie.	n/a
`lbx-modal`	Obliger le lightbox à se comporter comme une boîte de dialogue modale.	Ajouter `lbx-modal` à l'attribut `class` de l'élément lien.	n/a
`lbx-ajax`	Remplace le type de contenu par défaut par le type ajax.	Ajouter `lbx-ajax` à l'attribut `class` de l'élément lien.	n/a
`lbx-image`	Remplace le type de contenu par défaut par le type image.	Ajouter `lbx-image` à l'attribut `class` de l'élément lien.	n/a
`lbx-inline`	Remplace le type de contenu par défaut par le type en-ligne (inline).	Ajouter `lbx-inline` à l'attribut `class` de l'élément lien.	n/a
`lbx-iframe`	Remplace le type de contenu par défaut par le type iframe.	Ajouter `lbx-iframe` à l'attribut `class` de l'élément lien.	n/a
`popup-modal-dismiss`	Identifie le bouton qui doit être utilisé pour fermer un lightbox se comportant comme une boîte de dialogue modale.	Ajouter `popup-modal-dismiss` à l'attribut `class` du lien ou du bouton qui servira à fermer le lightbox se comportant comme une boîte de dialogue modale.	n/a
`data-wb-lbx`	Les paramètres de Magnific Popup peuvent être configurés par l'attribut `data-wb-lbx`. Voir la documentation Magnific Popup pour les options disponibles. À noter : BOEW utilise les callbacks open, change et parseAjax (voir Événements).	Ajouter l'attribut `data-wb-lbx` à l'élément lien ou utiliser `window[ "wb-lbx" ]` avec les options souhaitées.	p.ex., `data-wb-lbx='{"type": "ajax"}'` permet d'identifier le type de contenu. Donne le même résultat que l'ajout de la classe `lbx-ajax`.
`filter` (v4.0.12+)	Le content peut être filtré pa un selecteur par `filter` dans l'attribut `data-wb-lbx` ou `window[ "wb-lbx" ]`.	Ajouter `data-wb-lbx='{"filter": ".filter-selector"}'` à l'élément lien et remplacer `.filter-selector` avec un sélecteur.	p.ex.., `data-wb-lbx='{"filter": ".filter-selector"}'` va filtré le contenu par `.filter-selector`.

Événements

Documente les événements publics qui peuvent être utilisés par les développeurs.

Événement	Déclencheur	Ce qu'il fait
`wb-init.wb-lbx`	Déclenché manuellement (e.g., `$( ".wb-lbx" )trigger( "wb-init.wb-lbx" );`).	Utilisé pour initialiser manuellement le plugiciel Lightbox. Note: Le plugiciel Lightbox sera initialisé automatiquement à moins que le code du Lightbox soit ajouté après que la page ait déjà été chargée.
`wb-ready.wb-lbx` (v4.0.5+)	Déclenché automatiquement après qu'un Lightbox ait été initialisé.	Utilisé pour identifier le moment où un Lightbox a été initialisé (cible de l'événement) `$( document ).on( "wb-ready.wb-lbx", ".wb-lbx", function( event ) { });` `$( ".wb-lbx" ).on( "wb-ready.wb-lbx", function( event ) { });`
`wb-open.wb-lbx` (v4.0.4+)	Déclenché manuellement : `$( document ).trigger( "open.wb-lbx", items, modal, image, ajax (v4.0.16+) );` Le paramètre `items` est obligatoire mais les paramètres `modal`, `image` et `ajax` sont facultatifs. Nota : Le paramètre `ajax` a été ajouté en v4.0.16. Voici un exemple d'usage : `$( document ).trigger( "open.wb-lbx", [ [ { src: "demo/1_b.jpg", type: "image" } ], false, [ "Image 1" ], { settings: { type: 'POST', data: { foo: 'bar' } } } ]);`	Utilisé pour ouvrir un Lightbox manuellement. Peut être utilisé pour afficher des boîtes individuelles, des galeries et des boîtes modales. Voir Ouvrir des popups par JavaScript pour des exemples d'application.
`wb-ready.wb` (v4.0.5+)	Déclenché automatiquement quand BOEW a terminé le chargement et l'exécution.	Utilisé pour identifier quand tous les plugiciels BOEW et les polyfills ont terminé leur chargement et leur exécution. `$( document ).on( "wb-ready.wb", function( event ) { });`
Événements `mfp*` (e.g., `mfpClose`	Événements déclenchés automatiquement par Magnific Popup (documentation sur les événements Magnific Popup.	Utilisés par Magnific Popup pour identifier quels événements sont en cours. `$.magnificPopup.instance` contient les propriétés du popup en question. Ouvert avec `.wb-lbx`: `$( ".wb-lbx" ).on( "mfpClose", function( event ) { var src = $.magnificPopup.instance.items[ 0 ].src; if ( src === "#inline_content" ) { } else if ( src === "demo/1_b.jpg" ) { } });` Ouvert avec JavaScript: `$( document ).on( "mfpClose", function( event ) { var src = $.magnificPopup.instance.items[ 0 ].src; if ( src === "#inline_content" ) { } else if ( src === "demo/1_b.jpg" ) { } });`

Cas de mise à l'essai

Les cas de mise à l'essai suivant sont seulement disponible en anglais.

Click on the same page link: Ensuring the dialog close when clicking on a link inside the opened dialog that are pointing to a location outside the dialog context, like futher down in the page.

Code source

Code source du Lightbox sur GitHub

Signaler un problème sur cette page

Date de modification :: 2015-07-09

Sélection de la langue

Recherche