lightbox分析

其过程为
1. 初始化时，创建lightbox对象，和创建所需要HTML元素，如图片容器和遮盖层
function initLightbox() { myLightbox = new Lightbox(); }
Event.observe(window, 'load', initLightbox, false);

... {
<div id="overlay"></div>
        //    <div id="lightbox">
        //        <div id="outerImageContainer">
        //            <div id="imageContainer">
        //                <img id="lightboxImage">
        //                <div style="" id="hoverNav">
        //                    <a href="#" id="prevLink"></a>
        //                    <a href="#" id="nextLink"></a>
        //                </div>
        //                <div id="loading">
        //                    <a href="#" id="loadingLink">
        //                        <img src="images/loading.gif">
        //                    </a>
        //                </div>
        //            </div>
        //        </div>
        //        <div id="imageDataContainer">
        //            <div id="imageData">
        //                <div id="imageDetails">
        //                    <span id="caption"></span>
        //                    <span id="numberDisplay"></span>
        //                </div>
        //                <div id="bottomNav">
        //                    <a href="#" id="bottomNavClose">
        //                        <img src="images/close.gif">
        //                    </a>
        //                </div>
        //            </div>
        //        </div>
        //    </div>
initialize: function() ...{    
var objBody = document.getElementsByTagName("body").item(0);
        
        var objOverlay = document.createElement("div");
        objOverlay.setAttribute('id','overlay');
        objOverlay.style.display = 'none';
        objOverlay.onclick = function() ...{ myLightbox.end(); }
        objBody.appendChild(objOverlay);
}

}

2. 遍历所有的anchor,对满足rel属性包含lightbox的elem增加触发事件          

var relAttribute  =  String(anchor.getAttribute( ' rel ' ));
           
             //  use the string.match() method to catch 'lightbox' references in the rel attribute
             if  (anchor.getAttribute( ' href ' )  &&  (relAttribute.toLowerCase().match( ' lightbox ' ))) ... {
                anchor.onclick = function () ...{myLightbox.start(this); return false;}
            }

3. 触发事件时
a. 隐藏flash（如果falsh不设置背景为透明会影响遮盖）
b.隐藏select元素，估计也是会影响遮盖
c. 设置图片
d.设置overlay大小,和位置（0，0）和Opacit的渐变显示
e.设置lightbox位置到中间
f. 显示完毕后设置键盘导航
    enableKeyboardNav: function() {
            document.onkeydown = this.keyboardAction;
        },
getPageSize函数：

function getPageSize() ... {
    
    var xScroll, yScroll;
    
    if (window.innerHeight && window.scrollMaxY) ...{    
        xScroll = window.innerWidth + window.scrollMaxX;
        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;
    
//    console.log(self.innerWidth);
//    console.log(document.documentElement.clientWidth);

    if (self.innerHeight) ...{    // all except Explorer
        if(document.documentElement.clientWidth)...{
            windowWidth = document.documentElement.clientWidth; 
        } else ...{
            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;
    }

//    console.log("xScroll " + xScroll)
//    console.log("windowWidth " + windowWidth)

    // for small pages with total width less then width of the viewport
    if(xScroll < windowWidth)...{    
        pageWidth = xScroll;        
    } else ...{
        pageWidth = windowWidth;
    }
//    console.log("pageWidth " + pageWidth)

    arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
    return arrayPageSize;
}