colonymech / docs / www / colonyscout / lightbox.js @ f59acf11
History | View | Annotate | Download (11.6 KB)
1 |
/*
|
---|---|
2 |
Lightbox JS: Fullsize Image Overlays
|
3 |
by Lokesh Dhakar - http://www.huddletogether.com
|
4 |
|
5 |
For more information on this script, visit:
|
6 |
http://huddletogether.com/projects/lightbox/
|
7 |
|
8 |
Script featured on Dynamic Drive code library Jan 24th, 06':
|
9 |
http://www.dynamicdrive.com
|
10 |
|
11 |
Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
|
12 |
(basically, do anything you want, just leave my name and link)
|
13 |
|
14 |
Table of Contents
|
15 |
-----------------
|
16 |
Configuration
|
17 |
|
18 |
Functions
|
19 |
- getPageScroll()
|
20 |
- getPageSize()
|
21 |
- pause()
|
22 |
- getKey()
|
23 |
- listenKey()
|
24 |
- showLightbox()
|
25 |
- hideLightbox()
|
26 |
- initLightbox()
|
27 |
- addLoadEvent()
|
28 |
|
29 |
Function Calls
|
30 |
- addLoadEvent(initLightbox)
|
31 |
|
32 |
*/
|
33 |
|
34 |
|
35 |
|
36 |
//
|
37 |
// Configuration
|
38 |
//
|
39 |
|
40 |
// If you would like to use a custom loading image or close button reference them in the next two lines.
|
41 |
var loadingImage = 'images/loading.gif'; |
42 |
var closeButton = 'images/close.gif'; |
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
//
|
49 |
// getPageScroll()
|
50 |
// Returns array with x,y page scroll values.
|
51 |
// Core code from - quirksmode.org
|
52 |
//
|
53 |
function getPageScroll(){ |
54 |
|
55 |
var yScroll;
|
56 |
|
57 |
if (self.pageYOffset) {
|
58 |
yScroll = self.pageYOffset; |
59 |
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict |
60 |
yScroll = document.documentElement.scrollTop; |
61 |
} else if (document.body) {// all other Explorers |
62 |
yScroll = document.body.scrollTop; |
63 |
} |
64 |
|
65 |
arrayPageScroll = new Array('',yScroll) |
66 |
return arrayPageScroll;
|
67 |
} |
68 |
|
69 |
|
70 |
|
71 |
//
|
72 |
// getPageSize()
|
73 |
// Returns array with page width, height and window width, height
|
74 |
// Core code from - quirksmode.org
|
75 |
// Edit for Firefox by pHaez
|
76 |
//
|
77 |
function getPageSize(){ |
78 |
|
79 |
var xScroll, yScroll;
|
80 |
|
81 |
if (window.innerHeight && window.scrollMaxY) {
|
82 |
xScroll = document.body.scrollWidth; |
83 |
yScroll = window.innerHeight + window.scrollMaxY; |
84 |
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac |
85 |
xScroll = document.body.scrollWidth; |
86 |
yScroll = document.body.scrollHeight; |
87 |
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari |
88 |
xScroll = document.body.offsetWidth; |
89 |
yScroll = document.body.offsetHeight; |
90 |
} |
91 |
|
92 |
var windowWidth, windowHeight;
|
93 |
if (self.innerHeight) { // all except Explorer |
94 |
windowWidth = self.innerWidth; |
95 |
windowHeight = self.innerHeight; |
96 |
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode |
97 |
windowWidth = document.documentElement.clientWidth; |
98 |
windowHeight = document.documentElement.clientHeight; |
99 |
} else if (document.body) { // other Explorers |
100 |
windowWidth = document.body.clientWidth; |
101 |
windowHeight = document.body.clientHeight; |
102 |
} |
103 |
|
104 |
// for small pages with total height less then height of the viewport
|
105 |
if(yScroll < windowHeight){
|
106 |
pageHeight = windowHeight; |
107 |
} else {
|
108 |
pageHeight = yScroll; |
109 |
} |
110 |
|
111 |
// for small pages with total width less then width of the viewport
|
112 |
if(xScroll < windowWidth){
|
113 |
pageWidth = windowWidth; |
114 |
} else {
|
115 |
pageWidth = xScroll; |
116 |
} |
117 |
|
118 |
|
119 |
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
|
120 |
return arrayPageSize;
|
121 |
} |
122 |
|
123 |
|
124 |
//
|
125 |
// pause(numberMillis)
|
126 |
// Pauses code execution for specified time. Uses busy code, not good.
|
127 |
// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
|
128 |
//
|
129 |
function pause(numberMillis) { |
130 |
var now = new Date(); |
131 |
var exitTime = now.getTime() + numberMillis;
|
132 |
while (true) { |
133 |
now = new Date();
|
134 |
if (now.getTime() > exitTime)
|
135 |
return;
|
136 |
} |
137 |
} |
138 |
|
139 |
//
|
140 |
// getKey(key)
|
141 |
// Gets keycode. If 'x' is pressed then it hides the lightbox.
|
142 |
//
|
143 |
|
144 |
function getKey(e){ |
145 |
if (e == null) { // ie |
146 |
keycode = event.keyCode; |
147 |
} else { // mozilla |
148 |
keycode = e.which; |
149 |
} |
150 |
key = String.fromCharCode(keycode).toLowerCase(); |
151 |
|
152 |
if(key == 'x'){ hideLightbox(); } |
153 |
} |
154 |
|
155 |
|
156 |
//
|
157 |
// listenKey()
|
158 |
//
|
159 |
function listenKey () { document.onkeypress = getKey; } |
160 |
|
161 |
|
162 |
//
|
163 |
// showLightbox()
|
164 |
// Preloads images. Pleaces new image in lightbox then centers and displays.
|
165 |
//
|
166 |
function showLightbox(objLink) |
167 |
{ |
168 |
// prep objects
|
169 |
var objOverlay = document.getElementById('overlay'); |
170 |
var objLightbox = document.getElementById('lightbox'); |
171 |
var objCaption = document.getElementById('lightboxCaption'); |
172 |
var objImage = document.getElementById('lightboxImage'); |
173 |
var objLoadingImage = document.getElementById('loadingImage'); |
174 |
var objLightboxDetails = document.getElementById('lightboxDetails'); |
175 |
|
176 |
|
177 |
var arrayPageSize = getPageSize();
|
178 |
var arrayPageScroll = getPageScroll();
|
179 |
|
180 |
// center loadingImage if it exists
|
181 |
if (objLoadingImage) {
|
182 |
objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px'); |
183 |
objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px'); |
184 |
objLoadingImage.style.display = 'block';
|
185 |
} |
186 |
|
187 |
// set height of Overlay to take up whole page and show
|
188 |
objOverlay.style.height = (arrayPageSize[1] + 'px'); |
189 |
objOverlay.style.display = 'block';
|
190 |
|
191 |
// preload image
|
192 |
imgPreload = new Image();
|
193 |
|
194 |
imgPreload.onload=function(){ |
195 |
objImage.src = objLink.href; |
196 |
|
197 |
// center lightbox and make sure that the top and left values are not negative
|
198 |
// and the image placed outside the viewport
|
199 |
var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2); |
200 |
var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2); |
201 |
|
202 |
objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px"; |
203 |
objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px"; |
204 |
|
205 |
|
206 |
objLightboxDetails.style.width = imgPreload.width + 'px';
|
207 |
|
208 |
if(objLink.getAttribute('title')){ |
209 |
objCaption.style.display = 'block';
|
210 |
//objCaption.style.width = imgPreload.width + 'px';
|
211 |
objCaption.innerHTML = objLink.getAttribute('title');
|
212 |
} else {
|
213 |
objCaption.style.display = 'none';
|
214 |
} |
215 |
|
216 |
// A small pause between the image loading and displaying is required with IE,
|
217 |
// this prevents the previous image displaying for a short burst causing flicker.
|
218 |
if (navigator.appVersion.indexOf("MSIE")!=-1){ |
219 |
pause(250);
|
220 |
} |
221 |
|
222 |
if (objLoadingImage) { objLoadingImage.style.display = 'none'; } |
223 |
objLightbox.style.display = 'block';
|
224 |
|
225 |
// After image is loaded, update the overlay height as the new image might have
|
226 |
// increased the overall page height.
|
227 |
arrayPageSize = getPageSize(); |
228 |
objOverlay.style.height = (arrayPageSize[1] + 'px'); |
229 |
|
230 |
// Check for 'x' keypress
|
231 |
listenKey(); |
232 |
|
233 |
return false; |
234 |
} |
235 |
|
236 |
imgPreload.src = objLink.href; |
237 |
|
238 |
} |
239 |
|
240 |
|
241 |
|
242 |
|
243 |
|
244 |
//
|
245 |
// hideLightbox()
|
246 |
//
|
247 |
function hideLightbox() |
248 |
{ |
249 |
// get objects
|
250 |
objOverlay = document.getElementById('overlay');
|
251 |
objLightbox = document.getElementById('lightbox');
|
252 |
|
253 |
// hide lightbox and overlay
|
254 |
objOverlay.style.display = 'none';
|
255 |
objLightbox.style.display = 'none';
|
256 |
|
257 |
// disable keypress listener
|
258 |
document.onkeypress = '';
|
259 |
} |
260 |
|
261 |
|
262 |
|
263 |
|
264 |
//
|
265 |
// initLightbox()
|
266 |
// Function runs on window load, going through link tags looking for rel="lightbox".
|
267 |
// These links receive onclick events that enable the lightbox display for their targets.
|
268 |
// The function also inserts html markup at the top of the page which will be used as a
|
269 |
// container for the overlay pattern and the inline image.
|
270 |
//
|
271 |
function initLightbox() |
272 |
{ |
273 |
|
274 |
if (!document.getElementsByTagName){ return; } |
275 |
var anchors = document.getElementsByTagName("a"); |
276 |
|
277 |
// loop through all anchor tags
|
278 |
for (var i=0; i<anchors.length; i++){ |
279 |
var anchor = anchors[i];
|
280 |
|
281 |
if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){ |
282 |
anchor.onclick = function () {showLightbox(this); return false;} |
283 |
} |
284 |
} |
285 |
|
286 |
// the rest of this code inserts html at the top of the page that looks like this:
|
287 |
//
|
288 |
// <div id="overlay">
|
289 |
// <a href="#" onclick="hideLightbox(); return false;"><img id="loadingImage" /></a>
|
290 |
// </div>
|
291 |
// <div id="lightbox">
|
292 |
// <a href="#" onclick="hideLightbox(); return false;" title="Click anywhere to close image">
|
293 |
// <img id="closeButton" />
|
294 |
// <img id="lightboxImage" />
|
295 |
// </a>
|
296 |
// <div id="lightboxDetails">
|
297 |
// <div id="lightboxCaption"></div>
|
298 |
// <div id="keyboardMsg"></div>
|
299 |
// </div>
|
300 |
// </div>
|
301 |
|
302 |
var objBody = document.getElementsByTagName("body").item(0); |
303 |
|
304 |
// create overlay div and hardcode some functional styles (aesthetic styles are in CSS file)
|
305 |
var objOverlay = document.createElement("div"); |
306 |
objOverlay.setAttribute('id','overlay'); |
307 |
objOverlay.onclick = function () {hideLightbox(); return false;} |
308 |
objOverlay.style.display = 'none';
|
309 |
objOverlay.style.position = 'absolute';
|
310 |
objOverlay.style.top = '0';
|
311 |
objOverlay.style.left = '0';
|
312 |
objOverlay.style.zIndex = '90';
|
313 |
objOverlay.style.width = '100%';
|
314 |
objBody.insertBefore(objOverlay, objBody.firstChild); |
315 |
|
316 |
var arrayPageSize = getPageSize();
|
317 |
var arrayPageScroll = getPageScroll();
|
318 |
|
319 |
// preload and create loader image
|
320 |
var imgPreloader = new Image(); |
321 |
|
322 |
// if loader image found, create link to hide lightbox and create loadingimage
|
323 |
imgPreloader.onload=function(){ |
324 |
|
325 |
var objLoadingImageLink = document.createElement("a"); |
326 |
objLoadingImageLink.setAttribute('href','#'); |
327 |
objLoadingImageLink.onclick = function () {hideLightbox(); return false;} |
328 |
objOverlay.appendChild(objLoadingImageLink); |
329 |
|
330 |
var objLoadingImage = document.createElement("img"); |
331 |
objLoadingImage.src = loadingImage; |
332 |
objLoadingImage.setAttribute('id','loadingImage'); |
333 |
objLoadingImage.style.position = 'absolute';
|
334 |
objLoadingImage.style.zIndex = '150';
|
335 |
objLoadingImageLink.appendChild(objLoadingImage); |
336 |
|
337 |
imgPreloader.onload=function(){}; // clear onLoad, as IE will flip out w/animated gifs |
338 |
|
339 |
return false; |
340 |
} |
341 |
|
342 |
imgPreloader.src = loadingImage; |
343 |
|
344 |
// create lightbox div, same note about styles as above
|
345 |
var objLightbox = document.createElement("div"); |
346 |
objLightbox.setAttribute('id','lightbox'); |
347 |
objLightbox.style.display = 'none';
|
348 |
objLightbox.style.position = 'absolute';
|
349 |
objLightbox.style.zIndex = '100';
|
350 |
objBody.insertBefore(objLightbox, objOverlay.nextSibling); |
351 |
|
352 |
// create link
|
353 |
var objLink = document.createElement("a"); |
354 |
objLink.setAttribute('href','#'); |
355 |
objLink.setAttribute('title','Click to close'); |
356 |
objLink.onclick = function () {hideLightbox(); return false;} |
357 |
objLightbox.appendChild(objLink); |
358 |
|
359 |
// preload and create close button image
|
360 |
var imgPreloadCloseButton = new Image(); |
361 |
|
362 |
// if close button image found,
|
363 |
imgPreloadCloseButton.onload=function(){ |
364 |
|
365 |
var objCloseButton = document.createElement("img"); |
366 |
objCloseButton.src = closeButton; |
367 |
objCloseButton.setAttribute('id','closeButton'); |
368 |
objCloseButton.style.position = 'absolute';
|
369 |
objCloseButton.style.zIndex = '200';
|
370 |
objLink.appendChild(objCloseButton); |
371 |
|
372 |
return false; |
373 |
} |
374 |
|
375 |
imgPreloadCloseButton.src = closeButton; |
376 |
|
377 |
// create image
|
378 |
var objImage = document.createElement("img"); |
379 |
objImage.setAttribute('id','lightboxImage'); |
380 |
objLink.appendChild(objImage); |
381 |
|
382 |
// create details div, a container for the caption and keyboard message
|
383 |
var objLightboxDetails = document.createElement("div"); |
384 |
objLightboxDetails.setAttribute('id','lightboxDetails'); |
385 |
objLightbox.appendChild(objLightboxDetails); |
386 |
|
387 |
// create caption
|
388 |
var objCaption = document.createElement("div"); |
389 |
objCaption.setAttribute('id','lightboxCaption'); |
390 |
objCaption.style.display = 'none';
|
391 |
objLightboxDetails.appendChild(objCaption); |
392 |
|
393 |
// create keyboard message
|
394 |
var objKeyboardMsg = document.createElement("div"); |
395 |
objKeyboardMsg.setAttribute('id','keyboardMsg'); |
396 |
objKeyboardMsg.innerHTML = 'press <kbd>x</kbd> to close';
|
397 |
objLightboxDetails.appendChild(objKeyboardMsg); |
398 |
|
399 |
|
400 |
} |
401 |
|
402 |
|
403 |
|
404 |
|
405 |
//
|
406 |
// addLoadEvent()
|
407 |
// Adds event to window.onload without overwriting currently assigned onload functions.
|
408 |
// Function found at Simon Willison's weblog - http://simon.incutio.com/
|
409 |
//
|
410 |
function addLoadEvent(func) |
411 |
{ |
412 |
var oldonload = window.onload;
|
413 |
if (typeof window.onload != 'function'){ |
414 |
window.onload = func; |
415 |
} else {
|
416 |
window.onload = function(){ |
417 |
oldonload(); |
418 |
func(); |
419 |
} |
420 |
} |
421 |
|
422 |
} |
423 |
|
424 |
|
425 |
|
426 |
addLoadEvent(initLightbox); // run initLightbox onLoad
|