From 4cb9d21fb8860d3401db5d94d30c309385599a2e Mon Sep 17 00:00:00 2001 From: Eltrac Date: Mon, 15 Sep 2025 10:10:29 +0800 Subject: initial commit --- src/lightbox.js | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 src/lightbox.js (limited to 'src/lightbox.js') diff --git a/src/lightbox.js b/src/lightbox.js new file mode 100644 index 0000000..60e8518 --- /dev/null +++ b/src/lightbox.js @@ -0,0 +1,51 @@ +import utility from './utility.js'; +import Overlay from './overlay.js'; +import Shadow from './shadow.js'; + +export default class LightBox { + overlay = new Overlay(); + + constructor({ container }) { + this.container = container; + this.init(); + } + + init() { + const container = document.querySelectorAll(this.container); + const images = document.querySelectorAll(`${this.container} img[data-libo]`); + + images.forEach(image => { + // generate unique id for image + const id = utility.generateUniqueId(image.src); + image.id = id; + + // get parent and wrap image with a link if it's not already wrapped + const parent = image.parentElement; + let link; + if (!parent || parent.tagName !== 'A') { + link = document.createElement('a'); + link.href = image.src; + link.dataset.liboLink = true; + + parent.insertBefore(link, image); + link.appendChild(image); + } else { + link = parent; + } + + // add event listener to open lightbox on click + link.addEventListener('click', e => { + e.preventDefault(); + this.openLightBox(image); + }); + + }); + } + + openLightBox(image) { + const shadow = new Shadow(image); + this.overlay.add(shadow); + this.overlay.show(); + shadow.zoom(); + } +} -- cgit v1.2.3