From c86b64fe69c1a80897cda735bfcec103f7d67a71 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Tue, 8 Apr 2025 12:14:20 +0200
Subject: [PATCH] FEATURE Enhance lightbox gallery functionality by adding
 image descriptions and captions. Update JavaScript to initialize multiple
 lightbox instances and improve accessibility features.

---
 .../lightbox-gallery/lightbox-gallery.php     | 16 ++++++------
 acf-blocks/lightbox-gallery/lightbox.js       | 25 +++++++++++--------
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/acf-blocks/lightbox-gallery/lightbox-gallery.php b/acf-blocks/lightbox-gallery/lightbox-gallery.php
index 89199e1..e19c1d2 100644
--- a/acf-blocks/lightbox-gallery/lightbox-gallery.php
+++ b/acf-blocks/lightbox-gallery/lightbox-gallery.php
@@ -1,16 +1,15 @@
 <?php
 $galleryDatas = get_field('gallery');
-// echo '<pre>';
-// print_r($galleryDatas);
-// echo '</pre>';
 ?>
 
 <div class="lightbox-gallery">
-	<?php foreach ($galleryDatas as $picture): ?>
-		<button class="lightbox-gallery__trigger">
-			<img class="lightbox-gallery__picture" src="<?php echo $picture['url'] ?>" alt="<?php echo $picture['alt'] ?>" />
-		</button>
-	<?php endforeach; ?>
+	<?php if ($galleryDatas): ?>
+		<?php foreach ($galleryDatas as $picture): ?>
+			<button class="lightbox-gallery__trigger">
+				<img class="lightbox-gallery__picture" src="<?php echo $picture['url'] ?>" data-description="<?php echo $picture['description'] ?>" data-caption="<?php echo $picture['caption'] ?>" alt="<?php echo $picture['alt'] ?>" />
+			</button>
+		<?php endforeach; ?>
+	<?php endif; ?>
 </div>
 
 <div class="lightbox lightbox--inactive" aria-hidden="true">
@@ -23,6 +22,7 @@ $galleryDatas = get_field('gallery');
 		</button>
 		<div class="lightbox__current-picture">
 			<img src="" alt="" />
+			<p class="lightbox__current-picture-description"></p>
 		</div>
 		<button class="lightbox__next">
 			<img src='<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/slider-next-right.svg'	?>' alt='<?php echo __("Image Suivante", "homegrade-theme__texte-fonctionnel") ?>'>
diff --git a/acf-blocks/lightbox-gallery/lightbox.js b/acf-blocks/lightbox-gallery/lightbox.js
index 16691b7..15e1350 100644
--- a/acf-blocks/lightbox-gallery/lightbox.js
+++ b/acf-blocks/lightbox-gallery/lightbox.js
@@ -1,10 +1,10 @@
 class Lightbox {
-	constructor() {
-		this.lightbox = document.querySelector(".lightbox");
+	constructor(lightboxElement) {
+		this.lightbox = lightboxElement;
 		this.closeButton = this.lightbox.querySelector(".lightbox__close");
 		this.prevButton = this.lightbox.querySelector(".lightbox__prev");
 		this.nextButton = this.lightbox.querySelector(".lightbox__next");
-		this.gallery = document.querySelector(".lightbox-gallery");
+		this.gallery = this.lightbox.previousElementSibling;
 		this.currentPictureIndex = 0;
 
 		if (this.gallery) {
@@ -15,8 +15,6 @@ class Lightbox {
 	}
 
 	init() {
-		this.setCurrentPicture(this.pictures);
-
 		this.lightboxTriggers.forEach((button, index) => {
 			button.addEventListener("click", () => {
 				this.showLightbox();
@@ -49,9 +47,6 @@ class Lightbox {
 			if (event.key === "ArrowRight") {
 				this.showNextPicture();
 			}
-			if (event.key === "TaEnter") {
-				this.showNextPicture();
-			}
 		});
 	}
 
@@ -66,17 +61,24 @@ class Lightbox {
 		this.lightbox.classList.remove("lightbox--active");
 		this.lightbox.classList.add("lightbox--inactive");
 		this.lightbox.setAttribute("aria-hidden", "true");
-		this.lightboxTriggers[this.currentPictureIndex].focus();
+		// this.lightboxTriggers[this.currentPictureIndex].focus();
 	}
 
 	setCurrentPicture(picture) {
 		const viewedPicture = this.lightbox.querySelector(".lightbox__current-picture img");
+		const viewedDescription = this.lightbox.querySelector(".lightbox__current-picture-description");
+
 		viewedPicture.src = picture.src;
+		viewedPicture.alt = picture.alt;
+
+		const imageDescription = [picture.dataset.description, picture.dataset.caption].filter(Boolean);
+		viewedDescription.textContent = imageDescription.join(" — ");
 	}
 
 	setCurrentPictureIndex(index) {
 		this.currentPictureIndex = index;
 	}
+
 	showPreviousPicture() {
 		if (this.currentPictureIndex > 0) {
 			this.currentPictureIndex--;
@@ -97,5 +99,8 @@ class Lightbox {
 }
 
 document.addEventListener("DOMContentLoaded", () => {
-	new Lightbox();
+	const lightboxes = document.querySelectorAll(".lightbox");
+	lightboxes.forEach((lightboxElement) => {
+		new Lightbox(lightboxElement);
+	});
 });