Quel script JavaScript de galerie photo ?

Par Baptiste, le dimanche 16 avril 2006 à 00:00 dans Web :: #34 :: rss

Pour présenter des photos ou de simples images, on peut choisir de mettre directement les liens dans la page ou de faire appel à un script tiers qui améliorera leur affichage/présentation. Ayant récemment eu besoin de quelque chose comme ça, voici quelques unes des solutions qui ont retenu mon attention.

LightBox2 (démo)

Ce script est de mon point de vue le plus intéressant. Totalement non-obstrusif, il s'insère en sur-impression de la page courante, et ne nécessite donc aucun emplacement dédié, c'est là son avantage majeur. Malgré ça, la v2 pèse près de 85ko et est donc extremement lourde. En comparaison, LightBox ne pesait que 25ko (et encore, son portage en utilisant la librairie moofx la rendait plus légère). Évidemment, on dispose maintenant de la gestion des galeries et de jolis mouvements en fondu, mais une telle prise de poids est difficilement acceptable... on s'aperçoit que Lokesh Dhakar a intégré script.aculo.us et donc prototype, mais sans faire le tri : les librairies sont bourrés de fonctions inutiles mais dûres à démêler.
Bref, même si ce script est très bon, il pourrait facilement être bien plus léger ! Allez aussi voir du côté du plugin wordpress, l'auteur a selon lui optimisé la machine...

mooShow (démo)

Très récent, et extrêmement léger. Pour l'instant, il souffre d'importants défauts, mais laissons lui le temps de grandir...
Son avantage majeur est sa rapidité et sa fluidité : on dirait du Flash ! Sans compter son poids ultra-plume qui permet une utilisation à tout va. Mais il est ergonomiquement mal-conçu (les boutons changent toujours de place) et surtout un désastre d'accessibilité : outre les liens sans sens (#1, #2, ...) et est complètement inutilisable sans JavaScript, ce qui en fait une solution encore très imparfaite.

signalé par Manu, le script de Couloir.org (démo)

Fortement similaire à mooShow, il possède les mêmes inconvénients mais est bien plus agréable à l'oeil et à l'utilisation. Quitte à choisir quelque chose d'inaccessible, autant se tourner vers celui-ci.

la galerie photo d'Olivier Patry (reprise par Alsacréations) (démo)

Simplissime, ce script n'en n'est pas moins performant : il récupère simplement les liens qui encadrent une liste de vignettes pour afficher dans un cadre défini l'image en taille réelle (liée), et ce sans aucun effet hype, comme les fondus de mooShow ou de LightBox2 (mais ils ne doivent pas être longs à intégrer). Sans JavaScript, on a toujours la liste de vignettes, totalement utilisable, mais on hérite par contre de l'emplacement dédié à l'affichage des tailles réelles. Ceci dit, vu la taille ridicule de cete solution, on peut bien accepter cette faiblesse. Un bon plan !

Easy Slide Show (démo)

20ko seulement pour ce script très complet. Plus basiquement, il occupe une place bien déterminée dans la page mais comporte par contre quelques fonctionnalités bonus, comme le diaporama, l'affichage des données EXIF ou encore la récupération automatique des images situées dans le répertoire des fichiers. Il ne donne rien JavaScript désactivé, mais cette fois c'est normal, l'établissement de la liste des images se faisant en JS.
Il ne convient pas vraiment aux mêmes besoins que les précédents, puisqu'eux ne se chargent que d'afficher des images évoquées (et listées) dans la page courante.

Hoverbox Image Gallery (démo)

Plus tout à fait dans notre cible, HIG mérite quand même d'être évoqué. Ce script n'en n'est pas un puisqu'il est réalisé entièrement en CSS, mais le rendu est intéressant. Le principe est simple, des miniatures qui, au survol, affichent une image en premier en plan. Léger, simple et efficace ! Bien sûr, cela implique quelques limites, pas de navigation entre les différentes photos par exemple, mais cette solution reste tout de même plutôt sympa. Voir également une variante, HoverLightBox.

Bilan : LightBox c'est super, mais trop lourd ; la galerie photo d'Olivier peut le remplacer si on n'est pas friand de supers effets de la mort qui tue et HIG peut également être une alternative sympa, si on veut de la simplicité avant tout ; ESS est à réserver aux utilisations plus avancées et est à personnaliser pour le rendre agréable. mooShow, on oublie pour le moment

