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

# Lightbox

- Documentation
- Questions ou commentaires?

## Caractéristiques

- Affiche les images dans l'outil Magnific Popup
- Utilisation d'un souris, écran tactile ou clavier pour une navigation facile.

## Exemples

Description longue d'image 2

Exemple d'une description longue d'image 2 (référencé par `aria-describedby`).

### Articles seules

- AJAX - Exemple 1
- AJAX - remplacer le comportement par defaut d'un lien sur une image avec lbx-ajax
- Contenu incorporé

  ## Titre

  1. liste ordonnée (`ol`) premier niveau - apparence par défaut
  2. liste ordonnée (`ol`) premier niveau - apparence par défaut
     1. liste ordonnée (`ol`) deuxième niveau - apparence par défaut
     2. liste ordonnée (`ol`) deuxième niveau - apparence par défaut
        1. liste ordonnée (`ol`) troisième niveau - apparence par défaut
        2. liste ordonnée (`ol`) troisième niveau - apparence par défaut
- Contenu superposé modal

  ## Titre

  1. liste ordonnée (`ol`) premier niveau - apparence par défaut
  2. liste ordonnée (`ol`) premier niveau - apparence par défaut
     1. liste ordonnée (`ol`) deuxième niveau - apparence par défaut
     2. liste ordonnée (`ol`) deuxième niveau - apparence par défaut
        1. liste ordonnée (`ol`) troisième niveau - apparence par défaut
        2. liste ordonnée (`ol`) troisième niveau - apparence par défaut

  Lien - apparence par défaut

- AJAX - Contenu filtrer par le « hash » de l'URL (v4.0.7+)
- AJAX - Contenu filtrer par un sélecteur (v4.0.12+)

#### Code

Visualiser le code

    <ul class="list-inline">
    	<li>
    		<a class="wb-lbx" href="demo/1_b.jpg" title="Image 1">
    			<img src="demo/1_s.jpg" alt="Image 1" />
    		</a>
    	</li>
    	<li>
    		<a class="wb-lbx" title="Exemple de contenu AJAX" href="ajax/ajax-en.html">Contenu AJAX</a>
    	</li>
    	<li>
    		<a class="wb-lbx" title="Exemple de contenu incorporé" href="#inline_content">Contenu incorporé</a>

    		<div id="inline_content" class="mfp-hide modal-dialog modal-content overlay-def">
    			<section class="modal-content">
    				<header class="modal-header overlay-hd">
    					<h2 class="modal-title">Titre</h2>
    				</header>
    				<div class="modal-body">
    					...
    				</div>
    			</section>
    		</div>
    	</li>
    	<li>
    		<a class="wb-lbx lbx-modal" title="Exemple de contenu superposé modal" href="#inline_content_modal">Contenu superposé modal</a>

    		<div id="inline_content_modal" class="mfp-hide modal-dialog modal-content overlay-def">
    			<section class="modal-content">
    				<header class="modal-header overlay-hd">
    					<h2 class="modal-title">Titre</h2>
    				</header>
    				<div class="modal-body">
    					...
    				</div>
    			</section>
    		</div>
    	</li>
    	<li>
    		<a class="wb-lbx" title="AJAX - Contenu filtrer par le « hash » de l'URL" href="ajax/ajax4-fr.html#filter-id">AJAX - Contenu filtrer par le « hash » de l'URL (v4.0.7+)</a>
    	</li>
    	<li>
    		<a class="wb-lbx" title="AJAX - Contenu filtrer par un sélecteur" href="ajax/ajax4-fr.html" data-wb-lbx='{"filter": ".filter-selector"}'>AJAX - Contenu filtrer par un sélecteur (v4.0.12+)</a>
    	</li>
    </ul>

### Galeries

#### Galerie d'images

##### Code

Visualier le code

    <section class="wb-lbx lbx-gal">
    	<h4>Galerie d'images</h4>
    	<ul class="list-inline">
    		<li>
    			<a href="demo/1_b.jpg" title="Image 1">
    				<img src="demo/1_s.jpg" alt="Image 1" />
    			</a>
    		</li>
    		<li>
    			<a href="demo/2_b.jpg" title="Image 2">
    				<img src="demo/2_s.jpg" alt="Image 2" aria-describedby="image2-desc" longdesc="#image2-desc" />
    			</a>
    		</li>
    		<li>
    			<a href="demo/3_b.jpg" title="Image 3">
    				<img src="demo/3_s.jpg" alt="Image 3" />
    			</a>
    		</li>
    		<li>
    			<a href="demo/4_b.jpg" title="Image 4">
    				<img src="demo/4_s.jpg" alt="Image 4" />
    			</a>
    		</li>
    	</ul>
    </section>

#### Galerie d'AJAX

- AJAX - Exemple 1
- AJAX - Exemple 2
- AJAX - Exemple 3

##### Code

Visualier le code

    <section class="wb-lbx lbx-gal">
    	<h4>Galerie d'AJAX</h4>
    	<ul>
    		<li>
    			<a title="AJAX - Exemple 1 de contenu AJAX" href="ajax/ajax1-fr.html">AJAX - Exemple 1</a>
    		</li>
    		<li>
    			<a title="AJAX - Exemple 2 de contenu AJAX" href="ajax/ajax2-fr.html">AJAX - Exemple 2</a>
    		</li>
    		<li>
    			<a title="AJAX - Exemple 3 de contenu AJAX" href="ajax/ajax3-fr.html">AJAX - Exemple 3</a>
    		</li>
    	</ul>
    </section>

### Galeries cachés

#### Galerie d'images

##### Code

