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-gallery-hidden">
	<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>