lightbox.js

修改的lightbox脚本,实现仿QQ相册的手指翻页功能,以及右布局的方式.

// -----------------------------------------------------------------------------------
//
//	Lightbox v2.02
//	by Lokesh Dhakar - http://www.huddletogether.com
//	3/31/06
//
//	For more information on this script, visit:
//	http://huddletogether.com/projects/lightbox2/
//
//	Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
//	
//	Credit also due to those who have helped, inspired, and made their code available to the public.
//	Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others.
//
//
// -----------------------------------------------------------------------------------
/*

	Table of Contents
	-----------------
	Configuration
	Global Variables

	Extending Built-in Objects	
	- Object.extend(Element)
	- Array.prototype.removeDuplicates()
	- Array.prototype.empty()

	Lightbox Class Declaration
	- initialize()
	- start()
	- changeImage()
	- resizeImageContainer()
	- showImage()
	- updateDetails()
	- updateNav()
	- enableKeyboardNav()
	- disableKeyboardNav()
	- keyboardAction()
	- preloadNeighborImages()
	- end()
	
	Miscellaneous Functions
	- getPageScroll()
	- getPageSize()
	- getKey()
	- listenKey()
	- showSelectBoxes()
	- hideSelectBoxes()
	- pause()
	- initLightbox()
	
	Function Calls
	- addLoadEvent(initLightbox)
	
*/
// -----------------------------------------------------------------------------------

//
//	Configuration
//
var fileLoadingImage = "/images/common/loading.gif";		
var fileBottomNavCloseImage = "NavCloseImage.jpg";//TODO modify for yours
var fileBottomNavPreImage = "NavPreImage.jpg";
var fileBottomNavNextImage = "NavNextImage.jpg";
var fileBottomNavFavoriteImage = "NavFavoriteImage.jpg";
var fileBottomNavPrintImage = "NavPrintImage.jpg";

var resizeSpeed = 7;	// controls the speed of the image resizing (1=slowest and 10=fastest)

var borderSize = 10;	//if you adjust the padding in the CSS, you will need to update this variable

// -----------------------------------------------------------------------------------

//
//	Global Variables
//
var imageArray = new Array;
var activeImage;

if(resizeSpeed > 10){ resizeSpeed = 10;}
if(resizeSpeed < 1){ resizeSpeed = 1;}
resizeDuration = (11 - resizeSpeed) * 0.15;

// -----------------------------------------------------------------------------------

//
//	Additional methods for Element added by SU, Couloir
//	- further additions by Lokesh Dhakar (huddletogether.com)
//
Object.extend(Element, {
	getWidth: function(element) {
	   	element = $(element);
	   	return element.offsetWidth; 
	},
	setWidth: function(element,w) {
	   	element = $(element);
    	element.style.width = w +"px";
	},
	setHeight: function(element,h) {
   		element = $(element);
    	element.style.height = h +"px";
	},
	setTop: function(element,t) {
	   	element = $(element);
    	element.style.top = t +"px";
	},
	setSrc: function(element,src) {
    	element = $(element);
    	element.src = src; 
	},
	setHref: function(element,href) {
    	element = $(element);
    	element.href = href; 
	},
	setInnerHTML: function(element,content) {
		element = $(element);
		element.innerHTML = content;
	}
});

// -----------------------------------------------------------------------------------

//
//	Extending built-in Array object
//	- array.removeDuplicates()
//	- array.empty()
//
Array.prototype.removeDuplicates = function () {
	for(i = 1; i < this.length; i++){
		if(this[i][0] == this[i-1][0]){
			this.splice(i,1);
		}
	}
}

// -----------------------------------------------------------------------------------

Array.prototype.empty = function () {
	for(i = 0; i <= this.length; i++){
		this.shift();
	}
}

// -----------------------------------------------------------------------------------

//
//	Lightbox Class Declaration
//	- initialize()
//	- start()
//	- changeImage()
//	- resizeImageContainer()
//	- showImage()
//	- updateDetails()
//	- updateNav()
//	- enableKeyboardNav()
//	- disableKeyboardNav()
//	- keyboardNavAction()
//	- preloadNeighborImages()
//	- end()
//
//	Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
//
var Lightbox = Class.create();

