Mais les avantages, selon moi, de lightbox sont :

  • On ne change pas de page, ça évite au navigateur de recharger la page.
  • L'attribut title de la balise <A> est utilisé pour donner un titre à la photo.
  • La photo est mise en valeur dans un cadre blanc sur un fond noir partiellement opaque.
  • Respect des normes du W3C, le lien pointe sur la version en plus haute résolution de la photo, le contenu reste accessible même aux navigateurs sans javascript.
  • L'information "affiche cette image via lightbox" est portée par l'attribut rel, les autres attributs ne voient pas leur signification travestie (ie.title contient toujours le titre du lien).
  • Le contrôle à la souris ou au clavier.
  • Possibilité de faire des slide-shows simples.

C'est donc très cool comme outil !

L'inconvénient c'est qu'il faut être capable de manipuler l'attribut rel des liens. Or la plupart des éditeurs de texte en mode wiki (comme c'est le cas pour dotclear) ne permettent pas d'éditer cet attribut. Néanmoins, il existe bien un plugin qui fonctionne très bien.

Mais si vous êtes sur une plateforme de blog qui ne permet pas l'installation de plugins (comme c'est le cas pour moi avec les gandiblog), vous êtes un peu ennuyé.

Heureusement, il est possible de le faire quand même fonctionner tout de même sur ces plateformes. Voici la méthode:

  1. Télécharger le fichier zip contenant les différents fichiers nécessaires
  2. Télécharger le fichier attaché à ce billet (set_rel_lb.js)
  3. Extraire le fichier zip
  4. Modifier le fichier js/lightbox.js

Le fichier contient initialement ces deux définitions (entre autres):

var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";

Ajouter /public/lightbox au début du chemin d'accès aux fichiers pour obtenir:

var fileLoadingImage = "/public/lightbox/images/loading.gif";              
var fileBottomNavCloseImage = "/public/lightbox/images/closelabel.gif";
  1. Créer le répertoire lightbox dans le gestionnaire de média de dotclear
  2. Créer les répertoires images, css et js dans le répertoire lightbox
  3. Uploader les différents fichiers présents dans l'archive dans leurs répertoires respectifs (ie. lightbox/images pour le répertoire images)
  4. Uploader le fichier set_rel_lb.js dans le répertoire lightbox/js
  5. Créer un widget texte via l'outil Widgets de présentation

Saisir le texte suivant :

<style type="text/css">
 @import url(/public/lightbox/css/lightbox.css);
</style>
<script type="text/javascript" src="/public/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="/public/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/public/lightbox/js/set_rel_lb.js"></script>
<script type="text/javascript" src="/public/lightbox/js/lightbox.js"></script>

Ce widget sert à insérer les fichiers javascript nécessaires pour lightbox, à chacun de voir où le positionner dans le menu dotclear pour que le rendu soit le meilleur (probablement en dernier dans la partie bandeau extra)

Et voilà lightbox est installé.

Comme on ne peut pas spécifier l'attribut rel par la notation wiki, il faut:

  • soit ajouter lb précédé d'un espace à la fin du titre du lien (4ème paramètre du tag wiki lien) pour le mode lightbox standard
  • soit ajouter lb{mon_tag_a_moi} précédé d'un espace à la fin du titre du lien pour le mode slideshowMais si vous êtes sur une plateforme de blog qui ne permet pas l'installation de plugins (comme c'est le cas pour moi avec les gandiblog), vous êtes un peu ennuyé.

Heureusement, il est possible de le faire quand même fonctionner tout de même sur ces plateformes. Voici la méthode:

  1. Télécharger le fichier zip contenant les différents fichiers nécessaires
  2. Télécharger le fichier attaché à ce billet (set_rel_lb.js)

Par exemple, pour la photo en haut de ce billet, a le code wiki suivant:

[((/public/novembre_07/lipetsk/.eglise3_s.jpg||C))|/public/novembre_07/lipetsk/eglise3.jpg|fr|Une jolie église lb]

Pour ce slide-show:

Le code est le suivant:

[((/public/novembre_07/lipetsk/.eglise3_s.jpg|))|/public/novembre_07/lipetsk/eglise3.jpg|fr|Une jolie église lb{231107demo}]
[((/public/novembre_07/lipetsk/.eglise5_s.jpg|))|/public/novembre_07/lipetsk/eglise5.jpg|fr|La même sous un autre angle lb{231107demo}]