04/03/2009.

Le fonctionnement d’Iptima a changé en un an et demi… ImageManager a été largement oublié… En outre, nous n’utilisons plus l’extension Slimbox ! Nous avons préféré ajouter à notre thème le code de la Slimbox en dur, comme le propose Christophe Beyls, concepteur originel de la Slimbox, avec JQuery.

Nota. L’effet Slimbox n’est pas réservé aux sites fonctionnant sous WordPress !

Pour ne pas pénaliser les lecteurs et dans un but didactique, l’article est laissé en l’état, mais sans les images. Pour autant, nous garantissons que les codes fonctionnaient lors de la rédaction de l’article… même si l’informatique est parfois capricieuse !

</addendum>

Aujourd’hui, nous nous sommes mis en quête d’un outil afin de pouvoir agrandir les photos présentes sur le weblogue.

Sans doute aurions-nous pu nous contenter de l’outil pour agrandir proposé par ImageManager que nous utilisions alors, mais il ne nous satisfaisait pas : nous trouvions la présentation des images austère et nous voulions un effet plus dynamique. Ici, nous avons longtemps hésité entre Lightbox et son fils, Slimbox. Nous avons fini par adopter le dernier pour plusieurs raisons… Nous apprécions son installation, car il ne nécessite pas de modifier certains fichiers. Il permet d’ajouter une légende aux photos agrandies. Il autorise la navigation d’images en images en ajoutant un code simplissime. Enfin, il affiche correctement les caractères accentués et les apostrophes.

Passons à la pratique…

Avec une image

Il est demandé à ImageManager de créer une miniature avec lien sur l’image. ImageManager a généré le code suivant :

<a rel="lightbox" href="/wp-content/uploads/bordeaux/bordeaux_a.jpg"><img src="/wp-content/uploads/bordeaux/.thumbs/.bordeaux_a.jpg" title="le Miroir d'eau à Bordeaux" style="photos" class="photos" width="96" height="72" hspace="5" vspace="5" border="0" /></a>

Pour que la photo agrandie comporte un titre en bas à gauche, il a fallu donner un titre à la lightbox. Le code a été modifié ainsi :

rel="lightbox" title="le Miroir d'eau à Bordeaux"

La photo agrandie comporte alors une image et, sur le côté inférieur, une légende et un bouton fermer.

Avec une galerie d’images

À présent, nous allons voir que Slimbox permet de naviguer entre les images agrandies avec l’instruction rel=lightbox[roundtrip].

Le code généré par ImageManager ne change évidemment pas.

En revanche, l’appel à la lightbox sur chaque image est rédigé comme suit :

rel="lightbox[roadtrip]"

Là encore, il convient de ne pas oublier l’attribut title à la lightbox si l’on veut une légende en bas à gauche de l’image agrandie.

Lorsque l’image est agrandie, la légende de l’image et le bouton fermer sont toujours présents. De plus, il suffit de diriger la souris vers l’un des côtés de l’image pour que les boutons précédent ou suivant apparaissent.

Certes, ces boutons de navigation ne sont guère accessibles… Voilà pourquoi, aucun texte n’invite l’utilisateur à agrandir l’image ! Si l’internaute est novice ou handicapé, il n’utilisera pas le JavaScript, et sa navigation n’en sera pas affectée. Quand au visiteur confirmé, il cliquera sur l’image, mais son expérience lui permettra de naviguer sans difficultés.

Dans la version originale de Slimbox, les boutons étaient en anglais. Nous avons donc voulu les changer. Faute d’avoir réussi à produire un texte net avec nos outils de dessin, nous nous sommes contenté des symboles. Nous avons aussi francisé un terme dans le code JavaScript à la ligne no 144 du fichier slimbox.js afin que le mot of soit remplacé par de. Ainsi peut-on lire Image 1 sur 3 au lieu de Image 1 of 3. Enfin, nous avons modifié la feuille de style afin d’assortir le couleur de fond au reste de notre weblogue.