Lightbox

readme.txt
index.html
lightbox.css
lightbox.js

What is this?

Lightbox is a solution that loads your image links, your Youtube links and your Vimeo links automatically in a minimalistic and responsive pseudo window/overlay. No adjustment to your code or links is required.

How to use it?

Just add the following code to your footer.

<a href="image.jpg">image</a>
<link rel="stylesheet" href="lightbox.css" />
<script src="lightbox.js"></script>

Features

The lightbox has a smooth fade-in effect, has keyboard support, supports galleries and supports captions.

License

This code is licensed WTFPL.

<div style="height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: 40rem; margin-inline: auto;">
    <p>Lightbox is a solution that loads your <a href="grumpycat2.jpg">image</a> <a href="grumpycat.jpg">links</a>, your <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&amp;showinfo=0&amp;rel=0" target="_blank" rel="noopener">Youtube links</a> and your <a href="https://vimeo.com/132888648" target="_blank">Vimeo links</a> automatically in a minimalistic and responsive pseudo window/overlay. No adjustment to your code or your links is required.</p>
</div>

<link rel="stylesheet" href="/demos/lightbox/lightbox.css" />
<script src="/demos/lightbox/lightbox.js"></script>

#lightbox,
#lightbox::before {
  opacity:0;
  pointer-events:none;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  transition:all .3s ease-in-out
}
#lightbox {
  position:fixed;
  cursor:pointer;
  z-index:9999999;
  line-height:0;
  font-family: sans-serif;
}
#lightbox::before {
  transition:all .3s ease-in-out;
  background:rgba(23, 31, 39, 0.95);
  z-index: 0;
  content:""
}
body.lightbox_visible #lightbox,
body.lightbox_visible #lightbox::before {
  opacity:1;
  pointer-events:all
}
#lightbox .img {
  position:relative;
  top:50%;
  left:50%;
  -ms-transform:translateX(-50%)translateY(-50%);
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  max-width:100%;
  max-height:100%
}
#lightbox .img img {
  opacity:0;
  pointer-events:none;
  width:auto;
  max-width:100%;
}
@media screen and (min-width:1200px) {
  #lightbox .img {
    max-width:1200px
  }
}
@media screen and (min-height:1200px) {
  #lightbox .img {
    max-height:1200px
  }
}
#lightbox span {
  display:block;
  position:fixed;
  bottom:13px;
  height:1.5em;
  line-height:1.4em;
  width:100%;
  text-align:center;
  color:#fff;
  text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000
}
#lightbox span {
  display:none
}
#lightbox .videoWrapperContainer {
  position:relative;
  top:50%;
  left:50%;
  -ms-transform:translateX(-50%)translateY(-50%);
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  width:1200px;
  max-width:100%;
  max-height:100%
}
#lightbox .videoWrapperContainer .videoWrapper {
  height:0;
  line-height:0;
  margin:0;
  padding:0;
  position:relative;
  padding-bottom:56.333%;
  background:#000
}
#lightbox .videoWrapper iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
  display:block
}
#lightbox #prev,
#lightbox #next {
  height:50px;
  line-height:36px;
  display:none;
  margin-top:-25px;
  position:fixed;
  top:50%;
  padding:0 15px;
  cursor:pointer;
  text-decoration:none;
  z-index:99;
  color:#fff;
  font-size:60px
}
#lightbox.gallery #prev,
#lightbox.gallery #next {
  display:block
}
#lightbox #prev {
  left:0
}
#lightbox #next {
  right:0
}
#lightbox #close {
  height:50px;
  width:50px;
  position:fixed;
  cursor:pointer;
  text-decoration:none;
  z-index:99;
  right:0;
  top:0;
  background:0 0 !important
}
#lightbox #close:after,
#lightbox #close:before {
  position:absolute;
  margin-top:22px;
  margin-left:14px;
  content:"";
  height:2px;
  background:#fff;
  width:23px;
  -webkit-transform-origin:50% 50%;
  -moz-transform-origin:50% 50%;
  -o-transform-origin:50% 50%;
  transform-origin:50% 50%;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  -o-transform:rotate(-45deg)
}
#lightbox #close:after {
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg)
}
#lightbox,
#lightbox * {
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}