Rétroliens

Aucun rétrolien.

Pour faire un rétrolien sur ce billet : http://www.aozeo.com/blog/retrolien/34

Commentaires

1 - Le dimanche 16 avril 2006 à 12:57, Bader a écrit :

Le script lightbox2 souffre d'importants défauts que tu n'as pas signalé.

Tout d'abord je m'insurge sur ton appellation "non-intrusive" pour la popup. En effet elle est tout ce qu'on peut qualifier d'intrusive et ceux pour plusieurs raisons:

elle rends la page inutilisable, toute action est rendue impossible
en grisant la page elle la rends difficilement lisible et cache le contenu sous la popup
elle n'est fermable avec la souris qu'en cliquant sur la petite croix en bas à droite tout comme une popup standard sauf que cette icone n'est pas situé au même endroit (en haut à droite sur les popups classiques) et donc n'est pas intégré au système de l'utilisateur
elle n'est fermable avec le clavier en appuyant sur la touche 'x' ce qui est totalement non standard et pas du tout évident pour l'utilisateur, alors qu'une popup classique utilise souvent la combinaison Alt-F4 que tout le monde connait

Si seulement il était possible de quitter cette popup en cliquant sur le reste de la page ou même sur la popup elle-même là on pourrait la qualifier de non-intrusive...

Autre point de grande importance, la taille des images, en effet le script lightbox2 ne redimensionne pas les images si elles dépassent la taille de la fenêtre. Essaye un coup tu verras comme c'est désagréable comme comportement...

Lightbox Plus est pour moi pour le moment la seule popup dédiée à l'image qui soit optimale bien qu'elle ne fasse pas gallerie photo.

Le fait que la gallerie photo ne dispose pas d'un emplacement dédiée est pour moi un grave désavantage car celà implique d'en créér un supplémentaire par une popup. Il vaut mieux concevoir son application de telle façon à intégrer la gallerie photo que de la superposer de façon artificielle et nuisible pour l'ergonomie.

Sur la question du poids, bien que la taille soit largement compressable, je ne pense pas qu'elle soit problématique. C'est un faux problème, même avec un modem en RTC avoir accès à une application riche côté client pesant environ 100k est largement rentabilisé par l'économie de rechargement de page. Sachant que ce genre d'applications vise surtout les utilisateurs du haut débit je ne vois pas le problème. Si on veut vraiment alléger une gallerie photo alors on ne met à disposition que le fichier zip contenant toutes les photos. Car ce sont toujours les photos qui pesent le plus lourd sur la page (plusieurs centaines de ko, plusieurs méga octets si on en a plus d'une dizaine). De plus on ne peut pas avoir plus de fonctionnalités, des applications riche et de façon propre sans alourdir la page. Utiliser une bibliothèque alourdit donc la page mais pense aux avantages: homogénéité sur les différentes plateformes et quelque soit le script développé, code plus propre et plus facilement maintenable.

As-tu déjà essayé de modifier ou de patcher un script prééxistant qui n'utilisait pas de bilbiothèque ? C'est nettement plus compliqué que de modifier un script utilisant une bibliothèque !

2 - Le dimanche 16 avril 2006 à 16:18, Baptiste a écrit :

Merci Bader.
Tout d'abord, quand je dis non-intrusif, je veux dire que le comportement (spécial) de la LightBox ne se déclenche que sur une action du visiteur, et est donc recherché. HIG intervient seul et modifie l'affichage de la page sans que l'utilisateur ne l'ait demandé, de la même façon que mooFx.

Par contre, je n'avais pas vraiment pensé aux problèmes d'ergonomie dont tu parles... c'est vrai que ça peut-être déboussolant de ne pas retrouver le schéma type des fenêtres normales, et que sur les grosses images ça donne quelque chose de pas très utilisable (ça je m'en étais rendu compte, mais j'ai contourné le problème, aussi ça m'est un peu sorti de l'esprit).
Mais l'absence d'emplacement dédié est pour moi un avantage, puisque réserver une place à une galerie qui ne sera pas utilisée par tous me semble être en un sens un gachis de place, ou en tout cas une utilisation abusive de celle-ci. Un bon compromis serait l'affichage de la fenêtre photo au clic sur une des vignettes, mais dans la page courante. Ainsi on n'est plus "intrusif" comme tu l'entends, mais on n'occupe pas non-plus de la place inutilement.
Alors bien sûr il faudrait se débrouiller pour intégrer intelligement l'ensemble, mais je pense que la galerie ne devrait apparaître que sur demande expresse de l'internaute et ne pas s'imposer à lui. Un des intêrets étant justement de ne télécharger les photos entières que si on souhaite les afficher.

Je suis aussi d'accord sur ton point de vue sur les bibliothèques, mais je crois qu'utiliser un couteau suisse pour se limer les ongles est disproportionné (désolé pour la comparaison !). Alors éventuellement, un couteau suisse dont on enlève les ciseaux, la scie, le tournevis, la clé USB ;), pour ne garder que la lime, pourquoi pas ? Bien sûr, il faut que le modèle permette d'enlever des outils sans tout bousiller.
Car le poids, ça reste très important... La page de la LightBox se charge théoriquement en 20 secondes pour un 56k. Bien sûr, on est à l'ère du multimédia, mais l'accessibilité passe aussi par la réduction au maximum des temps d'attente... et 20 secondes je trouve pas ça acceptable. Quand on voit le poids de mooFx, du script d'Olivier Patry ou d'ESS, on se demande si une telle taille est vraiment nécessaire pour la LB !

