Générateur de galeries lightbox pour GuppY
Cela faisait un moment que je travaillais sur ce générateur de galeries d'images - à vrai dire, depuis que j'ai découvert l'extraordinaire script lightbox.js de Lokesh Dhakar - mais j'ai eu bien du mal à en venir à bout !
Lightbox.js est un javascript qui permet d'afficher, en surimpression sur la page, une image agrandie à partir d'un clic sur sa vignette. L'effet produit est très élégant et permet de se passer des traditionnelles et encombrantes popups propres aux galeries d'images. En outre, le script se dégrade gracieusement sur les vieux navigateurs et dans le cas où le javascript est désactivé. Bref, après plus de 15 heures de brainstorming intensif, j'ai réussi à mettre au point une version bêta.
Démonstrations
Voici donc un exemple de mini-galerie, insérée dans un billet et créée très simplement avec ce nouveau générateur (en version bêta ; utilisez-le à vos risques et périls) :
Notez que l'effet d'agrandissement est beaucoup plus joli avec FF qu'avec IE, as usual
Edit [2.04.2006] : ceci est corrigé dans la dernière version du script, qui n'utilise plus d'image de fond, mais les filtres d'opacité.
Les galeries générées peuvent également être insérées dans un article [démonstration ici].
En outre, un second générateur permet de créer des galeries similaires, exploitant le même script, mais basées sur le modèle sample.php et entreposables dans le dossier pages/ de GuppY sous forme de pages externes [démonstration ici]. Toutefois, il faut que j'adapte ce générateur à la version 4.5.12 de GuppY, car les pages qu'il produit actuellement ne fonctionnent qu'avec les versions 3.04 de GuppY...
Précisions importantes
Je dois d'abord préciser que les miniatures ne sont pas de vraies miniatures : en fait, il s'agit des images affichées à une taille très réduite (et paramétrable). Il serait sans doute intéressant d'utiliser la librairie GD2 qui automatise la création de vraies miniatures, pour réduire le poids de la planche de vignettes et accélérer son chargement. Mais, d'une part, je ne sais pas manipuler cette librairie et, d'autre part, je voulais, dans un souci de simplicité, réduire les manipulations au minimum. De fait, après avoir uploadé les 5 3 fichiers indiqués (manipulation à ne faire qu'une seule fois), il suffit de créer un sous-dossier d'images dans le dossier img/ de GuppY, de générer le code avec l'un des générateurs et de le coller pour obtenir une galerie fonctionnelle et élégante.
Je dois également préciser que, pour fonctionner, cette galerie nécessite l'insertion de 2 lignes de codes dans le fichier inc/hpage.inc de GuppY. Pour le reste, le code est totalement indépendant des fichiers-source de GuppY.
Les utilisateurs avancés peuvent insérer des commentaires sur les images, soit sur toutes, soit sur une partie d'entre elles seulement. Toutefois, il faut intervenir manuellement sur le code généré et cela suppose donc une familiarité minimale avec le code HTML. Il suffit de localiser les attributs title des images dans le code généré et de remplir cet attribut avec la légende, comme ceci :
<a rel="lightbox" href="img/test/test7.jpg" title="Et hop un commentaire ici !"><img src="img/test/test7.jpg" width="100" height="75" alt="Agrandir l'image" /></a>
Par ailleurs, je dois avouer qu'actuellement les galeries générées reposent sur une structure tabulaire, ce qui n'est guère orthodoxe... La prochaine version devrait évoluer vers une mise en page en DIV floatées, assorties d'un traitement en CSS.
Last, but not least, j'ajoute que le code généré est propre et passe avec succès l'épreuve redoutée de la validation W3C.
Nouvelle version
Evidemment, je viens de m'apercevoir qu'il y a deux jours que Lokesh Dhakar a sorti la version 2.01 de lightbox.js, dont vous pourrez admirer une démonstration bluffante sur cette page. Cela dit, la mise en place du script devient plus lourde, puisque l'auteur utilise deux librairies Ajax très à la mode, à savoir Prototype.js et script.aculo.us. Ces librairies permettent de créer des effets d'animations impressionnants, comme le montre la démo, mais les ajouter dans GuppY risque d'augmenter considérablement le nombre de javascripts que chaque page doit supporter, d'une part, et d'autre part, d'alourdir le poids des pages. Aussi vais-je m'en tenir pour le moment à la version 1, en empruntant quelques corrections à la version 2.
J'ai ainsi modifié la feuille de style lightbox.css en m'inspirant des changements apportés dans la version 2.01. Désormais, les images de fond, overlay.png et blank.gif ne sont plus nécessaires. L'effet de superposition est ainsi plus léger et aussi joli avec IE qu'avec FF.
Enfin, Vanix a signalé un couic se produisant avec IE, mais pas avec FF : en effet, les menus déroulants (exemple : celui de ma boîte de recherche) "trouent" les images agrandies et le "voile sombre". J'ai pensé qu'il s'agissait d'une histoire de z-index à régler dans la CSS, mais mes essais se sont révélés inconcluants. Je poursuis néanmoins les recherches...
Edit [14h43] : Vanix a trouvé une parade pour corriger cet ultime couic des menus déroulants. J'ai mis à jour le fichier lightbox.js en conséquence.
Road map
Dans un premier temps, j'aimerais mettre à jour le générateur de galeries externes, pour les utilisateurs de la dernière version 4.5 de GuppY.
Ensuite, je souhaiterais remplacer la présentation tabulaire, un peu lourde, par une présentation en DIV floatées.
Enfin, je m'apprête à contacter Nicolas, pour voir s'il ne pourrait pas inclure ce script en option dans le dernier plugin de diaporama qu'il est en train de développer. Ce plugin a l'avantage de générer des miniatures des images classées par catégories et cela permettrait d'accélérer le chargement des pages et d'automatiser la création de galeries thématiques.
Saute-Mouton - http://realia.free.fr/sautemouton_avril/newsprt.php?lng=fr&pg=2257 - [Version PDF]
