Image Display JS effect

HTML snippet, make a table Form

<table width= "798" height= "276" border= "0" align= "center" cellpadding= "0" cellspacing= "0" >
<tr>
&LT;TD align= "center" ><table border= "0" cellspacing= "0" cellpadding= "0" >
<tr>
&LT;TD width= "height=" align= "center" ><a title= "photo by Xixi" href= "images/01.jpg" rel= "Lightbox" > </a></ Td>
&LT;TD width= "height=" align= "center" ><a title= "photo by Xixi" href= "images/02.jpg" rel= "Lightbox" > </a></td>
&LT;TD width= "height=" align= "center" ><a title= "photo by Xixi" href= "images/03.jpg" rel= "Lightbox" > </a></td>
&LT;TD width= "height=" align= "center" ><a title= "photo by Xixi" href= "images/04.jpg" rel= "Lightbox" > </a></td>
&LT;TD width= "height=" align= "center" ><a title= "photo by Xixi" href= "images/05.jpg" rel= "Lightbox" > </a></td>
&LT;TD width= "height=" align= "center" ><a title= "photo by Xixi" href= "images/06.jpg" rel= "Lightbox" > </a></td>
&LT;TD width= "height=" align= "center" ><a title= "photo by Xixi" href= "images/07.jpg" rel= "Lightbox" > </a></ Td>
&LT;TD width= "height=" align= "center" ><a title= "photo by Xixi" href= "images/08.jpg" rel= "Lightbox" > </a></ Td>
&LT;TD width= "align=" center "><a title=" photo by Xixi "href=" images/09.jpg "rel=" Lightbox "></a></td>
</tr>
<tr>
&LT;TD width= "height=" align= "center" ><a title= "photo by Xixi" href= "images/10.jpg" rel= "Lightbox" > </a></ Td>
&LT;TD width= "height=" align= "center" ><a title= "photo by Xixi" href= "images/11.jpg" rel= "Lightbox" > </a></ Td>
&LT;TD width= "height=" align= "center" ><a title= "photo by Xixi" href= "images/12.jpg" rel= "Lightbox" > </a></ Td>
&LT;TD width= "height=" align= "center" ><a title= "photo by Xixi" href= "images/13.jpg" rel= "Lightbox" > </a></ Td>
&LT;TD width= "height=" align= "center" ><a title= "photo by Xixi" href= "images/14.jpg" rel= "Lightbox" > </a></ Td>
&LT;TD width= "height=" align= "center" ><a title= "photo by Xixi" href= "images/15.jpg" rel= "Lightbox" > </a></ Td>
&LT;TD width= "height=" align= "center" ><a title= "photo by Xixi" href= "images/16.jpg" rel= "Lightbox" > </a></ Td>
&LT;TD width= "height=" align= "center" ><a title= "photo by Xixi" href= "images/17.jpg" rel= "Lightbox" > </a></ Td>
&LT;TD width= "align=" center "><a title=" photo by Xixi "href=" images/18.jpg "rel=" Lightbox "></a></td>
</tr>
<tr>
&LT;TD width= "height=" align= "center" ><a title= "photo by Xixi" href= "images/19.jpg" rel= "Lightbox" > </a></ Td>
&LT;TD width= "height=" align= "center" ><a title= "photo by Xixi" href= "images/20.jpg" rel= "Lightbox" > </a></ Td>
&LT;TD width= "height=" align= "center" ><a title= "photo by Xixi" href= "images/21.jpg" rel= "Lightbox" > </a></ Td>
&LT;TD width= "height=" align= "center" ></td>
&LT;TD width= "height=" align= "center" ></td>
&LT;TD width= "height=" align= "center" ></td>
&LT;TD width= "height=" align= "center" ></td>
&LT;TD width= "height=" align= "center" ></td>
&LT;TD width= "height=" align= "center" ></td>
</tr>
</table></td>
</tr>
</table>

CSS style Sheets

#lightbox {
Background-color: #fff;
padding:0px;
}
#picboder {
border: #f4f4f4 6px solid;
}
#lightboxDetails {
Font-size:0.8em;
Padding-top:0.4em;
}
#lightboxCaption {float:left;}
#keyboardMsg {float:right;}

