diff --git a/acf-blocks/lightbox-gallery/lightbox-gallery.php b/acf-blocks/lightbox-gallery/lightbox-gallery.php
index 460f3cf..89199e1 100644
--- a/acf-blocks/lightbox-gallery/lightbox-gallery.php
+++ b/acf-blocks/lightbox-gallery/lightbox-gallery.php
@@ -7,13 +7,13 @@ $galleryDatas = get_field('gallery');
-
-
+
Fermer
@@ -22,7 +22,7 @@ $galleryDatas = get_field('gallery');
' alt=''>
-

+
' alt=''>
diff --git a/acf-blocks/lightbox-gallery/lightbox.js b/acf-blocks/lightbox-gallery/lightbox.js
index aba5fcf..16691b7 100644
--- a/acf-blocks/lightbox-gallery/lightbox.js
+++ b/acf-blocks/lightbox-gallery/lightbox.js
@@ -9,15 +9,18 @@ class Lightbox {
if (this.gallery) {
this.pictures = this.gallery.querySelectorAll("img.lightbox-gallery__picture");
+ this.lightboxTriggers = this.gallery.querySelectorAll(".lightbox-gallery__trigger");
this.init();
}
}
init() {
- this.pictures.forEach((picture, index) => {
- picture.addEventListener("click", () => {
+ this.setCurrentPicture(this.pictures);
+
+ this.lightboxTriggers.forEach((button, index) => {
+ button.addEventListener("click", () => {
this.showLightbox();
- this.setCurrentPicture(picture);
+ this.setCurrentPicture(this.pictures[index]);
this.setCurrentPictureIndex(index);
});
});
@@ -46,17 +49,24 @@ class Lightbox {
if (event.key === "ArrowRight") {
this.showNextPicture();
}
+ if (event.key === "TaEnter") {
+ this.showNextPicture();
+ }
});
}
showLightbox() {
this.lightbox.classList.remove("lightbox--inactive");
this.lightbox.classList.add("lightbox--active");
+ this.closeButton.focus();
+ this.lightbox.setAttribute("aria-hidden", "false");
}
hideLightbox() {
this.lightbox.classList.remove("lightbox--active");
this.lightbox.classList.add("lightbox--inactive");
+ this.lightbox.setAttribute("aria-hidden", "true");
+ this.lightboxTriggers[this.currentPictureIndex].focus();
}
setCurrentPicture(picture) {
@@ -67,7 +77,6 @@ class Lightbox {
setCurrentPictureIndex(index) {
this.currentPictureIndex = index;
}
-
showPreviousPicture() {
if (this.currentPictureIndex > 0) {
this.currentPictureIndex--;
diff --git a/acf-blocks/lightbox-gallery/lightbox_old.js b/acf-blocks/lightbox-gallery/lightbox_old.js
new file mode 100644
index 0000000..04746d4
--- /dev/null
+++ b/acf-blocks/lightbox-gallery/lightbox_old.js
@@ -0,0 +1,95 @@
+class Lightbox {
+ constructor() {
+ this.lightbox = document.querySelector(".lightbox");
+ 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.currentPictureIndex = 0;
+
+ if (this.gallery) {
+ this.pictures = this.gallery.querySelectorAll("img.lightbox-gallery__picture");
+ this.init();
+ }
+ }
+
+ init() {
+ this.pictures.forEach((picture, index) => {
+ picture.addEventListener("click", () => {
+ this.showLightbox();
+ this.setCurrentPicture(picture);
+ this.setCurrentPictureIndex(index);
+ });
+ });
+
+ this.closeButton.addEventListener("click", () => {
+ this.hideLightbox();
+ });
+
+ this.prevButton.addEventListener("click", () => {
+ this.showPreviousPicture();
+ });
+
+ this.nextButton.addEventListener("click", () => {
+ this.showNextPicture();
+ });
+
+ document.addEventListener("keydown", (event) => {
+ if (event.key === "Escape") {
+ this.hideLightbox();
+ }
+
+ if (event.key === "ArrowLeft") {
+ this.showPreviousPicture();
+ }
+
+ if (event.key === "ArrowRight") {
+ this.showNextPicture();
+ }
+ });
+ }
+
+ showLightbox() {
+ this.lightbox.classList.remove("lightbox--inactive");
+ this.lightbox.classList.add("lightbox--active");
+ this.closeButton.focus();
+ this.lightbox.setAttribute("aria-hidden", "false");
+ }
+
+ hideLightbox() {
+ this.lightbox.classList.remove("lightbox--active");
+ this.lightbox.classList.add("lightbox--inactive");
+ this.lightbox.setAttribute("aria-hidden", "true");
+ }
+
+ setCurrentPicture(picture) {
+ const viewedPicture = this.lightbox.querySelector(".lightbox__current-picture img");
+ viewedPicture.src = picture.src;
+ }
+
+ setCurrentPictureIndex(index) {
+ this.currentPictureIndex = index;
+ }
+
+ showPreviousPicture() {
+ if (this.currentPictureIndex > 0) {
+ this.currentPictureIndex--;
+ } else {
+ this.currentPictureIndex = this.pictures.length - 1;
+ }
+ this.setCurrentPicture(this.pictures[this.currentPictureIndex]);
+ }
+
+ showNextPicture() {
+ if (this.currentPictureIndex < this.pictures.length - 1) {
+ this.currentPictureIndex++;
+ } else {
+ this.currentPictureIndex = 0;
+ }
+ this.setCurrentPicture(this.pictures[this.currentPictureIndex]);
+ }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+ new Lightbox();
+});