Lightbox.prototype = {
	
	// initialize()
	// Constructor runs on completion of the DOM loading. Loops through anchor tags looking for 
	// 'lightbox' references and applies onclick events to appropriate links. The 2nd section of
	// the function inserts html at the bottom of the page which is used to display the shadow 
	// overlay and the image container.
	//
	initialize: function() {	
		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];
			
			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;}
			}
		}

		// The rest of this code inserts html at the bottom of the page that looks similar to this:
		//
		//	<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>


		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(); return false; }
		objBody.appendChild(objOverlay);
		
		var objLightbox = document.createElement("div");
		objLightbox.setAttribute('id','lightbox');
		objLightbox.style.display = 'none';
		objBody.appendChild(objLightbox);
	
		var objLightCenterbox = document.createElement("table");
		objLightCenterbox.setAttribute('id','lightCenterbox');
		objLightCenterbox.setAttribute('cellpadding','0px');
		objLightCenterbox.setAttribute('cellspacing','0px');
		objLightCenterbox.setAttribute('border','0');
		objLightbox.appendChild(objLightCenterbox);
		
		var tbody = document.createElement("tbody");
		objLightCenterbox.appendChild(tbody);
		var tr = document.createElement("tr");
		tbody.appendChild(tr);
		var td1 = document.createElement("td");
		tr.appendChild(td1);
		var td2 = document.createElement("td");
		td2.setAttribute('valign','center');
		tr.appendChild(td2);
		
		var objOuterImageContainer = document.createElement("div");
		objOuterImageContainer.setAttribute('id','outerImageContainer');
		td1.appendChild(objOuterImageContainer);

		var objImageContainer = document.createElement("div");
		objImageContainer.setAttribute('id','imageContainer');
		objOuterImageContainer.appendChild(objImageContainer);
	
		var objLightboxImage = document.createElement("img");
		objLightboxImage.setAttribute('id','lightboxImage');
		objImageContainer.appendChild(objLightboxImage);
	
		var objHoverNav = document.createElement("div");
		objHoverNav.setAttribute('id','hoverNav');
		objImageContainer.appendChild(objHoverNav);
	
		var objPrevLink = document.createElement("a");
		objPrevLink.setAttribute('id','prevLink');
		objPrevLink.setAttribute('href','#');
		objHoverNav.appendChild(objPrevLink);
		
		var objNextLink = document.createElement("a");
		objNextLink.setAttribute('id','nextLink');
		objNextLink.setAttribute('href','#');
		objHoverNav.appendChild(objNextLink);
	
		var objLoading = document.createElement("div");
		objLoading.setAttribute('id','loading');
		objImageContainer.appendChild(objLoading);
	
		var objLoadingLink = document.createElement("a");
		objLoadingLink.setAttribute('id','loadingLink');
		objLoadingLink.setAttribute('href','#');
		objLoadingLink.onclick = function() { myLightbox.end(); return false; }
		objLoading.appendChild(objLoadingLink);
	
		var objLoadingImage = document.createElement("img");
		objLoadingImage.setAttribute('src', fileLoadingImage);
		objLoadingLink.appendChild(objLoadingImage);

		var objImageDataContainer = document.createElement("div");
		objImageDataContainer.setAttribute('id','imageDataContainer');
		objImageDataContainer.className = 'clearfix';
		td2.appendChild(objImageDataContainer);

		var objImageData = document.createElement("div");
		objImageData.setAttribute('id','imageData');
		objImageDataContainer.appendChild(objImageData);
	
		var objBottomNav = document.createElement("div");
		objBottomNav.setAttribute('id','bottomNav');
		objImageData.appendChild(objBottomNav);
		
		var objBottomNavCloseLink = document.createElement("a");
		objBottomNavCloseLink.setAttribute('id','bottomNavClose');
		objBottomNavCloseLink.setAttribute('href','#');
		objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
		objBottomNav.appendChild(objBottomNavCloseLink);
	
		var objBottomNavCloseImage = document.createElement("img");
		objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
		objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
		
		var objBottomNavPreLink = document.createElement("a");
		objBottomNavPreLink.setAttribute('id','bottomNavPre');
		objBottomNavPreLink.setAttribute('href','#');
		objBottomNavPreLink.onclick = function() { 
			if(activeImage != 0){
				myLightbox.changeImage(activeImage - 1);
				objOuterImageContainer.style.cursor = this.cursor = preCursor;
			}
			return false; 
		}
		objBottomNav.appendChild(objBottomNavPreLink);
	
		var objBottomNavPreImage = document.createElement("img");
		objBottomNavPreImage.setAttribute('src', fileBottomNavPreImage);
		objBottomNavPreLink.appendChild(objBottomNavPreImage);
		
		var objBottomNavNextLink = document.createElement("a");
		objBottomNavNextLink.setAttribute('id','bottomNavNext');
		objBottomNavNextLink.setAttribute('href','#');
		objBottomNavNextLink.onclick = function() { 
			if(activeImage != (imageArray.length - 1)){
				myLightbox.changeImage(activeImage + 1);
				objOuterImageContainer.style.cursor = this.cursor = nextCursor;
			}
			return false; 
		}
		objBottomNav.appendChild(objBottomNavNextLink);
	
		var objBottomNavNextImage = document.createElement("img");
		objBottomNavNextImage.setAttribute('src', fileBottomNavNextImage);
		objBottomNavNextLink.appendChild(objBottomNavNextImage);
		
		var objBottomNavFavoriteLink = document.createElement("a");
		objBottomNavFavoriteLink.setAttribute('id','bottomNavFavorite');
		objBottomNavFavoriteLink.setAttribute('href','#');
		objBottomNavFavoriteLink.onclick = function() { return false; }
		objBottomNav.appendChild(objBottomNavFavoriteLink);
	
		var objBottomNavFavoriteImage = document.createElement("img");
		objBottomNavFavoriteImage.setAttribute('src', fileBottomNavFavoriteImage);
		objBottomNavFavoriteLink.appendChild(objBottomNavFavoriteImage);
		
		var objBottomNavPrintLink = document.createElement("a");
		objBottomNavPrintLink.setAttribute('id','bottomNavPrint');
		objBottomNavPrintLink.setAttribute('href','#');
		objBottomNavPrintLink.onclick = function() { return false; }
		objBottomNav.appendChild(objBottomNavPrintLink);
	
		var objBottomNavPrintImage = document.createElement("img");
		objBottomNavPrintImage.setAttribute('src', fileBottomNavPrintImage);
		objBottomNavPrintLink.appendChild(objBottomNavPrintImage);
		
		var objImageDetails = document.createElement("div");
		objImageDetails.setAttribute('id','imageDetails');
		objImageData.appendChild(objImageDetails);
		
		var objCaption = document.createElement("span");
		objCaption.setAttribute('id','caption');
		objImageDetails.appendChild(objCaption);
	
		var objNumberDisplay = document.createElement("span");
		objNumberDisplay.setAttribute('id','numberDisplay');
		objImageDetails.appendChild(objNumberDisplay);
		
		objLightboxImage.onmousemove = function(e) {
			var event = e || window.event;
			if (typeof event.offsetX == "undefined") {
				event.offsetX = event.layerX;
			}
			var width = this.offsetWidth;
			if (event.offsetX < width / 2) {
				if(activeImage != 0){
					this.style.cursor = this.cursor = preCursor;
					this.alt = "点击跳到上一页";
					this.title = "点击跳到上一页";
				} else {
					this.style.cursor = this.cursor = "default";
					this.alt = "";
					this.title = "";
				}
			} else {
				if(activeImage != (imageArray.length - 1)){
					this.style.cursor = this.cursor = nextCursor;
					this.alt = "点击跳到下一页";
					this.title = "点击跳到下一页";
				} else {
					this.style.cursor = this.cursor = "default";
					this.alt = "";
					this.title = "";
				}
			}
		}
		objLightboxImage.onclick = function(e) {
			var event = e || window.event;
			if (typeof event.offsetX == "undefined") {
				event.offsetX = event.layerX;
			}
			var width = this.offsetWidth;
			if (event.offsetX < width / 2) {	
				if(activeImage != 0){
					myLightbox.changeImage(activeImage - 1);