Hot and Spicy

Il existe de nombreuses libraires permettant de faire de belles galeries photos. Cette article en présente quelques unes des meilleurs à mon gout ainsi que leur implémentation. Au menu des galeries à base de Javascript (lightbox-like), Flash et full CSS, le tout agrémenté de quelque captures d'aperçu.

Galeries à base de Javascript

Ces galeries sont réalisées à base de Javascript. On les utilisera plutôt dans des pages mêlant textes et images. Mais pas en tant que module de galerie pur.

Leur mise en ouvre est assez simple. Elle se fait directement via le code html de vos pages. De manière générale, sur vos balises a (liens), vous rajouter un attribut rel (ex: rel="lightbox") et un attribut title pour le titre de la photo. Pour plus de détails consultez le site de chacune des libraires.

Malheureusement elles n'offrent que rarement l'interface d'administration permettant en un seul endroit d'uploader, de supprimer, d'éditer, etc…. vos photos.

Lightbox

Lightbox est une des premières librairie de galerie écrite en Javascript. Elle utilise l'excellent Framework Javascript Prototype et des effets graphiques empruntés de Scriptaculous. Le concept est simple, lorsqu'on clique sur une image, le fond est alors grisé et l'image apparait alors au premier plan. On peut aussi créer des groupes d'images et naviguer via des liens "Suivant" et "Précédent" à la manière d'un diaporama. Le cadre blanc autour des photos s'ajuste automatiquement en fonction de la taille de la photo avec un petit effet sympathique (d'abord en largeur puis en longueur). La légende de l'image (extraite de l'attribut title de la balise a) est affichée sous l'image.

A la suite de Lightbox, sont nés de nombreux "clones".

Poids excessif : Une version modifiée de lightbox, "Litebox" a vu le jour afin de réduire la taille de la librarie. Elle utilise la librairie de 3kb moo.fx en association avec prototype.lite

LyteBox

Clone à lightbox qui ne nécessite pas l'utilisation des librairies tierces prototype.js, effects.js, et scriptaculous.js. Rajout en plus des fonctionnalités comme le support d'un mode diaporama, la possibilité de gérer des "Thèmes" pour personnaliser l'apparence …

Slimbox

Clone identique à lightbox mais se dit être plus léger (basé sur l'énormissime Mootools).

YUI based lightbox

Clone basé sur le framework made in Yahoo YUI).

Clearbox

Clearbox est un clone très réussi. Il a la particularité d'afficher en dessous de l'image, toutes les autres du même groupe (cf capture numéro 2). De même que Lighbox, la taille du cadre varie en fonction de la taille de l'image (cette fois, le redimensionnement est effectué en largeur et hauteur simultanément).

TripTracker Slideshow

Greybox

Pour celui-ci, une barre de navigation est affichée en haut de la page (contenant aussi la légende).

Thickbox

Highslide

LightWindow

Couloir.org

Un "clone" très léger avec redimensionnement en fonction de la taille de l'image et navigation élémentaire.

Galeries à base de Javascript: les autres

(E)2 Photo Gallery

Une galerie Javascript basée sur mootools. Plutôt bien finie.

JQuery UI

Une galerie Javascript basée sur YUI. Intègre des caractéristiques plutôt réussies telles que tris, la sélections, redimensionnements, zooms, …

SmoothGalery

Galeries à base de Flash

Ces galeries sont réalisées à base de Flash. On les utilise en tant que module dédié aux galeries photos. Elles supportent souvent une interface d'administration pour la gestion des photos (en php, ou autre). Les photos sont soit stockés en base de données (mysql par exemple) ou dans des fichiers xml.

Leur prise en main peut être parfois plus délicate mais rien de bien sorcier. (la capture du haut représente la galerie et celle du bas l'interface d'administration si elle existe).

dfGallery

Tout simplement la rolls des galeries à mon goût. Une liste de caractéristiques impressionnante parmi lesquelles l'intégration avec Flickr , Picasa , Fotki, Photobucket, support RSS, template "fluide" en largeur, fond sonore en MP3, diaporama …. Le seul reproche à lui faire est l'absence d'interface d'administration (tout se fait dans un fichier XML, c'est très bien expliqué dans la documentation de la galerie) mais les finitions sont telles que l'on oublie vite ce petit défaut.

Polaroid Gallery

Un de mes coups de coeur tant c'est bien réalisé. Très bien réalisée, cette galerie présente vos photos comme "jetées" sur une table. Vous pouvez alors faire du drag and drop pour les placer à votre guise. Un double clic sur une image l'affiche en grand avec la légende. S'intègre avec Flickr (entrez simplement votre identifiant Flickr et le tour est joué) ou bien directement vos photos via un fichier XML.

PicsEngine

Une galerie full Flash très réussie avec le backend d'administration en php/AJAX qui va bien. Cette galerie possède une belle finition et intègre aussi une gestion des commentaires sur vos photos.

Flash Image Gallery

Galerie sympa mais un peu light en effets. Possède une interface d'administration.

The Flash XML Gallery

Tout simplement superbe, intégration avec flickr, picasa, gestion des albums, mode diaporama, … En revanche ne possède pas d'interfaces d'administration, tout se gère via un fichier XML.

Galeries à base de CSS uniquement

Les galeries suivantes sont toutes extraites de l'incroyable site CSSplay et sont construites uniquement avec du CSS.

A lire également

• 27 mars 2008 -- Un beau logo pour Kohana (0)
• 5 octobre 2007 -- Epicez vos designs: galerie de tableaux (0)
• 5 octobre 2007 -- Epicez vos designs: galerie de dates (1)
• 2 septembre 2007 -- Epicez vos designs: attendre avec style le chargement des pages et événements (AJAX loading gifs) (0)