Lightbox

This lightweight Lightbox weighs in at only 6500 bytes, but enables you to display images in a variety of ways with an incredibly simple interface.

Our light box control is a light weight JavaScript plugin that works with any site, and comes as standard as part of our Ousia Content Management System.

It will work well in any of four ways;

Plain image
Image with caption text
Image wrapped in a hyperlink
Image wrapped in a hyperlink with caption

We've set some examples below, and provided all of the code you need to get it up and running.

If you use this in any code then please give us a mention somewhere in your site.

Plain Image

Image and Caption

Hyperlink - No Caption

Hyperlink - With Caption

HTML

<!--Image 1, no caption-->
<div style="text-align: center;">
<img title="Image 1, no caption" src ="https://www.claytabase.co.uk/System/Themes/Default/cb.png" alt="Image 1, no caption" onload="lightBoxPush(this.src,this.alt)" onclick="lightBox(this)"/>
</div>
<!--Image 2, with caption-->
<div style=" text-align: center;">
<figure style="display: inline !important;">
<img title="Image 2, with caption" src="https://www.claytabase.co.uk/System/Ousia/Ousia.png" alt="Image 2, with caption" onload="lightBoxPush(this.src,this.alt)" onclick="lightBox(this)"/>
<figcaption style="text-align: center;">Image 2, with caption</figcaption>
</figure>
</div>
<!--Image 3, wrapped in a hyperlink, no caption-->
<div style="text-align: center;">
<a class="galleryItemDiv" onclick="lightBox(this);return false" href="https://www.claytabase.co.uk/System/Artwork/Logos/MicrosoftPartnerBlack.png" target="_blank">
<img title="Image 3, wrapped in a hyperlink, no caption" src="https://www.claytabase.co.uk/System/Artwork/Logos/MicrosoftPartnerBlack.png" alt="Image 3, wrapped in a hyperlink, no caption" onload="lightBoxPush(this.src,this.alt)"/>
</a>
</div>
<!--Image 4, wrapped in a hyperlink with caption-->
<div style="text-align: center;">
<a class="galleryItemDiv" onclick="lightBox(this);return false" href="https://www.claytabase.co.uk/Business-Solutions/Web-Site-Design-Services/ResponsiveSite.png" target="_blank">
<figure style="display: inline !important;">
<img title="Image 4, wrapped in a hyperlink with caption" src="https://www.claytabase.co.uk/Business-Solutions/Web-Site-Design-Services/ResponsiveSite.png" alt="Image 4, wrapped in a hyperlink with caption" onload="lightBoxPush(this.src,this.alt)"/>
<figcaption style="text-align: center;">Image 4, wrapped in a hyperlink with caption</figcaption>
</figure>
</a>
</div>

JavaScript

function lightBoxCreate() {   
    lightBoxDiv = document.createElement("div");   
    lightBoxDiv.className = "oCdv lightBoxDiv";   
    lightBoxDivInner = document.createElement("div");   
    lightBoxDivInner.className = "lightBoxDivInner";
    var lightBoxDivLight = document.createElement("div");
    lightBoxDivLight.className = "lightBoxDivLight";
    var lightBoxDivLightCont = document.createElement("div");   
    lightBoxDivLightCont.className = "lightBoxDivLightCont";
    lightBoxImg = document.createElement("img");
    lightBoxDivLightCont.appendChild(lightBoxImg);
    var lightBoxDivC = document.createElement("a");   
    lightBoxDivC.className = "lightBoxDivC";
    lightBoxDivC.innerHTML = "X";
    lightBoxDivC.onclick = function () { lightBoxClose(); };
    lightBoxDivLightCont.appendChild(lightBoxDivC);
    var lightBoxDivR = document.createElement("a");
    lightBoxDivR.className = "lightBoxDivR";
    lightBoxDivR.innerHTML = ">";
    lightBoxDivR.onclick = function() { lightBoxR(this); };
    lightBoxDivLightCont.appendChild(lightBoxDivR);
    var lightBoxDivL = document.createElement("a");  
    lightBoxDivL.className = "lightBoxDivL";
    lightBoxDivL.innerHTML = "<";
    lightBoxDivL.onclick = function() { lightBoxL(this); };
    lightBoxDivLightCont.appendChild(lightBoxDivL);
    var lightBoxDivT = document.createElement("span");   
    lightBoxDivT.className = "lightBoxDivT";
    lightBoxCur = document.createElement("span");
    var lightBoxDivT2 = document.createElement("span");
    lightBoxDivT2.innerHTML = "/";
    lightBoxTot = document.createElement("span");
    lightBoxDivT.appendChild(lightBoxCur);   
    lightBoxDivT.appendChild(lightBoxDivT2);
    lightBoxDivT.appendChild(lightBoxTot);
    lightBoxDivLightCont.appendChild(lightBoxDivT);
    lightBoxDivDesc = document.createElement("span");
    lightBoxDivDesc.className = "lightBoxDivDesc";
    lightBoxDivLightCont.appendChild(lightBoxDivDesc);
    lightBoxThumb = document.createElement("div");
    lightBoxThumb.className = "lightBoxDivThumb";
    lightBoxDivThumbInner = document.createElement("div");   
    lightBoxDivThumbInner.className = "lightBoxDivThumbInner";
    lightBoxThumb.appendChild(lightBoxDivThumbInner);
    lightBoxDivLight.appendChild(lightBoxDivLightCont);
    lightBoxDivInner.appendChild(lightBoxDivLight);
    lightBoxDivInner.appendChild(lightBoxThumb);
    lightBoxDiv.appendChild(lightBoxDivInner);
    document.body.appendChild(lightBoxDiv);
}
function lightBoxPush(imgUrl, imgDesc) {   
    if (typeof lightBoxDiv == 'undefined') {
        lightBoxCreate();
    };
    if (lightBoxGet(imgUrl) == -1) {
        lightBoxImgs.push([imgUrl, imgDesc]);
        var x = document.createElement("img");
        x.src = imgUrl;
        x.onclick = function () { lightBoxSet(imgUrl, '0'); };
        lightBoxThumb.children[0].appendChild(x);
    }
}
function lightBoxClose() {
    lightBoxDiv.className = "oCdv lightBoxDiv";
}
function lightBox(galleryItemDiv) {
    lightBoxDiv.className = "oCdv lightBoxDivAct";
    var src;
    if (galleryItemDiv.nodeName == "IMG") {
        src = galleryItemDiv.src;
    }
    else if (galleryItemDiv.children[0].nodeName == "IMG") {
        src = galleryItemDiv.children[0].src;
    }
    else if (galleryItemDiv.children[0].children[0].nodeName == "IMG") {
        src = galleryItemDiv.children[0].children[0].src;
    }
    lightBoxSet(src, 0);
    return false;
}
function lightBoxGet(imgSrc) {
    var result = -1;
    for (var i = 0, len = lightBoxImgs.length; i < len; i++) {
        if (lightBoxImgs[i][0] == imgSrc) {
            result = i;
            return result;
            break;
        };
    }
    return result;
}
function lightBoxSet(src, n) {
    var i = parseInt(lightBoxGet(src)) + parseInt(n);
    if (parseInt([i]) + 1 > parseInt(lightBoxImgs.length)) { i = 0 };
    if ([i] < 0) { i = parseInt(lightBoxImgs.length) - 1 };
    lightBoxImg.src = lightBoxImgs[i][0];
    lightBoxDivDesc.innerHTML = lightBoxImgs[i][1];
    lightBoxCur.innerHTML = parseInt([i]) + 1;
    lightBoxTot.innerHTML = parseInt(lightBoxImgs.length);
}
function lightBoxR(lightBox) {
    var src = lightBoxImg.src;
    lightBoxSet(src, 1);
}
function lightBoxL(lightBox) {
    var src = lightBoxImg.src;
    lightBoxSet(src, -1);
}

