http://www.enricopezzi.it/fileadmin/site/js/lightbox.js

1/**
2 * jQuery Lightbox
3 * Version 0.4 - 09/17/2007
4 * @author Warren Krewenki
5 *
6 * Based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
7 * Originally written to make use of the Prototype framework, and Script.acalo.us, now altered to use jQuery.
8 *
9 **/
10
11var Lightbox = {
12	fileLoadingImage : "images/loading.gif",
13	fileBottomNavCloseImage : 'images/closelabel.gif',
14	overlayOpacity : 0.8,
15	borderSize : 10,
16	imageArray : new Array,
17	activeImage : null,
18	inprogress : false,
19	resizeSpeed : 350,
20	destroyElement: function(id){
21		if(el = document.getElementById(id)){
22			el.parentNode.removeChild(el);
23		}
24	},
25	initialize: function() {	
26		// attach lightbox to any links with rel 'lightbox'
27		$("a").each(function(){
28			if(this.rel.toLowerCase().match('lightbox')){
29				$(this).click(function(){
30					Lightbox.start(this);
31					return false;
32				});
33			}
34		});
35		
36		Lightbox.destroyElement('overlay'); Lightbox.destroyElement('lightbox');
37		$("body").append('<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="'+Lightbox.fileLoadingImage+'"></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="'+Lightbox.fileBottomNavCloseImage+'"></a></div></div></div></div>');
38		$("#overlay").click(function(){ Lightbox.end(); }).hide();
39		$("#lightbox").click(function(){ Lightbox.end();}).hide();
40		$("#loadingLink").click(function(){ Lightbox.end(); return false;});
41		$("#bottomNavClose").click(function(){ Lightbox.end(); return false; });
42		$('#outerImageContainer').css({width: '250px', height: '250px;'});
43	},
44	
45	//
46	//	start()
47	//	Display overlay and lightbox. If image is part of a set, add siblings to Lightbox.imageArray.
48	//
49	start: function(imageLink) {	
50		$("select, embed, object").hide();
51		
52		// stretch overlay to fill page and fade in
53		var arrayPageSize = Lightbox.getPageSize();
54		$("#overlay").hide().css({width: '100%', height: arrayPageSize[1]+'px', opacity : Lightbox.overlayOpacity}).fadeIn();
55
56		Lightbox.imageArray = [];
57		imageNum = 0;		
58
59		var anchors = document.getElementsByTagName( imageLink.tagName);
60	
61		// if image is NOT part of a set..
62		if((imageLink.rel == 'lightbox')){
63			// add single image to Lightbox.imageArray
64			Lightbox.imageArray.push(new Array(imageLink.href, imageLink.title));			
65		} else {
66		// if image is part of a set..
67
68			// loop through anchors, find other images in set, and add them to Lightbox.imageArray
69			for (var i=0; i<anchors.length; i++){
70				var anchor = anchors[i];
71				if (anchor.href && (anchor.rel == imageLink.rel)){
72					Lightbox.imageArray.push(new Array(anchor.href, anchor.title));
73				}
74			}
75
76			for(i = 0; i < Lightbox.imageArray.length; i++){
77		        for(j = Lightbox.imageArray.length-1; j>i; j--){        
78		            if(Lightbox.imageArray[i][0] == Lightbox.imageArray[j][0]){
79		                Lightbox.imageArray.splice(j,1);
80		            }
81		        }
82		    }
83			while(Lightbox.imageArray[imageNum][0] != imageLink.href) { imageNum++;}
84		}
85
86		// calculate top and left offset for the lightbox 
87		var arrayPageScroll = Lightbox.getPageScroll();
88		var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
89		var lightboxLeft = arrayPageScroll[0];
90		$('#lightbox').css({top: lightboxTop+'px', left: lightboxLeft+'px'}).show();
91		
92		this.changeImage(imageNum);
93	},
94
95	//
96	//	changeImage()
97	//	Hide most elements and preload image in preparation for resizing image container.
98	//
99	changeImage: function(imageNum) {	
100		if(this.inprogress == false){
101			this.inprogress = true;
102			Lightbox.activeImage = imageNum;	// update global var
103
104			// hide elements during transition
105			$('#loading').show();
106			$('#lightboxImage').hide();
107			$('#hoverNav').hide();
108			$('#prevLink').hide();
109			$('#nextLink').hide();
110			$('#imageDataContainer').hide();

111			$('#numberDisplay').hide();		
112		
113			imgPreloader = new Image();
114		
115			// once image is preloaded, resize image container
116			imgPreloader.onload=function(){
117				document.getElementById('lightboxImage').src = Lightbox.imageArray[Lightbox.activeImage][0];
118				Lightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
119			}
120			imgPreloader.src = Lightbox.imageArray[Lightbox.activeImage][0];
121		}
122	},
123
124	//
125	//	resizeImageContainer()
126	//
127	resizeImageContainer: function( imgWidth, imgHeight) {
128
129		// get curren width and height
130		this.widthCurrent = document.getElementById('outerImageContainer').offsetWidth;
131		this.heightCurrent = document.getElementById('outerImageContainer').offsetHeight;
132
133		// get new width and height
134		var widthNew = (imgWidth  + (Lightbox.borderSize * 2));
135		var heightNew = (imgHeight  + (Lightbox.borderSize * 2));
136
137		// scalars based on change from old to new
138		this.xScale = ( widthNew / this.widthCurrent) * 100;
139		this.yScale = ( heightNew / this.heightCurrent) * 100;
140
141		// calculate size difference between new and old image, and resize if necessary
142		wDiff = this.widthCurrent - widthNew;
143		hDiff = this.heightCurrent - heightNew;
144
145		$('#outerImageContainer').animate({width: widthNew, height: heightNew},Lightbox.resizeSpeed,'linear',function(){
146				Lightbox.showImage();
147
148		});
149
150
151		// if new and old image are same size and no scaling transition is necessary, 
152		// do a quick pause to prevent image flicker.
153		if((hDiff == 0) && (wDiff == 0)){
154			if (navigator.appVersion.indexOf("MSIE")!=-1){ Lightbox.pause(250); } else { Lightbox.pause(100);} 
155		}
156
157		$('#prevLink').css({height: imgHeight+'px'});
158		$('#nextLink').css({height: imgHeight+'px'});
159		$('#imageDataContainer').css({width: widthNew+'px'});
160
161		
162	},
163	
164	//
165	//	showImage()
166	//	Display image and begin preloading neighbors.
167	//
168	showImage: function(){
169		$('#loading').hide();
170		$('#lightboxImage').fadeIn("fast");
171		Lightbox.updateDetails();
172		this.preloadNeighborImages();
173		this.inprogress = false;
174	},
175
176	//
177	//	updateDetails()
178	//	Display caption, image number, and bottom nav.
179	//
180	updateDetails: function() {
181	$("#imageDataContainer").hide();
182		// if caption is not null
183		if(Lightbox.imageArray[Lightbox.activeImage][1]){
184			$('#caption').html(Lightbox.imageArray[Lightbox.activeImage][1]).show();
185		}
186		
187		// if image is part of set display 'Image x of x' 
188		if(Lightbox.imageArray.length > 1){
189			$('#numberDisplay').html("Image " + eval(Lightbox.activeImage + 1) + " of " + Lightbox.imageArray.length).show();
190		}
191
192		$("#imageDataContainer").hide().slideDown("slow");
193		var arrayPageSize = Lightbox.getPageSize();
194		$('#overLay').css({height: arrayPageSize[1]+'px'});
195		Lightbox.updateNav();
196	},
197
198	//
199	//	updateNav()
200	//	Display appropriate previous and next hover navigation.
201	//
202	updateNav: function() {
203
204		$('#hoverNav').show();				
205
206		// if not first image in set, display prev image button
207		if(Lightbox.activeImage != 0){
208			$('#prevLink').show().click(function(){
209				Lightbox.changeImage(Lightbox.activeImage - 1); return false;
210			});
211		}
212
213		// if not last image in set, display next image button
214		if(Lightbox.activeImage != (Lightbox.imageArray.length - 1)){
215			$('#nextLink').show().click(function(){
216				
217				Lightbox.changeImage(Lightbox.activeImage +1); return false;
218			});
219		}
220		
221		this.enableKeyboardNav();
222	},
223
224
225	enableKeyboardNav: function() {
226		document.onkeydown = this.keyboardAction; 
227	},
228
229	disableKeyboardNav: function() {
230		document.onkeydown = '';
231	},
232
233	keyboardAction: function(e) {
234		if (e == null) { // ie
235			keycode = event.keyCode;
236			escapeKey = 27;
237		} else { // mozilla
238			keycode = e.keyCode;
239			escapeKey = e.DOM_VK_ESCAPE;
240		}
241
242		key = String.fromCharCode(keycode).toLowerCase();
243		
244		if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)){	// close lightbox
245			Lightbox.end();
246		} else if((key == 'p') || (keycode == 37)){	// display previous image
247			if(Lightbox.activeImage != 0){
248				Lightbox.disableKeyboardNav();
249				Lightbox.changeImage(Lightbox.activeImage - 1);
250			}
251		} else if((key == 'n') || (keycode == 39)){	// display next image
252			if(Lightbox.activeImage != (Lightbox.imageArray.length - 1)){
253				Lightbox.disableKeyboardNav();
254				Lightbox.changeImage(Lightbox.activeImage + 1);
255			}
256		}
257
258	},
259
260	preloadNeighborImages: function(){
261
262		if((Lightbox.imageArray.length - 1) > Lightbox.activeImage){
263			preloadNextImage = new Image();
264			preloadNextImage.src = Lightbox.imageArray[Lightbox.activeImage + 1][0];
265		}
266		if(Lightbox.activeImage > 0){
267			preloadPrevImage = new Image();
268			preloadPrevImage.src = Lightbox.imageArray[Lightbox.activeImage - 1][0];
269		}
270	
271	},
272
273	end: function() {
274		this.disableKeyboardNav();
275		$('#lightbox').hide();
276		$("#overlay").fadeOut();
277		$("select, object, embed").show();
278	},
279	
280	getPageSize : function(){
281		var xScroll, yScroll;
282
283		if (window.innerHeight && window.scrollMaxY) {	
284			xScroll = window.innerWidth + window.scrollMaxX;
285			yScroll = window.innerHeight + window.scrollMaxY;
286		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
287			xScroll = document.body.scrollWidth;
288			yScroll = document.body.scrollHeight;
289		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
290			xScroll = document.body.offsetWidth;
291			yScroll = document.body.offsetHeight;
292		}
293
294		var windowWidth, windowHeight;
295

296		if (self.innerHeight) {	// all except Explorer
297			if(document.documentElement.clientWidth){
298				windowWidth = document.documentElement.clientWidth; 
299			} else {
300				windowWidth = self.innerWidth;
301			}
302			windowHeight = self.innerHeight;
303		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
304			windowWidth = document.documentElement.clientWidth;
305			windowHeight = document.documentElement.clientHeight;
306		} else if (document.body) { // other Explorers
307			windowWidth = document.body.clientWidth;
308			windowHeight = document.body.clientHeight;
309		}	
310
311		// for small pages with total height less then height of the viewport
312		if(yScroll < windowHeight){
313			pageHeight = windowHeight;
314		} else { 
315			pageHeight = yScroll;
316		}
317
318
319		// for small pages with total width less then width of the viewport
320		if(xScroll < windowWidth){	
321			pageWidth = xScroll;		
322		} else {
323			pageWidth = windowWidth;
324		}
325
326		arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
327		return arrayPageSize;
328	},
329	getPageScroll : function(){
330		
331		var xScroll, yScroll;
332
333		if (self.pageYOffset) {
334			yScroll = self.pageYOffset;
335			xScroll = self.pageXOffset;
336		} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
337			yScroll = document.documentElement.scrollTop;
338			xScroll = document.documentElement.scrollLeft;
339		} else if (document.body) {// all other Explorers
340			yScroll = document.body.scrollTop;
341			xScroll = document.body.scrollLeft;	
342		}
343
344		arrayPageScroll = new Array(xScroll,yScroll) 
345		return arrayPageScroll;
346	},
347	pause : function(ms){
348		var date = new Date();
349		curDate = null;
350		do{var curDate = new Date();}
351		while( curDate - date < ms);
352	}
353};
354
355$(document).ready(function(){
356	Lightbox.initialize();
357});