English
Sign in / Sign up

Greybox/Lightbox

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

Features

  • This greybox/lightbox javascript overlay images on the current page.
  • Greybox script is like a popup window used in javascript instead it overlaps the previous element like <form>.
  • 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.
  • This script uses iframe tag to hide/overlap the form element.

Preview

Mouse Over the Image

Downloads

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="https://www.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 $10/-
  • For customization of this script or any script development, mail to support@hscripts.com

Usage

  • Here we have explained with a form
    • <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 ) to make it work in all browsers.
  • Function disp() can be called in any event. For example,
    • <body onload="disp();">
<input type=button/image onClick="disp();">
  • Place your form before the div tag which displays the greybox.
  • Place your code in the div tag,
    • <div align=center>"Your Code Here"</div>
  • 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
  • mveditbox() is used inorder to have the greybox till the end of the page while scrolling.
  • Just copy the code and use it for free.

License

Related Scripts

Free Javascript Scripts


Ask Questions

Ask Question