FREE JavaSCRIPT - Greybox / Lightbox script JS

About

This script function helps user to display any advertisement(ad) or slideshow while the page is visited.

Features

a) This greybox/lightbox javascript overlay images on the current page.
b) Greybox script is like a popup window used in javascript instead it overlaps the previous element like <form>.
c) Lightbox script is used in most web pages to display the advertisement or slideshows while moving the mouse over the image or while loading the page.
d) This script uses iframe tag to hide/overlap the form element.

Preview

Mouse Over the Image

Code

Javascript Code:

<!-- Script by hscripts.com -->
<script type="text/javascript">
var browserName=navigator.appName;
var left_align = 268; // Set the left position to center the greybox
var top_align = 134;  // Set the top position to center the greybox
function disp(){
   if(browserName == "Netscape"){
      var stop = document.documentElement.scrollTop;  
      document.getElementById('ebox1').style.height=document.body.offsetHeight+"px";
	  document.getElementById('s').style.position = "fixed";
	}else{
	  var stop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
      window.onscroll=mveditbox;
   }
   document.getElementById('s').style.display = 'block'; 
   document.getElementById('ebox1').style.display='block'; 
   
   document.getElementById('frm').style.opacity = 5/10;
   document.getElementById('frm').style.filter = 5/10;

   document.getElementById('ebox1').style.zIndex=100; 
   document.getElementById('s').style.zIndex=1000; 
   document.getElementById('ebox1').style.top=stop+"px";

   var top_pos = stop+top_align;   
   document.getElementById('s').style.top= top_pos+"px";	

   var sleft = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
   var left_pos = sleft+left_align;
   document.getElementById('s').style.left= left_pos+"px";
}

function hide(){
   document.getElementById('s').style.display='none';
   document.getElementById('frm').style.opacity = 100;
   document.getElementById('ebox1').style.display='none'; 
}
  
function mveditbox() {
   var stop =window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
   document.getElementById('ebox1').style.top=stop+"px";
   
   var tot = stop+top_align;  
   document.getElementById('s').style.top= tot+"px";	

   document.getElementById('ebox1').style.height = document.body.clientHeight+"px";
}
</script>
<!-- Script by hscripts.com -->

HTML Code:

<iframe frameborder=1 id='ebox1' width=100% 
height=100% bgcolor=#808080 style='display: none; position:absolute;
top: 0px; left: 0px;filter:alpha(opacity=0.5);-moz-opacity: 0.5;opacity: 0.5;background-color: #808080;'> 
</iframe>

<form name=frm>
<table id=frm align=center border=0 cellpadding=0 cellspacing=0 bgcolor=black style="border: 1px solid black;">
<tr><td align=left><img src="hgreybox/fun.gif" onmouseover='disp();'></td></tr></table></form>

<div id='s' style='display: none; border:thin solid black; position: absolute; background-color: black;'>
<div style="background: url('hgreybox/head.gif'); width: 350px; text-align: right; color: white; font-weight: bold;">
<a style='cursor:pointer;color:#ffffff;' onclick='hide()'><b>X </b></a></div>
<div align=center id='ad' style="color: red; background-color: white; font-weight: bold; font-family: Times New Roman; font-size: 14px;"><a style="text-decoration:none;" href="http://hscripts.com/tutorials/photoshop/" target=_blank><img src="hgreybox/ad.gif" width=350px></a></div>
</div>

Release Date - 16-06-2009

Get free version without ©copyright link for just 5

For customization of this script or any script development, contact us at support@hscripts.com

Usage

Here we have explained with a form
a) <iframe> is used to display the greybox by overlapping the form as,
<iframe frameborder=1 id='ebox1' width=100% height=100% bgcolor=#808080 style='display: none; position:absolute; top: 0px; left: 0px;filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;background-color: #808080;'>
</iframe>

Note: <iframe> should be placed at the top of the page(under <head>) to make it work in all browsers.
b) Function disp() can be called in any event.
For example,
<body onload="disp();">
<input type=button/image onClick="disp();">
c) Place your form before the div tag which displays the greybox.
d) Place your code in the div tag,
<div align=center>"Your Code Here"</div>
e) You can change the top and left position of the greybox image inorder to center align in the browser window.
var left_align = 268; // Set the left position to center the greybox
var top_align = 134; // Set the left position to center the greybox
f) mveditbox() is used inorder to have the greybox till the end of the page while scrolling.
g) Just copy the code and use it for free.

License

- This javascript (misspelled as java script)/HTML code is given under GPL License
- i.e. Free use for those who use it as it is.
- Free, if your modification does not remove our copyright information and links.
- Detailed License information can be found here
- You can purchase the script if your requirements does not meet GPL License terms.

Greybox / Lightbox JavaScript