lightbox源碼解析

function getpagescroll(){

var yscroll;

if (self.pageyoffset) {
yscroll = self.pageyoffset; //ns
} 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;
}

1. self
打開任何一個網頁，瀏覽器會首先創建一個窗口，這個窗口就是一 個window 對象，也是 js 運行所依附的全局環境對象和全局作用域對象。
self 指窗口本身，它返回的對象 跟window 對象是一模一樣的。也正因為如此，window 對象的常用方法和函數都可以用 self 代替 window。

2. 獲得窗口的滾動偏移量
* omniweb 4.2-, netfront 3.3- 下無法獲得.
* safari 和 omniweb 4.5+ 有 bug，但無影響.

有三種方法獲取滾動條的位置。
1. window.pagexoffset/pageyoffset 大多數瀏覽器，非?？煽?br />2. document.documentelement.scrollleft/top strict 模式下的 ie6 和其它很少一些瀏覽器
3. document.body.scrollleft/top ie6 和 其它一些瀏覽器

瀏覽器在支持 document.body 或者 document.documentelement 的情況下，如果提供了 scrollleft/top，那么除了 safari 和 omniweb 4.5+ 外, 這些值都是
很可靠的。在 safari and omniweb 4.5+ 中，當滾動條偏移量為 0 時，會返回 -8，其它情況下正常。當然了，因為它們提供了正確的 window.pagexoffset/pageyoffset,
這個 bug 不會造成什么影響。

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;
}

//可見窗口(view port)的大小
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 with total height less then height of the viewport
if(yscroll < windowheight){
pageheight = windowheight;
} else {
pageheight = yscroll;
}

// for small pages with 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;
}

文檔加載完之前是無法獲取窗口大小值的，而且還要對不同瀏覽器使用不同的方法。可用參數如下：
1. window.innerheight/width ie 除外的大多數瀏覽器
2. document.body.clientheight/width 包括 ie 在內的大多數瀏覽器
3. document.documentelement.clientheight/width 包括 ie 在內的大多 dom 瀏覽器

關于 clientheight/width 會有點亂，因為在不同瀏覽器下，甚至在同一個瀏覽器下 clientheight/width 都可能不同，要看文檔類型激發的是瀏覽器的
strict 模式還是 quirks 模式。有時，它們指的是窗口的尺寸，有時是文檔內容的尺寸。下表展示了不同瀏覽器、不同模式中的屬性：

|||

function showlightbox(objlink)
{
// prep objects
var objoverlay = document.getelementbyid('overlay');
// 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) {
// arraypagesize = new array(pagewidth,pageheight,windowwidth,windowheight)
objloadingimage.style.top = (arraypagescroll[1] + ((arraypagesize[3] - 35 - objloadingimage.height) / 2) + 'px');
// top = 滾動條位置 ＋ [視口高度 － 35px(瀏覽器狀態欄高度) - 加載圖片的高度]/2
objloadingimage.style.left = (((arraypagesize[0] - 20 - objloadingimage.width) / 2) + 'px');
objloadingimage.style.display = 'block';
// 設置加載圖片在頁面中間，瀏覽器狀態欄高度約為 35px，滾動條欄寬度約為 20px。
}

// 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 that the top and left values are not negative
// and the image placed outside the viewport
var lightboxtop = arraypagescroll[1] + ((arraypagesize[3] - 35 - imgpreload.height) / 2);
var lightboxleft = ((arraypagesize[0] - 20 - 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.innerhtml = objlink.getattribute('title');
} else {
objcaption.style.display = 'none';
}

// a small pause between the image loading and displaying is 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 will '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 have
// increased the overall page height.
arraypagesize = getpagesize();
objoverlay.style.height = (arraypagesize[1] + 'px');

// check for 'x' keypress
listenkey();

return false;
}

imgpreload.src = objlink.href;

}