Changer de façon dynamique le contenu d'une lightbox

Dans la première partie, nous avons créé une lightbox pour afficher un texte, un formulaire ou une image contenus dans une <div>. Avec une fonction JavaScript, le contenu de la boite peut être ajouté dynamiquement.

Démonstration avec un contenu modifié dynamiquement

Pour afficher une image dans la lightbox, cliquer sur la vignette de cette image...

Le code source

Les commandes de l'évènement onclick sont transférées dans un fichier JavaScript, pour être complétées avec des fonctions de chargement d'image.
Et l'on crée une liste de vignettes sur lesquelles l'utilisateur clique pour afficher l'image correspondante dans une boite.

<img src="images/thumb-sea.jpg" width="150" height="150" onclick="openbox('images/small-sea.jpg');">
<img src="images/thumb-vitrage.gif" width="150" height="150" onclick="openbox('images/vitrage.gif');">

L'évènement onclick donne en paramètre l'url de l'image à afficher, qui correspond à la vignette. Ceci devrait être généré automatiquement dans une utilisation en production.

Le code JavaScript:

function openbox(url)
{
  var box = document.getElementById('box'); 
  document.getElementById('filter').style.display='block';
  
  var title = document.getElementById('boxtitle');
  title.innerHTML = url;
  
  var content = document.getElementById('boxcontent');
  content.style.padding="0";
  content.innerHTML = "<img src=" + url + " />";
  box.style.display='block';	
}

On sélectionne successivement:
- la boite firstbox pour l'afficher, ce qui est fait en fin de fonction.
- le champ title pour lui assigner le nom de l'image.
- le champ boxcontent pour y placer l'image

Maintenant que l'on a un fichier JavaScript, on peut simplifier le code HTML pour y déplacer les commandes de fermeture de la boite. On ajoute donc la fonction closebox:

function closebox()
{
   document.getElementById('box').style.display='none';
   document.getElementById('filter').style.display='none';
}

Le bloc à insérer devient plus simplement:

<div id="box">
    <div id="boxheader">
        <span id="boxtitle"></span>
        <span id="boxclose" onclick="closebox()"> </span>
    </div>
    <div id="boxcontent"></div>
</div>

Démonstration

La démo est dans l 'archive.

Edition en mode wysiwyg

En mode visuel, les <div> que l'on ajoute pour la lightbox peuvent cacher le contenu de la page.
Pour éviter cet inconvénient, il convient de rajouter le code lightbox après l'édition de la page. Si l'on veut par la suite modifier le contenu de la page en restant en mode visuel, le bloc doit être provisoirement neutralisé, par exemple en le mettant en commentaire avec les balises <!-- -->.

Téléchargement

• Lightbox. Toutes les démos de lightbox dans une archive.

Ressources

• Thumbnail Maker. Ce script PHP a été utilisé pour réaliser les vignettes d'image de taille uniforme.