Web design and hosting, database, cloud and social media solutions that deliver real business results
  • Business Solutions
    • Robotic Process Automation
    • Bespoke Software
    • Database Services
      • Data Integration
      • Datawarehouse Services
      • Power BI
    • Web Services
      • Logo Design
      • Payment Gateways
      • Web Site Optimisation
      • Web Site Security
      • Technical Tools
    • Cloud Services
      • Amazon Web Services
      • Google Cloud Services
      • Microsoft Azure
    • Microsoft Office
    • Social Media Services
  • Academy
    • Our Test Environment
    • Learning Databases
      • The Basics
      • Get Open Query
      • SQL Server Data
      • SQL Server Maintenance
      • Using SQL Server Dates
      • Using SQL Server Functions
      • Using SQL Server Pivot-Unpivot
      • Technical Tools
    • Learning Web Design
      • Building Ousia Content Management System
      • Using ASP-NET
      • Using CSS
      • Using JavaScript
    • Learning Cloud and IT Services
      • Task Scheduler Error 2147943645
      • Requesting SSL and Generation of PFX file in OpenSSL Simple Steps
    • Using Social Media
      • Asking for a Google Review
      • Changing a Facebook account from personal to business
      • Choosing where to focus Social Media effort
      • Social Media Image Sizes
      • Using Meta Data to set Social Media Images
  • About
    • Blog
      • Building an entry level gaming machine
      • Google Core Update Jan 2020
      • Hot Chilli Internet Closure
      • How To Choose Content For Your Website Adverts Leaflets
      • Preventing Online Scam
      • Skimmers of the gig economy
      • The most annoying things about websites on the Internet
      • Top 5 websites for free Vector Graphics
    • Portfolio
    • Team
      • Adrian Anandan
      • Ali Al Amine
      • Ayse Hur
      • Chester Copperpot
      • Fernando Ancona Camara
      • Gavin Clayton
      • Sai Gangu
      • Suneel Kumar
      • Surya Mukkamala
      • Trevor Momanyi

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 1, no caption

Image and Caption

Image 2, with caption
Image 2, with caption

Hyperlink - No Caption

Image 3, wrapped in a hyperlink, no caption

Hyperlink - With Caption

Image 4, wrapped in a hyperlink with caption
Image 4, wrapped in a 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/Website-Design/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/Website-Design/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

var lightBoxImgs = [];
var lightBoxDiv;
var lightBoxDivInner;
var lightBoxImg;
var lightBoxCur;
var lightBoxTot;
var lightBoxDivDesc;
var lightBoxThumb;
 
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;}
Copyright Claytabase Ltd 2021, registered in England and Wales 08985867

Site Links

RSS Login ContactCookie PolicySitemap

Social Media

facebook.com/Claytabaseinstagram.com/claytabase/twitter.com/Claytabaselinkedin.com/company/claytabase-ltd

Get in Touch

+442392064871info@claytabase.co.ukGround Floor, Building 1000, Lakeside North Harbour, Western Road, Portsmouth, Hampshire, United Kingdom, PO6 3EZ

Partnered With

Partners
The settings on this site are set to allow all cookies. These can be changed on our Cookie Policy & Settings page.
By continuing to use this site you agree to the use of cookies.
Ousia Logo
Ousia CMS Loader