0

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.

3
Contributors
3
Replies
4
Views
9 Years
Discussion Span
Last Post by aLoushi
0

-if you want a gallery you will have to adapt the lightbox and might as well just use a premade one.

so is this for an individual light box image? if so, what do u suggest for a gallery?? I need 4 to come up as lightbox pics. in your script you have launch lightbox, and it comes up blank, everything darkens out , i get a box with nothing in it. what part of the script do i put my picture in?
thanks

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.