Visualiser le code

    <section class="wb-lbx lbx-hide-gal">
    	<h5>Galerie d'images</h5>
    	<ul class="list-inline">
    		<li>
    			<a href="demo/1_b.jpg" title="Image 1">
    				<img src="demo/1_s.jpg" alt="Image 1" />
    			</a>
    		</li>
    		<li>
    			<a href="demo/2_b.jpg" title="Image 2">
    				<img src="demo/2_s.jpg" alt="Image 2" aria-describedby="image2-desc" longdesc="#image2-desc" />
    			</a>
    		</li>
    		<li>
    			<a href="demo/3_b.jpg" title="Image 3">
    				<img src="demo/3_s.jpg" alt="Image 3" />
    			</a>
    		</li>
    		<li>
    			<a href="demo/4_b.jpg" title="Image 4">
    				<img src="demo/4_s.jpg" alt="Image 4" />
    			</a>
    		</li>
    	</ul>
    </section>

#### Galerie d'AJAX

- AJAX - Exemple 1
- AJAX - Exemple 2
- AJAX - Exemple 3

##### Code

Visualiser le code

    <section class="wb-lbx lbx-hide-gal">
    	<h5>Galerie d'AJAX</h5>
    	<ul>
    		<li>
    			<a title="AJAX - Exemple 1 de contenu AJAX" href="ajax/ajax1-fr.html">AJAX - Exemple 1</a>
    		</li>
    		<li>
    			<a title="AJAX - Exemple 2 de contenu AJAX" href="ajax/ajax2-fr.html">AJAX - Exemple 2</a>
    		</li>
    		<li>
    			<a title="AJAX - Exemple 3 de contenu AJAX" href="ajax/ajax3-fr.html">AJAX - Exemple 3</a>
    		</li>
    	</ul>
    </section>

### Titre de l'image alternative

Image 1 : Lorem ipsum consectetur adipiscing elit.

Image 2 : Nulla mollis dolor leo. Quisque laoreet tincidunt mollis. Duis posuere scelerisque lectus quis lobortis.

#### Code

Visualiser le code

    <div class="wb-lbx lbx-gal inline-lst">
    	<ul>
    		<li>
    			<a href="demo/1_b.jpg" title="Image 1" data-title="image_1_b">
    				<img src="demo/1_s.jpg" alt="Image 1" />
    			</a>
    		</li>
    		<li>
    			<a href="demo/2_b.jpg" title="Image 2" data-title="image_2_b">
    				<img src="demo/2_s.jpg" alt="Image 2" aria-describedby="image2-desc" longdesc="#image2-desc" />
    			</a>
    		</li>
    	</ul>
    </div>
    <p id="image_1_b"><strong>Image 1&#160;:</strong> Lorem ipsum consectetur <em>adipiscing elit</em>.</p>
    <p id="image_2_b"><strong>Image 2&#160;:</strong> Nulla mollis dolor leo. Quisque laoreet tincidunt mollis. Duis posuere scelerisque lectus quis lobortis.</p>

### Ouvrir de contenu superposé « Lightbox » via JavaScript

Le contenu surperposé « Lightbox » peut être ouverte via JavaScript avec :

    $( document ).trigger( "open.wb-lbx", [
    	[
    		{
    			src: "demo/1_b.jpg",
    			type: "image"
    		}
    	],
    	false,
    	[
    		"Image 1"
    	]
    ]);

Contenu superposé « Lightbox » à ouvrir

#### Code

Visualiser le code

##### HTML

    <label for="lbx-select">Contenu superposé « Lightbox » à ouvrir</label>
    <select id="lbx-select">
    	<option value="1">Image</option>
    	<option value="2">AJAX</option>
    	<option value="3">Contenu incorporé</option>
    	<option value="4">Contenu superposé modal</option>
    	<option value="5">Galerie d'images</option>
    </select>
    <button id="lbx-open-btn" type="button">Ouvrir le contenu superposé « Lightbox »</button>

##### JavaScript

    (function( $, wb ) {
    "use strict";

    var $document = wb.doc;

    $document.on( "click vclick", "#lbx-open-btn", function( event ) {
    	var value = $( "#lbx-select" ).val();

    	if ( value === "1" ) {
    		$document.trigger( "open.wb-lbx", [
    			[
    				{
    					src: "demo/1_b.jpg",
    					type: "image"
    				}
    			],
    			false,
    			[
    				"Image 1"
    			]
    		]);
    	} else if ( value === "2" ) {
    		$document.trigger( "open.wb-lbx", [
    			[
    				{
    					src: "ajax/ajax1-en.html",
    					type: "ajax"
    				}
    			]
    		]);
    	} else if ( value === "3" ) {
    		$document.trigger( "open.wb-lbx", [
    			[
    				{
    					src: "#inline_content",
    					type: "inline"
    				}
    			]
    		]);
    	} else if ( value === "4" ) {
    		$document.trigger( "open.wb-lbx", [
    			[
    				{
    					src: "#inline_content_modal",
    					type: "inline"
    				}
    			],
    			true
    		]);
    	} else if ( value === "5" ) {
    		$document.trigger( "wb-open.wb-lbx", [
    			[
    				{
    					src: "demo/1_b.jpg",
    					type: "image"
    				}, {
    					src: "demo/2_b.jpg",
    					type: "image"
    				}, {
    					src: "demo/3_b.jpg",
    					type: "image"
    				}
    			],
    			false,
    			[
    				"Image 1",
    				"Image 2",
    				"Image 3"
    			]
    		]);
    	}
    });

    })( jQuery, wb );

Date de modification :
  2015-03-09