diff --git a/acf-blocks/lightbox-gallery/block.json b/acf-blocks/lightbox-gallery/block.json
new file mode 100644
index 0000000..6b8e6fe
--- /dev/null
+++ b/acf-blocks/lightbox-gallery/block.json
@@ -0,0 +1,26 @@
+{
+ "name": "acf/lightbox-gallery",
+ "title": "Gallerie d'images Lightbox",
+ "category": "homegrade-blocks",
+ "multiple": false,
+ "icon": {
+ "foreground": "#DF1E1E",
+ "src": "location-alt"
+ },
+ "supports": {
+ "anchor": true
+ },
+ "keywords": [
+ "lightbox",
+ "gallerie",
+ "gallery"
+ ],
+ "viewScript": [
+ "file:./lightbox.js",
+ "example-shared-view-script"
+ ],
+ "acf": {
+ "mode": "auto",
+ "renderTemplate": "lightbox-gallery.php"
+ }
+}
\ No newline at end of file
diff --git a/acf-blocks/lightbox-gallery/lightbox-gallery.php b/acf-blocks/lightbox-gallery/lightbox-gallery.php
new file mode 100644
index 0000000..460f3cf
--- /dev/null
+++ b/acf-blocks/lightbox-gallery/lightbox-gallery.php
@@ -0,0 +1,31 @@
+';
+// print_r($galleryDatas);
+// echo '';
+?>
+
+
+
+
+
+
+
+
+
+
+
+
+

+
+
+
+
\ No newline at end of file
diff --git a/acf-blocks/lightbox-gallery/lightbox.js b/acf-blocks/lightbox-gallery/lightbox.js
new file mode 100644
index 0000000..aba5fcf
--- /dev/null
+++ b/acf-blocks/lightbox-gallery/lightbox.js
@@ -0,0 +1,92 @@
+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");
+ }
+
+ hideLightbox() {
+ this.lightbox.classList.remove("lightbox--active");
+ this.lightbox.classList.add("lightbox--inactive");
+ }
+
+ 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();
+});