Antoine/homegrade_blocks_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE Enhance lightbox gallery functionality by adding image descriptions and captions. Update JavaScript to initialize multiple lightbox instances and improve accessibility features.

Browse Source
This commit is contained in:
Antoine M 2025-04-08 12:14:20 +02:00 committed by Nonimart
parent bb68a32e8b
commit c86b64fe69
2 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
acf-blocks/lightbox-gallery/lightbox-gallery.php
View File

@ -1,16 +1,15 @@
<?php <?php
$galleryDatas = get_field('gallery'); $galleryDatas = get_field('gallery');
// echo '<pre>';
// print_r($galleryDatas);
// echo '</pre>';
?> ?>
<div class="lightbox-gallery"> <div class="lightbox-gallery">
<?php foreach ($galleryDatas as $picture): ?> <?php if ($galleryDatas): ?>
<button class="lightbox-gallery__trigger"> <?php foreach ($galleryDatas as $picture): ?>
<img class="lightbox-gallery__picture" src="<?php echo $picture['url'] ?>" alt="<?php echo $picture['alt'] ?>" /> <button class="lightbox-gallery__trigger">
</button> <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'] ?>" />
<?php endforeach; ?> </button>
<?php endforeach; ?>
<?php endif; ?>
</div> </div>
<div class="lightbox lightbox--inactive" aria-hidden="true"> <div class="lightbox lightbox--inactive" aria-hidden="true">
@ -23,6 +22,7 @@ $galleryDatas = get_field('gallery');
</button> </button>
<div class="lightbox__current-picture"> <div class="lightbox__current-picture">
<img src="" alt="" /> <img src="" alt="" />
<p class="lightbox__current-picture-description"></p>
</div> </div>
<button class="lightbox__next"> <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") ?>'> <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") ?>'>

25
acf-blocks/lightbox-gallery/lightbox.js
View File

@ -1,10 +1,10 @@
class Lightbox { class Lightbox {
constructor() { constructor(lightboxElement) {
this.lightbox = document.querySelector(".lightbox"); this.lightbox = lightboxElement;
this.closeButton = this.lightbox.querySelector(".lightbox__close"); this.closeButton = this.lightbox.querySelector(".lightbox__close");
this.prevButton = this.lightbox.querySelector(".lightbox__prev"); this.prevButton = this.lightbox.querySelector(".lightbox__prev");
this.nextButton = this.lightbox.querySelector(".lightbox__next"); this.nextButton = this.lightbox.querySelector(".lightbox__next");
this.gallery = document.querySelector(".lightbox-gallery"); this.gallery = this.lightbox.previousElementSibling;
this.currentPictureIndex = 0; this.currentPictureIndex = 0;
if (this.gallery) { if (this.gallery) {
@ -15,8 +15,6 @@ class Lightbox {
} }
init() { init() {
this.setCurrentPicture(this.pictures);
this.lightboxTriggers.forEach((button, index) => { this.lightboxTriggers.forEach((button, index) => {
button.addEventListener("click", () => { button.addEventListener("click", () => {
this.showLightbox(); this.showLightbox();
@ -49,9 +47,6 @@ class Lightbox {
if (event.key === "ArrowRight") { if (event.key === "ArrowRight") {
this.showNextPicture(); this.showNextPicture();
} }
if (event.key === "TaEnter") {
this.showNextPicture();
}
}); });
} }
@ -66,17 +61,24 @@ class Lightbox {
this.lightbox.classList.remove("lightbox--active"); this.lightbox.classList.remove("lightbox--active");
this.lightbox.classList.add("lightbox--inactive"); this.lightbox.classList.add("lightbox--inactive");
this.lightbox.setAttribute("aria-hidden", "true"); this.lightbox.setAttribute("aria-hidden", "true");
this.lightboxTriggers[this.currentPictureIndex].focus(); // this.lightboxTriggers[this.currentPictureIndex].focus();
} }
setCurrentPicture(picture) { setCurrentPicture(picture) {
const viewedPicture = this.lightbox.querySelector(".lightbox__current-picture img"); const viewedPicture = this.lightbox.querySelector(".lightbox__current-picture img");
const viewedDescription = this.lightbox.querySelector(".lightbox__current-picture-description");
viewedPicture.src = picture.src; viewedPicture.src = picture.src;
viewedPicture.alt = picture.alt;
const imageDescription = [picture.dataset.description, picture.dataset.caption].filter(Boolean);
viewedDescription.textContent = imageDescription.join(" — ");
} }
setCurrentPictureIndex(index) { setCurrentPictureIndex(index) {
this.currentPictureIndex = index; this.currentPictureIndex = index;
} }
showPreviousPicture() { showPreviousPicture() {
if (this.currentPictureIndex > 0) { if (this.currentPictureIndex > 0) {
this.currentPictureIndex--; this.currentPictureIndex--;
@ -97,5 +99,8 @@ class Lightbox {
} }
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
new Lightbox(); const lightboxes = document.querySelectorAll(".lightbox");
lightboxes.forEach((lightboxElement) => {
new Lightbox(lightboxElement);
});
}); });