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
$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") ?>'>

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

@ -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);
});
});