CSS

.lightBoxDiv{left:0px;top:0px;width:100%;display:block;opacity:0;}
.lightBoxDivAct{position:fixed;left:0px;top:0px;height:100%;width:100% !important;max-width:100% !important;background-color:#000;z-index:99999999;transition:1s ease;opacity:1;}
.lightBoxDiv .lightBoxDivInner{display:none;}
.lightBoxDivAct.lightBoxDivInner{display:block;}
.lightBoxDivInner{position:relative;max-width:1200px;margin:auto;height:100%;}
.lightBoxDivLight{position:relative;width:100%;height:75%;display:block;}
.lightBoxDivThumb{position:relative;width:100%;height:25%;display:block;white-space:nowrap;overflow:auto;overflow-y:hidden;}
.lightBoxDivThumbInner{height:100%;position:relative;}
.lightBoxDivThumbInner img{height:98%;padding:1% 2%;}
.lightBoxDivC{position:absolute;top:0px;right:0px;width:32px;height:32px;line-height:32px;color:#eee;vertical-align: middle;font-size:22px;font-family:Arial;font-weight:bold;padding:6px 6px;border-radius:10px;cursor:pointer;-webkit-user-select:none;}
.lightBoxDivL{position:absolute;top:50%;left:0px;width:32px;height:64px;line-height:64px;color:#eee;vertical-align: middle;font-size:32px;font-family:Arial;font-weight:bold;padding:0px 6px;margin-top:-38px;cursor:pointer;-webkit-user-select:none;}
.lightBoxDivR{position:absolute;top:50%;right:0px;width:32px;height:64px;line-height:64px;color:#eee;vertical-align: middle;font-size:32px;font-family:Arial;font-weight:bold;padding:0px 6px;margin-top:-38px;cursor:pointer;-webkit-user-select:none;}
.lightBoxDivT{position:absolute;top:0px;left:0px;height:64px;line-height:32px;color:#eee;vertical-align: middle;font-size:22px;font-family:Arial;padding:6px 6px;}
.lightBoxDivDesc{position:absolute;bottom:0px;left:0px;width:100%;line-height:32px;color:#eee;vertical-align: middle;font-size:22px;font-family:Arial;padding:6px 6px;background-color:#111;background-color:rgba(0,0,0,0.3);}
.lightBoxDivL:hover,.lightBoxDivR:hover,.lightBoxDivC:hover{background-color:#555;background-color:rgba(4,4,4,0.8)}   
.lightBoxDivLightCont{position:absolute;top:1%;left:1%;height:98%;width:98%;text-align:center;}
.lightBoxDivLightCont:before{content:' ';display:inline-block;vertical-align:middle;height: 100%;}
.lightBoxDivLightCont img{max-width:96%;max-height:96%;margin:auto;display:inline-block;vertical-align:middle;}