Ceci dit, on attend avec impatience ton script qui va tout roxorer ;)

3 - Le jeudi 20 avril 2006 à 07:29, Manu a écrit :

Tres interessant article. J'ai trouve aussi ca : http://www.couloir.org/js_slideshow/

Mooshow en est inspire. Bonne journee a toi

4 - Le samedi 22 avril 2006 à 22:03, Baptiste a écrit :

Merci Manu, j'ai mis à jour le billet avec le script de couloir.org.

5 - Le samedi 3 juin 2006 à 12:41, marc a écrit :

Ouah, pile ce qu'il me fallait savoir! le lien de lightbox a changé: http://zeo.unic.net.my/notes/lightbox-js-version-20/

6 - Le mardi 4 juillet 2006 à 22:56, davidm a écrit :

Il manque le génialissime snippet MaxiGallery et sa version "Photoblog" pour MODx, qui utilise LightBox2 :)

Pour une démo, voir ici

7 - Le mercredi 5 juillet 2006 à 11:48, Baptiste a écrit :

Je n'ai pas trouvé utile de le mentionner, David, car je parle des solutions de présentation de photos et MaxiGallery n'utilise que LightBox, rien d'innovant en fait ;-)

8 - Le mercredi 19 juillet 2006 à 19:31, Laurent a écrit :

Bonjour, je cherche la solution idéale pour un novice comme moi d'intégrer dans mes articles ce procédé d'aggrandissements dimages, ou diaporamas... je n'arrive pas à l'adapter dans le blog, des conseils ?

9 - Le jeudi 14 septembre 2006 à 06:00, clb56 a écrit :

Bonjour,

concernant la galerie d'Olivier Patry, pour ne pas avoir "l'emplacement dédié à l'affichage des tailles réelles" en cas de JS inactif il suffit de générer cet emplacement en javascript via le DOM en rajoutant à la fonction displayPics() :

Code JS

var referent = document.getElementById('global_galerie') ;

            var new_dl = document.createElement('dl');
            new_dl.id="photo";
            if( !referent.appendChild ) return false;
            referent.appendChild(new_dl);
            var new_dt = document.createElement('dt');
            content_dt=document.createTextNode("blablabla");
            new_dt.appendChild(content_dt);
            new_dl.appendChild(new_dt);
            var new_dd = document.createElement('dd');
            new_dl.appendChild(new_dd);
            var new_img = document.createElement('img');
            new_img.id='big_pict';
            new_dd.appendChild(new_img);

J'ai mis celà en oeuvre dans ce document : http://clb56.freezee.org/test_upload/galerie_resultat_quat.php

PS : Je n'y arrive pas bien avec la barre syntaxe wiki, je met donc tout en texte plein.

10 - Le jeudi 16 août 2007 à 19:54, Lois a écrit :

Bonjour,

J'essaye de monter un référentiel sur les scripts AJAX et DHTML. Je vous propose donc le lien suivant : galerie javascript et ajax

Vous pouvez y ajouter les scripts que vous voulez.

Le blog d'Aozeo