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

Évaluation et rapport

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
mfp-hide Cache le contenu incorporé du popup. Ajoutez mfp-hide à l'attribut class de l'élément section du popup. n/a
modal-dialog Restreindre la largeur du popup. Ajoutez modal-dialog à l'attribut class de l'élément section du popup. n/a
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. If the target attribute is set, the dialog box will be closed automatically when the user leaves the web page. 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

Date de modification :