Galerie photo en lightbox

Stéphane Gaudry

il y a 8 ans

Pour un meilleur confort de navigation, photobrol propose à présent de visiter la galerie photo en mode « lightbox ».

La photo à afficher en plein écran... (infos)

Lightbox

La photo est affichée en pleine page (mais toujours pas en résolution maximum; une photo est générée automatiquement en 2048px pour ne pas que ce soit trop lourd à afficher), avec un minimum d’information.

Seul le titre de la photo s’affiche en bas (précédé du titre de l’album si on navigue dans un album), et une description courte si elle est présente.

Exemples de navigation en mode lightbox

Navigation lightbox selon l’ordre dans lequel les photos sont postées dans la galerie: https://www.gaudry.be/photos/1/lightbox/
Navigation lightbox au sein d’un album : https://www.gaudry.be/photos/set-gaschurn/265560150446271787701117/lightbox/

Si la photo est verticale, elle s’affiche sur toute la hauteur de l’écran, si elle est horizontale, elle s’affiche dans la plus grande largeur possible, pour autant qu’elle ne dépasse pas la hauteur de l’écran.

Une photo verticale. Elle prend donc la hauteur de l’écran, ce qui réduit sa largeur. Le titre est à peine visible à cause des éléments de la photo. Le titre disparait progressivement pour ne pas empiéter sur la photo.

Au survol de la souris, le titre s’affiche en surbrillance et ici le fond est obscurci pour faciliter la lecture.

Le titre s’affiche faiblement, centré horizontalement en bas de l’écran, et au survol de la souris s’affiche plus fortement, obscurcissant la photo si nécessaire.

A gauche et à droite, au survol de la photo des flèches apparaissent pour permettre de passer à la photo suivante ou la photo précédente (mais la navigation est plus facile au clavier si on n’est pas sur une tablette ou un smartphone).

Je dois encore améliorer plein de choses, mais c’est en cours, petit à petit. par exemple, le balayage vers la droite ou la gauche sur un smartphone n’est pas encore implémenté.

Pour plus d’informations sur une photo, il suffit de cliquer sur la photo. La fin de l’adresse (/lightbox/) est replacée par l’extension par défaut (.html). Exemple: https://www.gaudry.be/photos/1.html

Pour info, les albums se trouvent ici: https://www.gaudry.be/photos/sets.html

Navigation avec clavier

Il est possible, comme dans le reste du site, de naviguer de page en page (ici de photo en photo) en utilisant les flèches gauche et droite du clavier.

En mode lightbox, il suffit de presser la touche d’échappement (Esc) pour retourner au site.

Pour optimiser encore le confort de navigation, vous pouvez presser la touche F11 de votre clavier, et le navigateur devrait passer en plein écran.

Autres moyens de navigation

Affichage des photos d’un album (ici l’Italie). Un clic sur une des vignettes lance un popup pour une lightbox basique. Un clic sur la photo de la lightbox permet de passer en lightbox complète, plein écran.

Il est possible de naviguer selon les metadonnées des photos. Ici dans cet exemple, le flux parcourt les photos prises avec une ouverture de 1.4

Un autre type de metadonnée: l’objectif utilisé. Ce n’est qu’un exemple, mais il y a aussi l’appareil photo, la vitesse d’obturation, la sensibilité, le format, la date…

Les statistiques peuvent aussi s’afficher sous forme de diagramme, ce qui permet de mieux visualiser la répartition des valeurs. Il est possible de cliquer sur chaque partie du diagramme, de trier ou de filtrer le tableau de résultats. Un clic sur une valeur du diagramme ou du tableau affiche le flux de photos correspondant.

Pour chaque photo, il existe des tags (des étiquettes) qui permettent de naviguer indépendamment des albums ou des metadonnées. Ici, l’affichage des photos en rapport avec un « coucher de soleil ».

Dans les coulisses

Les photos et les pages sont à présent normalement en cache (sauf si le cache vient d’être vidé). Par contre, si vous activez le mode utilisateur, la navigation se fait sans cache.

Si vous avez des remarques ou des suggestions, les commentaires me permettent aussi d’avancer ;-)

Bonne lecture.