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