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