JS教程:lightbox源码解析(2)

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;

}