diff options
Diffstat (limited to 'lightbox/lightbox.js')
| -rw-r--r-- | lightbox/lightbox.js | 34 |
1 files changed, 34 insertions, 0 deletions
diff --git a/lightbox/lightbox.js b/lightbox/lightbox.js new file mode 100644 index 0000000..d6b974f --- /dev/null +++ b/lightbox/lightbox.js @@ -0,0 +1,34 @@ +class Lightbox { + constructor(selector) { + this.initalizeTags(selector); + const css = "img.lightbox[data-light-box-id]{cursor:pointer}[data-light-box-wrapper-id]{background-color:#0b0704;position:fixed;top:0;left:0;height:100%;width:100%;display:flex;justify-content:center;align-items:center}[data-light-box-wrapper-id] img{padding:1rem;max-height:calc(100% - 50px);max-width:calc(100% - 50px)}"; + const styleSheet = document.createElement("style"); + styleSheet.innerHTML = css; + styleSheet.dataset.lightboxStyles = "true"; + document.head.appendChild(styleSheet); + } + + openLightbox(id) { + const source = document.querySelector("[data-light-box-id='" + id + "']"); + const wrapper = document.createElement("div"); + wrapper.dataset.lightBoxWrapperId = id; + wrapper.onclick = () => this.closeLightbox(id); + const img = document.createElement("img"); + img.src = source.src; + wrapper.appendChild(img); + document.body.style = "overflow: hidden !important;"; + document.body.appendChild(wrapper); + } + + closeLightbox(id) { + document.querySelector("[data-light-box-wrapper-id='" + id + "']").remove(); + document.body.style.overflow = ""; + } + + initalizeTags(selector) { + document.querySelectorAll(selector).forEach(image => { + image.dataset.lightBoxId = Math.random().toString(36).substring(2) + Date.now().toString(36); + image.onclick = () => this.openLightbox(image.dataset.lightBoxId); + }); + } +}
\ No newline at end of file |