Image Display JS effect

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.