- Passer au contenu principal
- Passer à « À propos de ce site »

# Lightbox

Questions ou commentaires?

## 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

- Exemple anglais
- Exemple français

## Comment implémenter

### Items individuels

1. Ajouter un élément lien à la page avec la classe `wb-lbx`.
2. 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`).
3. Ajouter un attribut `title` au lien avec le texte à mettre en légende.
4. 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

1. Ajouter un élément `section` ou un autre élément à la page avec les classes `wb-lbx` et `lbx-gal`.
2. Ajouter à l'intérieur de la `section` ou de l'autre élément un élément lien pour chaque item de la galerie.
3. 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`).
4. 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" ) {
      	}
      });

## Code source

Code source du Lightbox sur GitHub

Date de modification :
  2015-07-09