#closeButton {
top:0px; right:0px;
}


#lightbox img{border:none; clear:both;}
#overlay img{Border:none;}

#overlay {background-color: #333;}

* HTML #overlay {
Background-color:transparent;
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= "Images/overlay.png", sizingmethod= "scale");
}

JS Demo

var loadingimage = ' images/loading.gif ';
var CloseButton = ' images/close.gif ';

function Getpagescroll () {

var Yscroll;

if (Self.pageyoffset) {
Yscroll = Self.pageyoffset;
} else if (document.documentelement && document.documentElement.scrollTop) {//Explorer 6 Strict
Yscroll = Document.documentElement.scrollTop;
} else if (document.body) {//All other explorers
Yscroll = Document.body.scrollTop;
}

Arraypagescroll = new Array ("', Yscroll)
return arraypagescroll;
}

function GetPageSize () {

var xscroll, Yscroll;

if (window.innerheight && window.scrollmaxy) {
Xscroll = Document.body.scrollWidth;
Yscroll = Window.innerheight + window.scrollmaxy;
} else if (Document.body.scrollHeight > Document.body.offsetHeight) {//all but Explorer Mac
Xscroll = Document.body.scrollWidth;
Yscroll = Document.body.scrollHeight;
} else {//Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
Xscroll = Document.body.offsetWidth;
Yscroll = Document.body.offsetHeight;
}

var windowwidth, WindowHeight;
if (self.innerheight) {//all except Explorer
WindowWidth = Self.innerwidth;
WindowHeight = Self.innerheight;
} else if (document.documentelement && document.documentElement.clientHeight) {//Explorer 6 Strict Mode
WindowWidth = Document.documentElement.clientWidth;
WindowHeight = Document.documentElement.clientHeight;
} else if (document.body) {//other explorers
WindowWidth = Document.body.clientWidth;
WindowHeight = Document.body.clientHeight;
}

For small pages and total height less then height of the viewport
if (Yscroll < WindowHeight) {
PageHeight = WindowHeight;
} else {
PageHeight = Yscroll;
}

For small pages and total width less then width of the viewport
if (Xscroll < windowwidth) {
PageWidth = WindowWidth;
} else {
PageWidth = Xscroll;
}

Arraypagesize = new Array (pagewidth,pageheight,windowwidth,windowheight)
return arraypagesize;
}

//
Pause (Numbermillis)
Pauses code execution for specified time. Uses busy code, not good.
Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
//
function Pause (numbermillis) {
var now = new Date ();
var exittime = now.gettime () + Numbermillis;
while (true) {
now = new Date ();
if (Now.gettime () > Exittime)
Return
}
}

//
GetKey (Key)
Gets KeyCode. If ' x ' is pressed then it hides the Lightbox.
//

function GetKey (e) {
if (E = = null) {//IE
KeyCode = Event.keycode;
} else {//Mozilla
KeyCode = E.which;
}
Key = String.fromCharCode (KeyCode). toLowerCase ();

if (key = = ' X ') {Hidelightbox ();}
}

//
Listenkey ()
//
function Listenkey () {document.onkeypress = GetKey;}

//
Showlightbox ()
Preloads images. Pleaces new Image in Lightbox then centers and displays.
//
function Showlightbox (Objlink)
{
Prep objects
var objoverlay = document.getElementById (' overlay ');
var objlightbox = document.getElementById (' Lightbox ');
var objcaption = document.getElementById (' lightboxcaption ');
var objimage = document.getElementById (' lightboximage ');
var objloadingimage = document.getElementById (' loadingimage ');
var objlightboxdetails = document.getElementById (' lightboxdetails ');

var arraypagesize = GetPageSize ();
var arraypagescroll = Getpagescroll ();

Center Loadingimage if it exists
if (objloadingimage) {
ObjLoadingImage.style.top = (Arraypagescroll[1] + ((arraypagesize[3]-35-objloadingimage.height)/2) + ' px ');
ObjLoadingImage.style.left = ((((arraypagesize[0]-45-objloadingimage.width)/2) + ' px ');
ObjLoadingImage.style.display = ' block ';
}

Set height of Overlay to take up whole page and show
ObjOverlay.style.height = (arraypagesize[1] + ' px ');
ObjOverlay.style.display = ' block ';

Preload image
Imgpreload = new Image ();

Imgpreload.onload=function () {
OBJIMAGE.SRC = Objlink.href;

Center Lightbox and make sure this top and left values is not negative
And the image placed outside the viewport
var lightboxtop = arraypagescroll[1] + ((arraypagesize[3]-35-imgpreload.height)/2);
var lightboxleft = ((arraypagesize[0]-9-imgpreload.width)/2);

ObjLightbox.style.top = (Lightboxtop < 0)? "0px": Lightboxtop + "px";
ObjLightbox.style.left = (Lightboxleft < 0)? "0px": Lightboxleft + "px";

ObjLightboxDetails.style.width = imgpreload.width + ' px ';

if (Objlink.getattribute (' title ')) {
ObjCaption.style.display = ' block ';
ObjCaption.style.width = imgpreload.width + ' px ';
objcaption.innerhtml = Objlink.getattribute (' title ');
} else {
ObjCaption.style.display = ' None ';
}

A small pause between the image loading and displaying are required with IE,
This prevents the previous image displaying for a short burst causing flicker.
if (Navigator.appVersion.indexOf ("MSIE")!=-1) {
Pause (250);
}

if (objloadingimage) {objLoadingImage.style.display = ' none ';}

Hide Select boxes as they would ' peek ' through the image in IE
Selects = document.getElementsByTagName ("select");
for (i = 0; I! = Selects.length; i++) {
selects[i].style.visibility = "hidden";
}

ObjLightbox.style.display = ' block ';

After image is loaded, update the overlay height as the new image might has
Increased the overall page height.
Arraypagesize = GetPageSize ();
ObjOverlay.style.height = (arraypagesize[1] + ' px ');

Check for ' x ' KeyPress
Listenkey ();

return false;
}

IMGPRELOAD.SRC = Objlink.href;

}

//
Hidelightbox ()
//
function Hidelightbox ()
{
Get objects
Objoverlay = document.getElementById (' overlay ');
Objlightbox = document.getElementById (' Lightbox ');

Hide Lightbox and Overlay
ObjOverlay.style.display = ' None ';
ObjLightbox.style.display = ' None ';

Make Select boxes visible
Selects = document.getElementsByTagName ("select");
for (i = 0; I! = Selects.length; i++) {
selects[i].style.visibility = "visible";
}

Disable KeyPress Listener
Document.onkeypress = ";
}

//
Initlightbox ()
Function runs on Windows load, going through link tags looking for rel= "Lightbox".
These links receive onclick events that enable the Lightbox display for their targets.
The function also inserts HTML markup at the top of the page which would be used as a
Container for the overlay pattern and the inline image.
//
function Initlightbox ()
{

if (!document.getelementsbytagname) {return;}
var anchors = document.getElementsByTagName ("a");

Loop through all anchor tags
for (var i=0; i<anchors.length; i++) {
var anchor = Anchors[i];

if (Anchor.getattribute ("href") && (Anchor.getattribute ("rel") = = "Lightbox")) {
Anchor.onclick = function () {showlightbox (this); return false;}
}
}

The rest of this code inserts HTML at the top of the page that looks like this:
//
<div id= "Overlay" >
<a href= "#" onclick= "Hidelightbox (); return false; " ></a>
</div>
<div id= "Lightbox" >
<a href= "#" onclick= "Hidelightbox (); return false; "title=" click anywhere to close image ">


</a>
<div id= "Lightboxdetails" >
<div id= "Lightboxcaption" ></div>
<div id= "Keyboardmsg" ></div>
</div>
</div>

var objbody = document.getElementsByTagName ("Body"). Item (0);

Create Overlay div and hardcode some functional styles (aesthetic styles is in CSS file)
var objoverlay = document.createelement ("div");
Objoverlay.setattribute (' id ', ' overlay ');
Objoverlay.onclick = function () {hidelightbox (); return false;}
ObjOverlay.style.display = ' None ';
objOverlay.style.position = ' absolute ';
ObjOverlay.style.top = ' 0 ';
ObjOverlay.style.left = ' 0 ';
ObjOverlay.style.zIndex = ' 90 ';
ObjOverlay.style.width = ' 100% ';
Objbody.insertbefore (Objoverlay, objbody.firstchild);

var arraypagesize = GetPageSize ();
var arraypagescroll = Getpagescroll ();

Preload and create loader image
var imgpreloader = new Image ();

If loader image found, create link to hide Lightbox and create Loadingimage
Imgpreloader.onload=function () {

var objloadingimagelink = document.createelement ("a");
Objloadingimagelink.setattribute (' href ', ' # ');
Objloadingimagelink.onclick = function () {hidelightbox (); return false;}
Objoverlay.appendchild (Objloadingimagelink);

var objloadingimage = document.createelement ("img");
OBJLOADINGIMAGE.SRC = Loadingimage;
Objloadingimage.setattribute (' id ', ' loadingimage ');
objLoadingImage.style.position = ' absolute ';
ObjLoadingImage.style.zIndex = ' 150 ';
Objloadingimagelink.appendchild (Objloadingimage);

Imgpreloader.onload=function () {};//clear onload, as IE would flip out w/animated gifs

return false;
}

IMGPRELOADER.SRC = Loadingimage;

Create Lightbox Div, same note about styles as above
var objlightbox = document.createelement ("div");
Objlightbox.setattribute (' id ', ' lightbox ');
ObjLightbox.style.display = ' None ';
objLightbox.style.position = ' absolute ';
ObjLightbox.style.zIndex = ' 100 ';
Objbody.insertbefore (Objlightbox, objoverlay.nextsibling);

Create link
var objlink = document.createelement ("a");
Objlink.setattribute (' href ', ' # ');
Objlink.setattribute (' title ', ' Click to close ');
Objlink.onclick = function () {hidelightbox (); return false;}
Objlightbox.appendchild (Objlink);

Preload and create Close button image
var Imgpreloadclosebutton = new Image ();

If Close button image found,
Imgpreloadclosebutton.onload=function () {
var objclosebuttondiv=document.createelement ("div");
Objclosebuttondiv.setattribute (' id ', ' CloseButton ');
Objclosebuttondiv.innerhtml= ";
var Objclosebutton = document.createelement ("img");
OBJCLOSEBUTTON.SRC = CloseButton;
Objclosebutton.setattribute (' id ', ' CloseButton ');
Objclosebutton.style.filter= "Progid:DXImageTransform.Microsoft.AlphaImageLoader (src= ' images/close.png ', Sizingmethod=scale); "
objCloseButton.style.position = ' absolute ';
ObjCloseButton.style.zIndex = ' 200 ';
Objclosebuttondiv.appendchild (Objclosebutton);
alert (ObjCloseButton.style.filter);
Objlink.appendchild (Objclosebutton);

return false;
}

IMGPRELOADCLOSEBUTTON.SRC = CloseButton;

Create image
var objimage = document.createelement ("img");
Objimage.setattribute (' id ', ' lightboximage ');
Objlink.appendchild (Objimage);

Create details Div, a container for the caption and keyboard message
var objlightboxdetails = document.createelement ("div");
Objlightboxdetails.setattribute (' id ', ' lightboxdetails ');
Objlightbox.appendchild (objlightboxdetails);

Create caption
var objcaption = document.createelement ("div");
Objcaption.setattribute (' id ', ' lightboxcaption ');
ObjCaption.style.display = ' None ';
Objlightboxdetails.appendchild (objcaption);

Create keyboard message
var objkeyboardmsg = document.createelement ("div");
Objkeyboardmsg.setattribute (' id ', ' keyboardmsg ');
objkeyboardmsg.innerhtml = ' Press <kbd>x</kbd> to close ';
Objlightboxdetails.appendchild (OBJKEYBOARDMSG);

}

//
Addloadevent ()
Adds event to Window.onload without overwriting currently assigned onload functions.
Function found at Simon Willison ' s weblog-http://simon.incutio.com/
//
function Addloadevent (func)
{
var oldonload = window.onload;
if (typeof window.onload! = ' function ') {
Window.onload = func;
} else {
Window.onload = function () {
Oldonload ();
Func ();
}
}

Source Address: http://niutuku.com/

Image Display JS effect