Lightbox

Table des matières

Caractéristiques
Exemples

Caractéristiques

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

Exemples

Images seules

Exemple

Codage

<div class="wet-boew-lightbox">
  <ul>
    <li>
      <a class="lb-item" href="images/image_source.jpg" title="Texte alternatif pour l'image">
        <img src="images/image_source.jpg" alt="Texte alternatif pour l'image" class="image-actual" />
      </a>
    </li>
    ...	
    <li>
      <a class="lb-itemquot; title="Exemple de contenu AJAX" href="ajax/ajax-fra.html">Contenu AJAX</a>
    </li>
    <li>
      <a class="lb-item" title="Exemple de contenu incorporé" href="#inline_content1">Contenu incorporé</a>
    </li>
  </ul>
</div>

Galerie d'articles

Exemple

Codage

<div class="wet-boew-lightbox">
  <ul class="lb-gallery">
	<li>
	  <a class="lb-item-gal" href="images/image_source.jpg" title="Texte alternatif pour l'image">
		<img src="images/image_source.jpg" alt="Texte alternatif pour l'image" class="image-actual" />
	  </a>
	</li>
	...
	<li>
	  <a class="lb-item-gal" title="Exemple de contenu AJAX" href="ajax/ajax-fra.html">Contenu AJAX</a>
	</li>
	<li>
	  <a class="lb-item-gal" title="Exemple de contenu incorporé" href="#inline_content2">Contenu incorporé</a>
	</li>
  </ul>	
</div>

Galeries d'articles cachés

Exemple

Codage

<div class="wet-boew-lightbox">
  <ul class="lb-hidden-gallery">
	<li>
	  <a class="lb-item-gal" href="images/image_source.jpg" title="Texte alternatif pour l'image">
		<img src="images/image_source.jpg" alt="Texte alternatif pour l'image" class="image-actual" />
	  </a>
	</li>
	...
	<li>
	  <a class="lb-item-gal" title="Exemple de contenu AJAX" href="ajax/ajax-fra.html">Contenu AJAX</a>
	</li>
	<li>
	  <a class="lb-item-gal" title="Exemple de contenu incorporé" href="#inline_content3">Contenu incorporé</a>
	</li>
  </ul>	
</div>

Titre de l'image alternative (v3.1 Bêta)

Exemple

Image 1: Lorem ipsum consectetur adipiscing elit.

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

Codage

<div class="wet-boew-lightbox">
  <ul class="lb-gallery">
    <li>
	  <a class="lb-item-gal" href="images/image_source.jpg" title="Texte alternatif pour l'image">
		<img src="images/image_source.jpg" alt="Texte alternatif pour l'image" class="image-actual" data-title="element_id" />
	  </a>
    </li>
    ...
  </ul>	
</div>
<p id="element_id">Titre de l'image</p>