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(); +});