I found a few simple overlay lightboxes but none would resize with the browser and none were cross browser friendly. This was designed to display a div but uses innerHTML so this could easily be changed to an image, iframe, swf, whatever.
CSS:
html, body {
margin:0;
padding:0;
height:100%;
}
#container {
margin:0 auto;
width:760px;
position:relative;
}
/* Change the top and left to position the content */
#lightbox_content {
position:absolute;
width:514px;
height:690px;
border:5px solid #000;
top:132px;
left:237px;
}
/* This is a clear div over the content, make sure the width is the same as your container */
#lightbox_container {
width:760px;
margin:0 auto;
position:relative;
z-index:100;
}
/* Close form button, can be link or image */
a#close_form {
color:#fff;
position:absolute;
z-index:999;
top:110px;
left:678px;
width:75px;
height:25px;
display:block;
}
/* Adjust overlay opacity below */
#overlay {
position:absolute;
top:0;
left:0;
z-index:99;
width:100%;
height:100%;
background:#000;
filter:alpha(opacity=50);
opacity:.5;
}Javascript:
// Form Lightbox Effect
// Set Lightbox Variable for window.resize function
var lightBoxVar = 0;
// Sizes overlay div to 100% of browser height, either window height or container div height, whatever is taller
function overlaySize() {
winH = document.body.offsetHeight;
totalHeight = document.getElementById('container').offsetHeight;
if(winH > totalHeight) {
document.getElementById('overlay').style.height = winH + "px";
} else {
document.getElementById('overlay').style.height = (totalHeight + 75) + "px";
}
}
// Close the lightbox
function closeWin() {
document.getElementById('overlay').style.display="none";
document.getElementById('lightbox_content').style.display="none";
lightBoxVar = 0;
showSelect(); /* Remove if IE6 code not used below */
}
// Create Overlay and Form Container, add lightbox content to form container
function createDivs() {
var div = document.createElement('div');
var container = document.createElement('div');
div.id = 'overlay';
container.id = 'lightbox_content';
if (document.body.firstChild){
document.body.insertBefore(div, document.body.firstChild);
document.body.insertBefore(container, document.body.firstChild);
} else {
document.body.appendChild(div);
document.body.appendChild(container);
}
}
// Calls create div function, sends zip code variable to iframe url
function showForm() {
removeSelect(); /* Remove if IE6 code not used below */
createDivs();
document.getElementById('overlay').style.display="block";
document.getElementById('lightbox_content').style.display="block";
document.getElementById('lightbox_content').innerHTML="<a href='javascript:closeWin();' id='close_form'><img src='/images/close_btn.gif' id='close_btn' border='0'></a><div id='form_wrap'></div>";
overlaySize();
lightBoxVar = 1;
}
// To make sure the light box overlay resizes with the window
window.onresize = function() {
if(lightBoxVar == 1) {
overlaySize();
}
}
// Hide the selectbox for IE6 fix - Code below is OPTIONAL
var rv = -1;
function getInternetExplorerVersion() {
//var rv = -1;
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
function removeSelect() {
var selectBox = document.getElementsByTagName('select');
var selectObj = selectBox.item(0);
var isIE=/*@cc_on!@*/false;//IE detector
if(isIE){ // IE
getInternetExplorerVersion();
if(rv == 6 && selectBox) {
selectObj.style.display="none";
}
}
}
function showSelect() {
var selectBox = document.getElementsByTagName('select');
var selectObj = selectBox.item(0);
var isIE=/*@cc_on!@*/false;//IE detector
if(isIE){ // IE
getInternetExplorerVersion();
if(rv == 6 && selectBox) {
selectObj.style.display="block";
}
}
}The HTML
<html>
<head>
link to css
link to js
</head>
<body>
<div id="container">your site content, <a href="javascript:showForm();">Launch Lightbox</a></div>
</body>
</html>Anyways this is more to display a form, div, iframe, swf over content and be xbrowser friendly, if you want a gallery you will have to adapt the lightbox and might as well just use a premade one. But this is about 3kb vs 100+kb for the premade ones. Let me know if you have any questions.