<h2>img Element</h2>
<img is="light-box" src="https://assets.codepen.io/1804713/ninja2.svg" data-lbsrc="https://assets.codepen.io/1804713/ninja2.svg" alt="Silent but Undeadly Zombie Ninja">
<hr>
<h2>lightbox-polyfill Element</h2>
<lightbox-polyfill src="https://assets.codepen.io/1804713/cowboy.svg" data-lbsrc="https://assets.codepen.io/1804713/cowboy.svg" alt="Silent but Undeadly Zombie Cowboy"></lightbox-polyfill>
img,
lightbox-polyfill {
width: 200px;
height: auto;
display: block;
position: relative;
}
let customBuiltInElementsSupported = false;
customElements.define(
"light-box",
class LightBox extends HTMLImageElement {
constructor() {
super();
customBuiltInElementsSupported = true;
let lb = document.createElement("div");
lb.style.display = "none";
lb.style.position = "absolute";
lb.style.height = "102vh";
lb.style.width = "102vw";
lb.style.top = "-1vh";
lb.style.left = "-1vw";
lb.style.background =
"rgba(0,0,0, 0.7) url(" + this.dataset.lbsrc + ") no-repeat center";
lb.style.backgroundSize = "contain";
lb.addEventListener("click", function (evt) {
this.style.display = "none";
});
this.parentNode.insertBefore(lb, this);
this.addEventListener("click", function (evt) {
lb.style.display = "block";
});
}
},
{ extends: "img" }
);
customElements.define(
"lightbox-polyfill",
class LightBoxPoly extends HTMLElement {
constructor() {
super();
let lb = document.createElement("div");
lb.style.display = "none";
lb.style.position = "absolute";
lb.style.height = "100vh";
lb.style.width = "100vw";
lb.style.top = 0;
lb.style.left = 0;
lb.style.background =
"rgba(0,0,0, 0.7) url(" + this.dataset.lbsrc + ") no-repeat center";
lb.style.backgroundSize = "contain";
const shadowRoot = this.attachShadow({ mode: "open" });
let lbpimg = document.createElement("img");
lbpimg.setAttribute("src", this.getAttribute("src"));
lbpimg.setAttribute("alt", this.getAttribute("alt"));
shadowRoot.appendChild(lb);
shadowRoot.appendChild(lbpimg);
lb.addEventListener("click", function (evt) {
this.style.display = "none";
});
lbpimg.addEventListener("click", function (evt) {
lb.style.display = "block";
});
}
}
);
if (!customBuiltInElementsSupported) {
let lbimgs = document.querySelectorAll('img[is="light-box"]');
for (let i = 0; i < lbimgs.length; i++) {
let replacement = document.createElement("lightbox-polyfill");
replacement.shadowRoot
.querySelector("img")
.setAttribute("src", lbimgs[i].getAttribute("src"));
replacement.shadowRoot
.querySelector("img")
.setAttribute("data-lbsrc", lbimgs[i].dataset.lbsrc);
replacement.shadowRoot.querySelector("div").style.background =
"rgba(0,0,0, 0.7) url(" + lbimgs[i].dataset.lbsrc + ") no-repeat center";
replacement.shadowRoot
.querySelector("img")
.setAttribute("alt", lbimgs[i].getAttribute("alt"));
lbimgs[i].parentNode.insertBefore(replacement, lbimgs[i]);
lbimgs[i].remove();
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.