function is_youtubelink(url) {
    var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
    return (url.match(p)) ? RegExp.$1 : false;
}
function is_imagelink(url) {
    var p = /([a-z\-_0-9\/\:\.]*\.(jpg|jpeg|png|gif|webp))/i;
    return (url.match(p)) ? true : false;
}
function is_vimeolink(url, el) {
    var id = false;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
            if (xmlhttp.status == 200) {
                var response = JSON.parse(xmlhttp.responseText);
                id = response.video_id;
                el.classList.add('lightbox-vimeo');
                el.setAttribute('data-id', id);

                el.addEventListener("click", function (event) {
                    event.preventDefault();
                    document.getElementById('lightbox').innerHTML = '<a id="close"></a><a id="next">&rsaquo;</a><a id="prev">&lsaquo;</a><div class="videoWrapperContainer"><div class="videoWrapper"><iframe src="https://player.vimeo.com/video/' + el.getAttribute('data-id') + '/?autoplay=1&byline=0&title=0&portrait=0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></div>';
                    document.body.classList.add('lightbox_visible');

                    setGallery(this);
                });
            }
            else if (xmlhttp.status == 400) {
                console.log('There was an error 400');
            }
            else {
                console.log('something else other than 200 was returned');
            }
        }
    };
    xmlhttp.open("GET", 'https://vimeo.com/api/oembed.json?url=' + url, true);
    xmlhttp.send();
}
function setGallery(el) {
    var elements = document.body.querySelectorAll(".gallery");
    elements.forEach(element => {
        element.classList.remove('gallery');
    });
    var link_elements = el.parentNode.querySelectorAll("a[class*='lightbox-']");
    link_elements.forEach(link_element => {
        link_element.classList.remove('current');
    });
    link_elements.forEach(link_element => {
        if (el.getAttribute('href') == link_element.getAttribute('href')) {
            link_element.classList.add('current');
        }
    });
    if (link_elements.length > 1) {
        document.getElementById('lightbox').classList.add('gallery');
        link_elements.forEach(link_element => {
            link_element.classList.add('gallery');
        });
    }
    var currentkey;
    var gallery_elements = document.querySelectorAll('a.gallery');
    Object.keys(gallery_elements).forEach(function (k) {
        if (gallery_elements[k].classList.contains('current')) currentkey = k;
    });
    if (currentkey == (gallery_elements.length - 1)) var nextkey = 0;
    else var nextkey = parseInt(currentkey) + 1;
    if (currentkey == 0) var prevkey = (gallery_elements.length - 1);
    else var prevkey = parseInt(currentkey) - 1;

    document.getElementById('next').addEventListener("click", function () {
        gallery_elements[nextkey].click();
    });
    document.getElementById('prev').addEventListener("click", function () {
        gallery_elements[prevkey].click();
    });
}
function getQueryVariable(url, variable) {
    var urlparts = url.split("?");
    var query = urlparts[1];
    if (!query) return false;
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return pair[1];
        }
    }
}

//create lightbox div in the footer
var newdiv = document.createElement("div");
newdiv.setAttribute('id',"lightbox");
document.body.appendChild(newdiv);

//add classes to links to be able to initiate lightboxes
var elements = document.body.querySelectorAll('a');
elements.forEach(element => {
    var url = element.getAttribute('href');
    if (url) {
        if (url.indexOf('vimeo') !== -1 && !element.classList.contains('no-lightbox')) {
            is_vimeolink(url, element);
        }
        if (is_youtubelink(url) && !element.classList.contains('no-lightbox')) {
            element.classList.add('lightbox-youtube');
            element.setAttribute('data-id', is_youtubelink(url));
            if(getQueryVariable(url, 't')) element.setAttribute('data-start', getQueryVariable(url, 't'));
            if(getQueryVariable(url, 'start')) element.setAttribute('data-start', getQueryVariable(url, 'start'));
            if(getQueryVariable(url, 'end')) element.setAttribute('data-end', getQueryVariable(url, 'end'));
            
        }
        if (is_imagelink(url) && !element.classList.contains('no-lightbox')) {
            element.classList.add('lightbox-image');
            var href = element.getAttribute('href');
            var filename = href.split('/').pop();
            var split = filename.split(".");
            var name = split[0];
            element.setAttribute('title', element.innerText);
        }
        if (element.querySelectorAll('img').length > 0) element.classList.add('hasimage');
    }
});


//remove the clicked lightbox
if (document.getElementById('lightbox')) {
    document.getElementById('lightbox').addEventListener("click", function (event) {
        if (event.target.id != 'next' && event.target.id != 'prev') {
            this.innerHTML = '';
            document.body.classList.remove('lightbox_visible');
        }
    });
}

//add the youtube lightbox on click
var elements = document.querySelectorAll('a.lightbox-youtube');
elements.forEach(element => {
    element.addEventListener("click", function (event) {
        event.preventDefault();
        document.getElementById('lightbox').innerHTML = '<a id="close"></a><a id="next">&rsaquo;</a><a id="prev">&lsaquo;</a><div class="videoWrapperContainer"><div class="videoWrapper"><iframe src="https://www.youtube.com/embed/' + this.getAttribute('data-id') + '?autoplay=1&showinfo=0&rel=0&start=' + parseInt(this.getAttribute('data-start')) + '&end=' + parseInt(this.getAttribute('data-end')) +'"></iframe></div>';
        document.body.classList.add('lightbox_visible');
        setGallery(this);
    });
});

//add the image lightbox on click
var elements = document.querySelectorAll('a.lightbox-image');
elements.forEach(element => {
    element.addEventListener("click", function (event) {
        event.preventDefault();
        document.getElementById('lightbox').innerHTML = '<a id="close"></a><a id="next">&rsaquo;</a><a id="prev">&lsaquo;</a><div class="img" style="background: url(\'' + this.getAttribute('href') + '\') center center / contain no-repeat;" title="' + this.getAttribute('title') + '" ><img src="' + this.getAttribute('href') + '" alt="' + this.getAttribute('title') + '" /></div><span>' + this.getAttribute('title') + '</span>';
        document.body.classList.add('lightbox_visible');

        setGallery(this);
    });
});

//add keyboard navigation for lightbox
document.addEventListener('keydown', function (event) {
    var lightbox = document.getElementById('lightbox');
    if (document.body.classList.contains('lightbox_visible')) {
        if (event.key === "Escape") {
            //close lightbox on escape
            lightbox.innerHTML = '';
            document.body.classList.remove('lightbox_visible');
        }
        else if (event.key === "ArrowRight") {
            //next item on right arrow
            if (lightbox.classList.contains('gallery')) {
                document.getElementById('next').click();
            }
        }
        else if (event.key === "ArrowLeft") {
            //previous item on left arrow
            if (lightbox.classList.contains('gallery')) {
                document.getElementById('prev').click();
            }
        }
    }
});

Lightbox by Usecue

What is this?

How to use it?

Features

License