Swipe my photo

La façon de présenter des images a toujours été au coeur du développement frontend, mais les solutions mises en place n'ont pas toujours été des plus élégantes. Les tendances évoluent au gré des nouvelles librairies: je suis sûr que pratiquement tout le monde se souvient de Lightbox, jQuery Tools Scrollable ou encore Flexslider. Autant de librairies que de tentatives pas toujours réussies d'offrir la meilleure expérience de galerie à l'utilisateur. Mais, histoire d'en rajouter une couche, les smartphones ont débarqué. Adieu Lightbox ou autre fancy plugins impropres à la consommation mobile, et welcome... le carousel de Bootstrap 😭 J'imagine que, tout comme moi, les gens l'ayant utilisé en chantent encore les louanges. Bref, cette période sombre est bien terminée, car voici venue l'ère de Photoswipe !

Une lib en or... plaqué

Photoswipe est certainement le moteur de galerie que tout le monde attendait, même sans le savoir. On peut dire qu'il a tout pour lui. Ultra-swipe-mobile-friendly, bien pensé (zoom, sharing, fullscreen, caption,...) et complètement standalone puisqu'il ne dépend d'aucun framework, même pas jQuery ! Maintenant, je vous invite à aller jeter un petit coup d'oeil à la doc.

Je vous garantis que Photoswipe est un pur bonheur de librairie, pour autant que vous compreniez comment il fonctionne! 😅 Alors, les plus assidus d'entre vous me reprocheront ce commentaire éhonté, mais on ne peut pas dire que la documentation soit des plus simples à aborder. En effet, pour nous, lazy frontend qui avons l'habitude de documentations parfaitement structurées et rapides à prendre en main, une fois que l'on a passé 5 minutes fatidiques à tenter d'assimiler Photoswipe, on duplique la démo 😇.

Ça ne permet sûrement pas de comprendre comment fonctionne le bougre, mais au moins, on a une galerie “fonctionnelle” sur notre site. Tout cela pour dire que la doc n’est pas top et que je vais vous expliquer en quelques lignes de code comment l'utiliser.

Installation

Premièrement, il vous faut installer les quelques dépendances nécessaires à son bon fonctionnement.

Photoswipe arrive avec un skin par défaut, mais, même si je ne vais pas m'étendre sur le sujet, gardez en tête que son apparence est entièrement personnalisable en HTML/CSS/JS.

Ensuite, et ça tout le monde le comprend généralement, il faut ajouter un gros “tas” d'HTML pour faire fonctionner la bête. (À placer à la fin de votre page)

Démarrage

Maintenant que votre environnement est prêt, je vous vois déjà trépigner d'impatience, mais avant le grand plongeon, il s'agit de comprendre son fonctionnement de base. La documentation vous propose un monstrueux et indigeste script d'initialisation, qui fonctionnera très bien... la plupart du temps...

Le mieux est de commencer par la fin. Afin de lancer la galerie, après l'événement click d'une miniature, on va devoir créer une nouvelle instance de PhotoSwipe. Pour cela rien de plus simple :

Cette méthode prend donc quatre arguments :

$pswp est l'objet structurel de la galerie, dans notre cas, le tas d'HTML ci-dessus. Pour le définir, soit document.querySelector('.pswp'), soit avec jQuery : $('.pswp')[0].
PhotoSwipeUI_Default est l'interface utilisée par la librairie, nous garderons celle par défaut, mais une personnalisation est possible.
container est, comme son nom le laisse entendre, le tableau qui va contenir tous les éléments de la galerie. Afin de construire le container, vous avez plusieurs approches possibles, d'où mon envie de commencer pas la fin. Vous pouvez très bien explorer votre DOM avec jQuery afin d'en extraire les informations ou alors vous pouvez construire votre container en amont et l'utiliser pour construire votre markup dans le cas d'une application Angular par exemple.
Et pour finir, options... c'est simplement les options de lancement de la galerie. En bref, vous devez surtout renseigner PhotoSwipe sur la position de départ de la galerie. Le reste concerne l'aspect visuel.

Démonstration

Dans notre exemple, nous allons utiliser la première approche statique de construction du container qui consiste à boucler sur les éléments de la galerie avec jQuery.

Pour cela nous allons définir une structure de base pour notre galerie :

Chaque élément <figure> va contenir le lien vers l'image d'origine, un data-caption pour la légende, des data-width et data-height pour les dimensions de la source et la miniature qui servira d'aperçu.

Ensuite, dans notre script nous allons construire notre tableau container sur la base de notre HTML en définissant pour chaque élément la source, la largeur, la hauteur et le titre (une légende ici) :

Pour finir, nous allons lancer la galerie lorsque l'utilisateur clique sur une miniature en utilisant la fonction .index() de jQuery qui va nous permettre de définir l'image de départ de la galerie :

Et voilà, indolore et fonctionnel !

Conclusion

PhotoSwipe est un outil formidable et hyper flexible à vos besoins. Malheureusement, son indigeste documentation pourra rebuter les moins techniques qui passeront à côté. J'espère donc avoir pu apporter un peu de lumière à ceux-là et démontrer que la construction du “container” n'est pas limitée à jQuery, mais aussi facilement intégrable dans tous les autres frameworks applicatifs que propose le merveilleux monde du JavaScript !