Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save petermolnar/b5bd11d202ca0eec68a28d39c89b1004 to your computer and use it in GitHub Desktop.
Save petermolnar/b5bd11d202ca0eec68a28d39c89b1004 to your computer and use it in GitHub Desktop.
extremely simple vanilla js lightbox
var links2img = []
function initLightbox() {
var links = document.getElementsByTagName("a");
for(var i = links.length; i--; ) {
var imginside = links[i].getElementsByTagName("img");
if (imginside.length == 1 ) {
links2img.push(links[i])
console.log(links[i]);
links[i].onclick = openLightbox;
}
}
}
function openLightbox(e) {
var lightbox = document.createElement('div');
lightbox.style.width = "98%";
lightbox.style.height = "98%";
lightbox.style.padding = "1%";
lightbox.style.position = "fixed";
lightbox.style.top = "0";
lightbox.style.left = "0";
lightbox.style.display = "table";
lightbox.style.zIndex = "999";
lightbox.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
lightbox.addEventListener('click', function(){
closeLightbox(lightbox);
});
var fig = document.createElement('figure');
fig.style.display = "table-cell";
fig.style.align = "center";
fig.style.verticalAlign = "middle";
var img = document.createElement('img');
img.src = e.target.parentNode.href;
fig.appendChild(img);
lightbox.appendChild(fig);
e.target.parentNode.appendChild(lightbox);
return false;
}
function closeLightbox(t) {
console.log(t);
t.parentNode.removeChild(t);
return false;
}
initLightbox();
@DevFelixDorn
Copy link

Thanks ! Great job.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment