Skip to content

Instantly share code, notes, and snippets.

@navarr
Created December 11, 2009 23:47
Show Gist options
  • Save navarr/254614 to your computer and use it in GitHub Desktop.
Save navarr/254614 to your computer and use it in GitHub Desktop.
Very Simplistic Lightbox Script with specific functions for Images and HTML5 video
function checkForLightbox() {
if (!document.getElementById("lightbox") || !document.getElementById("lightbox_content")) {
createLightbox();
}
}
function createLightbox() {
var body = document.getElementsByTagName("body")[0];
var lightbox = document.createElement("div");
window.lightbox = new Array;
window.lightbox.load = new Array;
window.lightbox.unload = new Array;
lightbox.id = "lightbox";
lightbox.style.position = "fixed";
lightbox.style.top = "0px";
lightbox.style.left = "0px";
lightbox.style.right = "0px";
lightbox.style.bottom = "0px";
lightbox.style.width = "100%";
lightbox.style.height = "100%";
try {
lightbox.style.backgroundColor = "rgba(0,0,0,0.85)";
}
catch (e) {
lightbox.style.backgroundColor = "black";
}
lightbox.style.zIndex = "9000";
lightbox.style.visibility = "hidden";
lightbox.onclick = function () {
hideLightbox();
}
var content = document.createElement("div");
content.id = "lightbox_content";
content.setAttribute("style", "-moz-border-radius: 10px;-webkit-border-radius: 10px");
content.style.position = "fixed";
content.style.top = "50%";
content.style.left = "50%";
try {
content.style.border = "10px solid rgba(255,255,255,0.4)";
}
catch (e) {
content.style.border = "10px solid white";
}
content.style.backgroundColor = "black";
content.style.zIndex = "9002";
content.style.borderRadius = "10px";
content.style.visibility = "hidden";
content.onclick = function () {}
body.appendChild(lightbox);
body.appendChild(content);
setLightboxSize(200, 300);
return true;
}
function addLightboxLoad(command) {
checkForLightbox();
window.lightbox.load[window.lightbox.load.length] = command;
return true;
}
function addLightboxUnload(command) {
checkForLightbox();
window.lightbox.unload[window.lightbox.unload.length] = command;
return true;
}
function setLightboxSize(width, height) {
checkForLightbox();
if (!width) {
width = 300;
}
if (!height) {
height = 300;
}
var marginTop = height / 2;
var marginLeft = width / 2;
var content = document.getElementById("lightbox_content");
content.style.width = width + "px";
content.style.height = height + "px";
content.style.marginTop = ((marginTop * -1) - 10) + "px";
content.style.marginLeft = ((marginLeft * -1) - 10) + "px";
return true;
}
function showLightbox() {
checkForLightbox();
document.getElementById("lightbox").style.visibility = "visible";
document.getElementById("lightbox_content").style.visibility = "visible";
for (i = 0; i < window.lightbox.load.length; i++) {
window.lightbox.load[i]();
}
}
function hideLightbox() {
checkForLightbox();
for (i = 0; i < window.lightbox.unload.length; i++) {
window.lightbox.unload[i]();
}
document.getElementById("lightbox").style.visibility = "hidden";
document.getElementById("lightbox_content").style.visibility = "hidden";
return true;
}
function cleanLightbox() {
checkForLightbox();
window.lightbox.load = new Array;
window.lightbox.unload = new Array;
var div = document.getElementById("lightbox_content");
div.innerHTML = "";
return div.innerHTML;
}
function fillLightbox(html) {
checkForLightbox();
var div = document.getElementById("lightbox_content");
div.innerHTML = html;
return div.innerHTML;
}
function appendLightbox(child) {
checkForLightbox();
var div = document.getElementById("lightbox_content");
div.appendChild(child);
return div.innerHTML;
}
function lightboxVisible() {
checkForLightbox();
var ele = document.getElementById("lightbox");
if (ele.style.visibility == "hidden") {
return false;
}
if (ele.style.visibility == "visible") {
return true;
}
}
// Specialty Lightboxes
function imageLightbox(url) {
cleanLightbox();
var image = new Image;
image.onload = function () {
setLightboxSize(image.width, image.height);
appendLightbox(image);
showLightbox();
}
image.src = url;
}
function videoLightbox(urls, width, height) {
if(!document.createElement('video').canPlayType) { return false; }
cleanLightbox();
var video = document.createElement("video");
video.id = "lightbox_video";
if (width && height) {
video.width = width;
video.height = height;
}
if (urls.constructor.toString().indexOf("Array") == -1) {
video.src = urls;
} else {
for (i = 0; i < urls.length; i++) {
if (urls[i].constructor.toString().indexOf("Array") == -1) {
var tempSrc = document.createElement("source");
tempSrc.src = urls[i];
} else {
var tempSrc = document.createElement("source");
tempSrc.src = urls[i]["src"];
if (urls[i]["type"]) {
tempSrc.type = urls[i]["type"];
}
if (urls[i]["media"]) {
tempSrc.media = urls[i]["media"];
}
}
video.appendChild(tempSrc);
}
}
window.videoLightboxInterval = setInterval(function () {
var video = document.getElementById("lightbox_video");
video.style.borderRadius = "10px";
if (video.readyState == 4 || video.readyState == 3) {
video.controls = true;
if (video.width > 0) {
setLightboxSize(video.width, video.height);
}
else {
setLightboxSize(video.videoWidth, video.videoHeight);
}
showLightbox();
video.play();
clearInterval(window.videoLightboxInterval);
}
}, 50);
appendLightbox(video);
addLightboxUnload(function () {
document.getElementById("lightbox_video").pause();
});
}
function youtubeLightbox(id,width,height) {
cleanLightbox();
if(!width) { width = 854; }
if(!height) { height = 505; }
var div = document.createElement("div");
div.id = "lightbox_youtube_video";
appendLightbox(div);
setLightboxSize(width,height);
var params = { allowScriptAccess: "always" };
var atts = { id: "lightbox_youtube_video" };
swfobject.embedSWF("http://www.youtube.com/v/" + id + "?enablejsapi=1&playerapiid=ytplayer","lightbox_youtube_video","100%","100%","8",null,null,params,atts);
document.getElementById("lightbox_youtube_video").style.visibility = null;
addLightboxUnload(function(){
document.getElementById("lightbox_youtube_video").pauseVideo();
});
}
function onYouTubePlayerReady(playerId) {
showLightbox();
document.getElementById("lightbox_youtube_video").playVideo();
}
function urlLightbox(url,width,height) {
cleanLightbox();
if(!width) { width = 854; }
if(!height) { height = 505; }
var frame = document.createElement("iframe");
frame.setAttribute("frameborder","0");
frame.height = "100%";
frame.width = "100%";
frame.src = url;
frame.style.backgroundColor = "white";
setLightboxSize(width,height);
showLightbox();
appendLightbox(frame);
}
// May be Required...
try {
if(swfobject) { }
} catch(e) {
var script = document.createElement("script");
script.src = "http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js";
document.getElementsByTagName("head")[0].appendChild(script);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment