1// ----------------------------------------------------------------------------------- 2// 3// Lightbox v2.01 4// by Lokesh Dhakar - http://www.huddletogether.com 5// 3/31/06 6// 7// For more information on this script, visit: 8// http://huddletogether.com/projects/lightbox2/ 9// 10// Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/ 11// 12// Credit also due to those who have helped, inspired, and made their code available to the public. 13// Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others. 14// 15// 16// ----------------------------------------------------------------------------------- 17/* 18 19 Table of Contents 20 ----------------- 21 Configuration 22 Global Variables 23 24 Extending Built-in Objects 25 - Object.extend(Element) 26 - Array.prototype.removeDuplicates() 27 - Array.prototype.empty() 28 29 Lightbox Class Declaration 30 - initialize() 31 - start() 32 - changeImage() 33 - resizeImageContainer() 34 - showImage() 35 - updateDetails() 36 - updateNav() 37 - enableKeyboardNav() 38 - disableKeyboardNav() 39 - keyboardAction() 40 - preloadNeighborImages() 41 - end() 42 43 Miscellaneous Functions 44 - getPageScroll() 45 - getPageSize() 46 - getKey() 47 - listenKey() 48 - showSelectBoxes() 49 - hideSelectBoxes() 50 - pause() 51 - initLightbox() 52 53 Function Calls 54 - addLoadEvent(initLightbox) 55 56*/ 57// ----------------------------------------------------------------------------------- 58 59// 60// Configuration 61// 62var fileLoadingImage = "/system_img/loading.gif"; 63var fileBottomNavCloseImage = "/system_img/closelabel.gif"; 64 65var resizeSpeed = 7; // controls the speed of the image resizing (1=slowest and 10=fastest) 66 67var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable 68 69// ----------------------------------------------------------------------------------- 70 71// 72// Global Variables 73// 74var imageArray = new Array; 75var activeImage; 76 77if(resizeSpeed > 10){ resizeSpeed = 10;} 78if(resizeSpeed < 1){ resizeSpeed = 1;} 79resizeDuration = (11 - resizeSpeed) * 0.15; 80 81// ----------------------------------------------------------------------------------- 82 83// 84// Additional methods for Element added by SU, Couloir 85// - further additions by Lokesh Dhakar (huddletogether.com) 86// 87Object.extend(Element, { 88 getWidth: function(element) { 89 element = $(element); 90 return element.offsetWidth; 91 }, 92 setWidth: function(element,w) { 93 element = $(element); 94 element.style.width = w +"px"; 95 }, 96 setHeight: function(element,h) { 97 element = $(element); 98 element.style.height = h +"px"; 99 }, 100 setTop: function(element,t) { 101 element = $(element); 102 element.style.top = t +"px"; 103 }, 104 setSrc: function(element,src) { 105 element = $(element); 106 element.src = src; 107 }, 108 setHref: function(element,href) { 109 element = $(element); 110 element.href = href; 111 }, 112 setInnerHTML: function(element,content) { 113 element = $(element); 114 element.innerHTML = content; 115 } 116}); 117 118// ----------------------------------------------------------------------------------- 119 120// 121// Extending built-in Array object 122// - array.removeDuplicates() 123// - array.empty() 124// 125Array.prototype.removeDuplicates = function () { 126 for(i = 1; i < this.length; i++){ 127 if(this[i][0] == this[i-1][0]){ 128 this.splice(i,1); 129 } 130 } 131} 132 133// ----------------------------------------------------------------------------------- 134 135Array.prototype.empty = function () { 136 for(i = 0; i <= this.length; i++){ 137 this.shift(); 138 } 139} 140 141// ----------------------------------------------------------------------------------- 142 143// 144// Lightbox Class Declaration 145// - initialize() 146// - start() 147// - changeImage() 148// - resizeImageContainer() 149// - showImage() 150// - updateDetails() 151// - updateNav() 152// - enableKeyboardNav() 153// - disableKeyboardNav() 154// - keyboardNavAction() 155// - preloadNeighborImages() 156// - end() 157// 158// Structuring of code inspired by Scott Upton (http://www.uptonic.com/) 159// 160var Lightbox = Class.create(); 161 162Lightbox.prototype = { 163 164 // initialize() 165 // Constructor runs on completion of the DOM loading. Loops through anchor tags looking for 166 // 'lightbox' references and applies onclick events to appropriate links. The 2nd section of 167 // the function inserts html at the bottom of the page which is used to display the shadow 168 // overlay and the image container. 169 // 170 initialize: function() { 171 if (!document.getElementsByTagName){ return; } 172 var anchors = document.getElementsByTagName('a'); 173 174 // loop through all anchor tags 175 for (var i=0; i<anchors.length; i++){ 176 var anchor = anchors[i]; 177 178 var relAttribute = String(anchor.getAttribute('rel')); 179 180 // use the string.match() method to catch 'lightbox' references in the rel attribute 181 if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){ 182 anchor.onclick = function () {myLightbox.start(this); return false;} 183 } 184 } 185 186 // The rest of this code inserts html at the bottom of the page that looks similar to this: 187 // 188 // <div id="overlay"></div> 189 // <div id="lightbox"> 190 // <div id="outerImageContainer"> 191 // <div id="imageContainer"> 192 // <img id="lightboxImage"> 193 // <div style="" id="hoverNav"> 194 // <a href="#" id="prevLink"></a> 195 // <a href="#" id="nextLink"></a> 196 // </div> 197 // <div id="loading"> 198 // <a href="#" id="loadingLink"> 199 // <img src="images/loading.gif"> 200 // </a> 201 // </div> 202 // </div> 203 // </div> 204 // <div id="imageDataContainer"> 205 // <div id="imageData"> 206 // <div id="imageDetails"> 207 // <span id="caption"></span>
208 // <span id="numberDisplay"></span> 209 // </div> 210 // <div id="bottomNav"> 211 // <a href="#" id="bottomNavClose"> 212 // <img src="images/close.gif"> 213 // </a> 214 // </div> 215 // </div> 216 // </div> 217 // </div> 218 219 220 var objBody = document.getElementsByTagName("body").item(0); 221 222 var objOverlay = document.createElement("div"); 223 objOverlay.setAttribute('id','overlay'); 224 objOverlay.style.display = 'none'; 225 objOverlay.onclick = function() { myLightbox.end(); return false; } 226 objBody.appendChild(objOverlay); 227 228 var objLightbox = document.createElement("div"); 229 objLightbox.setAttribute('id','lightbox'); 230 objLightbox.style.display = 'none'; 231 objBody.appendChild(objLightbox); 232 233 var objOuterImageContainer = document.createElement("div"); 234 objOuterImageContainer.setAttribute('id','outerImageContainer'); 235 objLightbox.appendChild(objOuterImageContainer); 236 237 var objImageContainer = document.createElement("div"); 238 objImageContainer.setAttribute('id','imageContainer'); 239 objOuterImageContainer.appendChild(objImageContainer); 240 241 var objLightboxImage = document.createElement("img"); 242 objLightboxImage.setAttribute('id','lightboxImage'); 243 objImageContainer.appendChild(objLightboxImage); 244 245 var objHoverNav = document.createElement("div"); 246 objHoverNav.setAttribute('id','hoverNav'); 247 objImageContainer.appendChild(objHoverNav); 248 249 var objPrevLink = document.createElement("a"); 250 objPrevLink.setAttribute('id','prevLink'); 251 objPrevLink.setAttribute('href','#'); 252 objHoverNav.appendChild(objPrevLink); 253 254 var objNextLink = document.createElement("a"); 255 objNextLink.setAttribute('id','nextLink'); 256 objNextLink.setAttribute('href','#'); 257 objHoverNav.appendChild(objNextLink); 258 259 var objLoading = document.createElement("div"); 260 objLoading.setAttribute('id','loading'); 261 objImageContainer.appendChild(objLoading); 262 263 var objLoadingLink = document.createElement("a"); 264 objLoadingLink.setAttribute('id','loadingLink'); 265 objLoadingLink.setAttribute('href','#'); 266 objLoadingLink.onclick = function() { myLightbox.end(); return false; } 267 objLoading.appendChild(objLoadingLink); 268 269 var objLoadingImage = document.createElement("img"); 270 objLoadingImage.setAttribute('src', fileLoadingImage); 271 objLoadingLink.appendChild(objLoadingImage); 272 273 var objImageDataContainer = document.createElement("div"); 274 objImageDataContainer.setAttribute('id','imageDataContainer'); 275 objImageDataContainer.className = 'clearfix'; 276 objLightbox.appendChild(objImageDataContainer); 277 278 var objImageData = document.createElement("div"); 279 objImageData.setAttribute('id','imageData'); 280 objImageDataContainer.appendChild(objImageData); 281 282 var objImageDetails = document.createElement("div"); 283 objImageDetails.setAttribute('id','imageDetails'); 284 objImageData.appendChild(objImageDetails); 285 286 var objCaption = document.createElement("span"); 287 objCaption.setAttribute('id','caption'); 288 objImageDetails.appendChild(objCaption); 289
290 var objNumberDisplay = document.createElement("span"); 291 objNumberDisplay.setAttribute('id','numberDisplay'); 292 objImageDetails.appendChild(objNumberDisplay); 293 294 var objBottomNav = document.createElement("div"); 295 objBottomNav.setAttribute('id','bottomNav'); 296 objImageData.appendChild(objBottomNav); 297 298 var objBottomNavCloseLink = document.createElement("a"); 299 objBottomNavCloseLink.setAttribute('id','bottomNavClose'); 300 objBottomNavCloseLink.setAttribute('href','#'); 301 objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; } 302 objBottomNav.appendChild(objBottomNavCloseLink); 303 304 var objBottomNavCloseImage = document.createElement("img"); 305 objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage); 306 objBottomNavCloseLink.appendChild(objBottomNavCloseImage); 307 }, 308 309 // 310 // start() 311 // Display overlay and lightbox. If image is part of a set, add siblings to imageArray. 312 // 313 start: function(imageLink) { 314 315 hideSelectBoxes(); 316 317 // stretch overlay to fill page and fade in 318 var arrayPageSize = getPageSize(); 319 Element.setHeight('overlay', arrayPageSize[1]); 320 new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 }); 321 322 imageArray = []; 323 imageNum = 0; 324 325 if (!document.getElementsByTagName){ return; } 326 var anchors = document.getElementsByTagName('a'); 327 328 // if image is NOT part of a set.. 329 if((imageLink.getAttribute('rel') == 'lightbox')){ 330 // add single image to imageArray 331 imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title'))); 332 } else { 333 // if image is part of a set.. 334 335 // loop through anchors, find other images in set, and add them to imageArray 336 for (var i=0; i<anchors.length; i++){ 337 var anchor = anchors[i]; 338 if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){ 339 imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title'))); 340 } 341 } 342 imageArray.removeDuplicates(); 343 while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;} 344 } 345 346 // calculate top offset for the lightbox and display 347 var arrayPageSize = getPageSize(); 348 var arrayPageScroll = getPageScroll(); 349 var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 15); 350 351 Element.setTop('lightbox', lightboxTop); 352 Element.show('lightbox'); 353 354 this.changeImage(imageNum); 355 }, 356 357 // 358 // changeImage() 359 // Hide most elements and preload image in preparation for resizing image container. 360 // 361 changeImage: function(imageNum) { 362 363 activeImage = imageNum; // update global var 364 365 // hide elements during transition 366 Element.show('loading'); 367 Element.hide('lightboxImage');
368 Element.hide('hoverNav'); 369 Element.hide('prevLink'); 370 Element.hide('nextLink'); 371 Element.hide('imageDataContainer'); 372 Element.hide('numberDisplay'); 373 374 imgPreloader = new Image(); 375 376 // once image is preloaded, resize image container 377 imgPreloader.onload=function(){ 378 Element.setSrc('lightboxImage', imageArray[activeImage][0]); 379 myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height); 380 } 381 imgPreloader.src = imageArray[activeImage][0]; 382 }, 383 384 // 385 // resizeImageContainer() 386 // 387 resizeImageContainer: function( imgWidth, imgHeight) { 388 389 // get current height and width 390 this.wCur = Element.getWidth('outerImageContainer'); 391 this.hCur = Element.getHeight('outerImageContainer'); 392 393 // scalars based on change from old to new 394 this.xScale = ((imgWidth + (borderSize * 2)) / this.wCur) * 100; 395 this.yScale = ((imgHeight + (borderSize * 2)) / this.hCur) * 100; 396 397 // calculate size difference between new and old image, and resize if necessary 398 wDiff = (this.wCur - borderSize * 2) - imgWidth; 399 hDiff = (this.hCur - borderSize * 2) - imgHeight; 400 401 if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); } 402 if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); } 403 404 // if new and old image are same size and no scaling transition is necessary, 405 // do a quick pause to prevent image flicker. 406 if((hDiff == 0) && (wDiff == 0)){ 407 if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);} 408 } 409 410 Element.setHeight('prevLink', imgHeight); 411 Element.setHeight('nextLink', imgHeight); 412 Element.setWidth( 'imageDataContainer', imgWidth + (borderSize * 2)); 413 414 this.showImage(); 415 }, 416 417 // 418 // showImage() 419 // Display image and begin preloading neighbors. 420 // 421 showImage: function(){ 422 Element.hide('loading'); 423 new Effect.Appear('lightboxImage', { duration: 0.5, queue: 'end', afterFinish: function(){ myLightbox.updateDetails(); } }); 424 this.preloadNeighborImages(); 425 }, 426 427 // 428 // updateDetails() 429 // Display caption, image number, and bottom nav. 430 // 431 updateDetails: function() { 432 433 Element.show('caption'); 434 Element.setInnerHTML( 'caption', imageArray[activeImage][1]); 435 436 // if image is part of set display 'Image x of x' 437 if(imageArray.length > 1){ 438 Element.show('numberDisplay'); 439 Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length); 440 } 441 442 new Effect.Parallel( 443 [ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration + 0.25, from: 0.0, to: 1.0 }), 444 new Effect.Appear('imageDataContainer', { sync: true, duration: 1.0 }) ], 445 { duration: 0.65, afterFinish: function() { myLightbox.updateNav();} } 446 ); 447 }, 448 449 // 450 // updateNav() 451 // Display appropriate previous and next hover navigation. 452 // 453 updateNav: function() { 454 455 Element.show('hoverNav'); 456 457 // if not first image in set, display prev image button 458 if(activeImage != 0){ 459 Element.show('prevLink'); 460 document.getElementById('prevLink').onclick = function() { 461 myLightbox.changeImage(activeImage - 1); return false; 462 } 463 } 464 465 // if not last image in set, display next image button 466 if(activeImage != (imageArray.length - 1)){ 467 Element.show('nextLink'); 468 document.getElementById('nextLink').onclick = function() { 469 myLightbox.changeImage(activeImage + 1); return false; 470 } 471 } 472 473 this.enableKeyboardNav(); 474 }, 475 476 // 477 // enableKeyboardNav() 478 // 479 enableKeyboardNav: function() { 480 document.onkeydown = this.keyboardAction; 481 }, 482 483 // 484 // disableKeyboardNav() 485 // 486 disableKeyboardNav: function() { 487 document.onkeydown = ''; 488 }, 489 490 // 491 // keyboardAction() 492 // 493 keyboardAction: function(e) { 494 if (e == null) { // ie 495 keycode = event.keyCode; 496 } else { // mozilla 497 keycode = e.which; 498 } 499 500 key = String.fromCharCode(keycode).toLowerCase(); 501 502 if((key == 'x') || (key == 'o') || (key == 'c')){ // close lightbox 503 myLightbox.end(); 504 } else if(key == 'p'){ // display previous image 505 if(activeImage != 0){ 506 myLightbox.disableKeyboardNav(); 507 myLightbox.changeImage(activeImage - 1); 508 } 509 } else if(key == 'n'){ // display next image 510 if(activeImage != (imageArray.length - 1)){ 511 myLightbox.disableKeyboardNav(); 512 myLightbox.changeImage(activeImage + 1); 513 } 514 } 515 516 517 }, 518 519 // 520 // preloadNeighborImages() 521 // Preload previous and next images. 522 // 523 preloadNeighborImages: function(){ 524 525 if((imageArray.length - 1) > activeImage){ 526 preloadNextImage = new Image(); 527 preloadNextImage.src = imageArray[activeImage + 1][0]; 528 } 529 if(activeImage > 0){ 530 preloadPrevImage = new Image(); 531 preloadPrevImage.src = imageArray[activeImage - 1][0]; 532 } 533 534 }, 535 536 // 537 // end() 538 // 539 end: function() { 540 this.disableKeyboardNav(); 541 Element.hide('lightbox'); 542 new Effect.Fade('overlay', { duration: 0.2}); 543 showSelectBoxes(); 544 } 545} 546 547// ----------------------------------------------------------------------------------- 548 549// 550// getPageScroll() 551// Returns array with x,y page scroll values. 552// Core code from - quirksmode.org 553// 554function getPageScroll(){ 555 556 var yScroll; 557 558 if (self.pageYOffset) { 559 yScroll = self.pageYOffset; 560 } else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict 561 yScroll = document.documentElement.scrollTop; 562 } else if (document.body) {// all other Explorers 563 yScroll = document.body.scrollTop; 564 } 565 566 arrayPageScroll = new Array('',yScroll) 567 return arrayPageScroll; 568} 569 570// ----------------------------------------------------------------------------------- 571 572// 573// getPageSize() 574// Returns array with page width, height and window width, height 575// Core code from - quirksmode.org 576// Edit for Firefox by pHaez 577// 578function getPageSize(){ 579 580 var xScroll, yScroll; 581 582 if (window.innerHeight && window.scrollMaxY) { 583 xScroll = document.body.scrollWidth; 584 yScroll = window.innerHeight + window.scrollMaxY; 585 } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac 586 xScroll = document.body.scrollWidth; 587 yScroll = document.body.scrollHeight; 588 } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari 589 xScroll = document.body.offsetWidth; 590 yScroll = document.body.offsetHeight; 591 } 592 593 var windowWidth, windowHeight;
594 if (self.innerHeight) { // all except Explorer 595 windowWidth = self.innerWidth; 596 windowHeight = self.innerHeight; 597 } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode 598 windowWidth = document.documentElement.clientWidth; 599 windowHeight = document.documentElement.clientHeight; 600 } else if (document.body) { // other Explorers 601 windowWidth = document.body.clientWidth; 602 windowHeight = document.body.clientHeight; 603 } 604 605 // for small pages with total height less then height of the viewport 606 if(yScroll < windowHeight){ 607 pageHeight = windowHeight; 608 } else { 609 pageHeight = yScroll; 610 } 611 612 // for small pages with total width less then width of the viewport 613 if(xScroll < windowWidth){ 614 pageWidth = windowWidth; 615 } else { 616 pageWidth = xScroll; 617 } 618 619 620 arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 621 return arrayPageSize; 622} 623 624// ----------------------------------------------------------------------------------- 625 626// 627// getKey(key) 628// Gets keycode. If 'x' is pressed then it hides the lightbox. 629// 630function getKey(e){ 631 if (e == null) { // ie 632 keycode = event.keyCode; 633 } else { // mozilla 634 keycode = e.which; 635 } 636 key = String.fromCharCode(keycode).toLowerCase(); 637 638 if(key == 'x'){ 639 } 640} 641 642// ----------------------------------------------------------------------------------- 643 644// 645// listenKey() 646// 647function listenKey () { document.onkeypress = getKey; } 648 649// --------------------------------------------------- 650 651function showSelectBoxes(){ 652 selects = document.getElementsByTagName("select"); 653 for (i = 0; i != selects.length; i++) { 654 selects[i].style.visibility = "visible"; 655 } 656} 657 658// --------------------------------------------------- 659 660function hideSelectBoxes(){ 661 selects = document.getElementsByTagName("select"); 662 for (i = 0; i != selects.length; i++) { 663 selects[i].style.visibility = "hidden"; 664 } 665} 666 667// --------------------------------------------------- 668 669// 670// pause(numberMillis) 671// Pauses code execution for specified time. Uses busy code, not good. 672// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602 673// 674function pause(numberMillis) { 675 var now = new Date(); 676 var exitTime = now.getTime() + numberMillis; 677 while (true) { 678 now = new Date(); 679 if (now.getTime() > exitTime) 680 return; 681 } 682} 683 684// --------------------------------------------------- 685 686 687 688function initLightbox() { myLightbox = new Lightbox(); } 689Event.observe(window, 'load', initLightbox, false);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.