1// For original FULL CODE COMMENTS grab the original lightbox source: http://www.huddletogether.com/projects/lightbox2/releases/lightbox2.03.3.zip 2// Lightbox v2.03.3 by Lokesh Dhakar 3// http://huddletogether.com/projects/lightbox2/ 4// Licensed under the Creative Commons Attribution 2.5 License 5// ----------------------------------------------------------------------------------- 6// Configuration 7var overlayOpacity = 0.8; // controls transparency of shadow overlay 8var animate = true; // toggles resizing animations 9var resizeSpeed = 9; // controls the speed of the image resizing animations (1=slowest and 10=fastest) 10var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable 11// ----------------------------------------------------------------------------------- 12// Global Variables 13var imageArray = new Array; 14var activeImage; 15if(animate == true){ 16 overlayDuration = 0.2; // shadow fade in/out duration 17 if(resizeSpeed > 10){ resizeSpeed = 10;} 18 if(resizeSpeed < 1){ resizeSpeed = 1;} 19 resizeDuration = (11 - resizeSpeed) * 0.15; 20} else { 21 overlayDuration = 0; 22 resizeDuration = 0; 23} 24// ----------------------------------------------------------------------------------- 25// Additional methods for Element 26Object.extend(Element, { 27 getWidth: function(element) { 28 element = $(element); 29 return element.offsetWidth; 30 }, 31 setWidth: function(element,w) { 32 element = $(element); 33 element.style.width = w +"px"; 34 }, 35 setHeight: function(element,h) { 36 element = $(element); 37 element.style.height = h +"px"; 38 }, 39 setTop: function(element,t) { 40 element = $(element); 41 element.style.top = t +"px"; 42 }, 43 setLeft: function(element,l) { 44 element = $(element); 45 element.style.left = l +"px"; 46 }, 47 setSrc: function(element,src) { 48 element = $(element); 49 element.src = src; 50 }, 51 setHref: function(element,href) { 52 element = $(element); 53 element.href = href; 54 }, 55 setInnerHTML: function(element,content) { 56 element = $(element); 57 element.innerHTML = content; 58 } 59}); 60// ----------------------------------------------------------------------------------- 61// Extending built-in Array object 62// - array.removeDuplicates() 63// - array.empty() 64Array.prototype.removeDuplicates = function () { 65 for(i = 0; i < this.length; i++){ 66 for(j = this.length-1; j>i; j--){ 67 if(this[i][0] == this[j][0]){ 68 this.splice(j,1); 69 } 70 } 71 } 72} 73// ----------------------------------------------------------------------------------- 74Array.prototype.empty = function () { 75 for(i = 0; i <= this.length; i++){ 76 this.shift(); 77 } 78} 79// ----------------------------------------------------------------------------------- 80var Lightbox = Class.create(); 81Lightbox.prototype = { 82 // initialize() 83 // Constructor runs on completion of the DOM loading. Calls updateImageList and then 84 // the function inserts html at the bottom of the page which is used to display the shadow 85 // overlay and the image container. 86 initialize: function() { 87
88 this.updateImageList(); 89 var objBody = document.getElementsByTagName("body").item(0); 90 var objOverlay = document.createElement("div"); 91 objOverlay.setAttribute('id','stimuli_overlay'); 92 objOverlay.style.display = 'none'; 93 objOverlay.onclick = function() { myLightbox.end(); } 94 objBody.appendChild(objOverlay); 95 var objLightbox = document.createElement("div"); 96 objLightbox.setAttribute('id','stimuli_lightbox'); 97 objLightbox.style.display = 'none'; 98 objLightbox.onclick = function(e) { // close Lightbox if user clicks shadow overlay 99 if (!e) var e = window.event; 100 var clickObj = Event.element(e).id; 101 if ( clickObj == 'stimuli_lightbox') { 102 myLightbox.end(); 103 } 104 }; 105 objBody.appendChild(objLightbox); 106 var objOuterImageContainer = document.createElement("div"); 107 objOuterImageContainer.setAttribute('id','stimuli_outerImageContainer'); 108 objLightbox.appendChild(objOuterImageContainer); 109 // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension. 110 // If animations are turned off, it will be hidden as to prevent a flicker of a 111 // white 250 by 250 box. 112 if(animate){ 113 Element.setWidth('stimuli_outerImageContainer', 250); 114 Element.setHeight('stimuli_outerImageContainer', 250); 115 } else { 116 Element.setWidth('stimuli_outerImageContainer', 1); 117 Element.setHeight('stimuli_outerImageContainer', 1); 118 } 119 var objImageContainer = document.createElement("div"); 120 objImageContainer.setAttribute('id','stimuli_imageContainer'); 121 objOuterImageContainer.appendChild(objImageContainer); 122 123 var objLightboxImage = document.createElement("img"); 124 objLightboxImage.setAttribute('id','stimuli_lightboxImage'); 125 objImageContainer.appendChild(objLightboxImage); 126 127 var objHoverNav = document.createElement("div"); 128 objHoverNav.setAttribute('id','stimuli_hoverNav'); 129 objImageContainer.appendChild(objHoverNav); 130 131 var objPrevLink = document.createElement("a"); 132 objPrevLink.setAttribute('id','stimuli_prevLink'); 133 objPrevLink.setAttribute('href','#'); 134 objHoverNav.appendChild(objPrevLink); 135 136 var objNextLink = document.createElement("a"); 137 objNextLink.setAttribute('id','stimuli_nextLink'); 138 objNextLink.setAttribute('href','#'); 139 objHoverNav.appendChild(objNextLink); 140 141 var objLoading = document.createElement("div"); 142 objLoading.setAttribute('id','stimuli_loading'); 143 objImageContainer.appendChild(objLoading); 144 145 var objLoadingLink = document.createElement("a"); 146 objLoadingLink.setAttribute('id','stimuli_loadingLink'); 147 objLoadingLink.setAttribute('href','#'); 148 objLoadingLink.onclick = function() { myLightbox.end(); return false; } 149 objLoading.appendChild(objLoadingLink); 150 151 var objImageDataContainer = document.createElement("div"); 152 objImageDataContainer.setAttribute('id','stimuli_imageDataContainer'); 153 objLightbox.appendChild(objImageDataContainer); 154 var objImageData = document.createElement("div"); 155 objImageData.setAttribute('id','stimuli_imageData'); 156 objImageDataContainer.appendChild(objImageData); 157 158 var objImageDetails = document.createElement("div"); 159 objImageDetails.setAttribute('id','stimuli_imageDetails'); 160 objImageData.appendChild(objImageDetails); 161 162 var objCaption = document.createElement("span"); 163 objCaption.setAttribute('id','stimuli_caption'); 164 objImageDetails.appendChild(objCaption); 165
166 var objNumberDisplay = document.createElement("span"); 167 objNumberDisplay.setAttribute('id','stimuli_numberDisplay'); 168 objImageDetails.appendChild(objNumberDisplay); 169 170 var objBottomNav = document.createElement("div"); 171 objBottomNav.setAttribute('id','stimuli_bottomNav'); 172 objImageData.appendChild(objBottomNav); 173 174 var objBottomNavCloseLink = document.createElement("a"); 175 objBottomNavCloseLink.setAttribute('id','stimuli_bottomNavClose'); 176 objBottomNavCloseLink.setAttribute('href','#'); 177 objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; } 178 objBottomNav.appendChild(objBottomNavCloseLink); 179 }, 180 // updateImageList() 181 // Loops through anchor tags looking for 'lightbox' references and applies onclick 182 // events to appropriate links. You can rerun after dynamically adding images w/ajax. 183 updateImageList: function() { 184 if (!document.getElementsByTagName){ return; } 185 var anchors = document.getElementsByTagName('a'); 186 var areas = document.getElementsByTagName('area'); 187 // loop through all anchor tags 188 for (var i=0; i<anchors.length; i++){ 189 var anchor = anchors[i]; 190 var relAttribute = String(anchor.getAttribute('rel')); 191 // use the string.match() method to catch 'lightbox' references in the rel attribute 192 if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){ 193 anchor.onclick = function () {myLightbox.start(this); return false;} 194 } 195 } 196 // loop through all area tags 197 // todo: combine anchor & area tag loops 198 for (var i=0; i< areas.length; i++){ 199 var area = areas[i]; 200 var relAttribute = String(area.getAttribute('rel')); 201 // use the string.match() method to catch 'lightbox' references in the rel attribute 202 if (area.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){ 203 area.onclick = function () {myLightbox.start(this); return false;} 204 } 205 } 206 }, 207 // start() 208 // Display overlay and lightbox. If image is part of a set, add siblings to imageArray. 209 start: function(imageLink) { 210 hideSelectBoxes(); 211 hideFlash(); 212 // stretch overlay to fill page and fade in 213 var arrayPageSize = getPageSize(); 214 Element.setWidth('stimuli_overlay', arrayPageSize[0]); 215 Element.setHeight('stimuli_overlay', arrayPageSize[1]); 216 new Effect.Appear('stimuli_overlay', { duration: overlayDuration, from: 0.0, to: overlayOpacity }); 217 imageArray = []; 218 imageNum = 0; 219 if (!document.getElementsByTagName){ return; } 220 var anchors = document.getElementsByTagName( imageLink.tagName); 221 var stimuli_image_title = ""; 222 // if image is NOT part of a set... ie not lightbox[someset] 223 if((imageLink.getAttribute('rel') == 'lightbox')){ 224 // check for title-less links, and grab image title if needed 225 stimuli_image_title = ""; 226 var possibleLightboxImageTitles = [imageLink.getAttribute('title'), imageLink.childNodes[0]['title'], imageLink.childNodes[0]['alt'], " "]; 227 var possible_Int = 0; 228 while (stimuli_image_title == ("")) { 229 stimuli_image_title = possibleLightboxImageTitles[possible_Int]; 230 possible_Int++; 231 } 232 // add single image to imageArray 233 imageArray.push(new Array(imageLink.getAttribute('href'), stimuli_image_title)); 234 } else { 235 // if image is part of a set... ie lightbox[someset] 236 // loop through anchors, find other images in set, and add them to imageArray 237 for (var i=0; i<anchors.length; i++){ 238 var anchor = anchors[i]; 239 if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){ 240 // check for title-less links, and grab image title if needed 241 stimuli_image_title = ""; 242 var possibleLightboxImageTitles = [ anchor['title'], anchor.childNodes[0]['title'], anchor.childNodes[0]['alt'], " " ]; 243 var possible_Int = 0; 244 while (stimuli_image_title == ("")) { 245 stimuli_image_title = possibleLightboxImageTitles[possible_Int]; 246 possible_Int++; 247 } 248 imageArray.push(new Array(anchor.getAttribute('href'), stimuli_image_title)); 249 } 250 } 251 imageArray.removeDuplicates(); 252 while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;} 253 } 254 // calculate top and left offset for the lightbox 255 var arrayPageScroll = getPageScroll(); 256 var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10); 257 var lightboxLeft = arrayPageScroll[0]; 258 Element.setTop('stimuli_lightbox', lightboxTop); 259 Element.setLeft('stimuli_lightbox', lightboxLeft); 260 Element.show('stimuli_lightbox'); 261 this.changeImage(imageNum); 262 }, 263 // changeImage() 264 // Hide most elements and preload image in preparation for resizing image container. 265 changeImage: function(imageNum) { 266 activeImage = imageNum; // update global var
267 // hide elements during transition 268 if(animate){ Element.show('stimuli_loading');} 269 Element.hide('stimuli_lightboxImage'); 270 Element.hide('stimuli_hoverNav'); 271 Element.hide('stimuli_prevLink'); 272 Element.hide('stimuli_nextLink'); 273 Element.hide('stimuli_imageDataContainer'); 274 Element.hide('stimuli_numberDisplay'); 275 imgPreloader = new Image(); 276 // once image is preloaded, resize image container 277 imgPreloader.onload=function(){ 278 // Shrink larger images horizontally and/or vertically to fit screen without scrolling: 279 if(arrayPageSize[0]<imgPreloader.width) { 280 imgPreloader.height=(imgPreloader.height*(arrayPageSize[0]-2*borderSize)/imgPreloader.width); 281 imgPreloader.width=(arrayPageSize[0]-2*borderSize); 282 } 283 if(arrayPageSize[3]<imgPreloader.height) { //15 is a number that 'just works' 284 imgPreloader.width=(imgPreloader.width*(arrayPageSize[3]-15*borderSize)/imgPreloader.height); 285 imgPreloader.height=(arrayPageSize[3]-15*borderSize); 286 } 287 Element.setSrc('stimuli_lightboxImage', imageArray[activeImage][0]); 288 Element.setWidth('stimuli_lightboxImage', imgPreloader.width); 289 Element.setHeight('stimuli_lightboxImage', imgPreloader.height); 290 myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height); 291 imgPreloader.onload=function(){}; // clear onLoad, IE behaves erratically with animated gifs otherwise 292 } 293 imgPreloader.src = imageArray[activeImage][0]; 294 }, 295 // resizeImageContainer() 296 resizeImageContainer: function( imgWidth, imgHeight) { 297 // get curren width and height 298 this.widthCurrent = Element.getWidth('stimuli_outerImageContainer'); 299 this.heightCurrent = Element.getHeight('stimuli_outerImageContainer'); 300 // get new width and height 301 var widthNew = (imgWidth + (borderSize * 2)); 302 var heightNew = (imgHeight + (borderSize * 2)); 303 // scalars based on change from old to new 304 this.xScale = ( widthNew / this.widthCurrent) * 100; 305 this.yScale = ( heightNew / this.heightCurrent) * 100; 306 // calculate size difference between new and old image, and resize if necessary 307 wDiff = this.widthCurrent - widthNew; 308 hDiff = this.heightCurrent - heightNew; 309 if(!( hDiff == 0)){ new Effect.Scale('stimuli_outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); } 310 if(!( wDiff == 0)){ new Effect.Scale('stimuli_outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); } 311 // if new and old image are same size and no scaling transition is necessary, 312 // do a quick stimuli_pause to prevent image flicker. 313 if((hDiff == 0) && (wDiff == 0)){ 314 if (navigator.appVersion.indexOf("MSIE")!=-1){ stimuli_pause(250); } else { stimuli_pause(100);} 315 } 316 Element.setHeight('stimuli_prevLink', imgHeight); 317 Element.setHeight('stimuli_nextLink', imgHeight); 318 Element.setWidth( 'stimuli_imageDataContainer', widthNew); 319 this.showImage(); 320 }, 321 // showImage() 322 // Display image and begin preloading neighbors. 323 showImage: function(){ 324 Element.hide('stimuli_loading'); 325 new Effect.Appear('stimuli_lightboxImage', { duration: resizeDuration, queue: 'end', afterFinish: function(){ myLightbox.updateDetails(); } }); 326 this.preloadNeighborImages(); 327 }, 328 // updateDetails() 329 // Display caption, image number, and bottom nav. 330 updateDetails: function() { 331 // if caption is not null 332 if(imageArray[activeImage][1]){ 333 Element.show('stimuli_caption'); 334 Element.setInnerHTML( 'stimuli_caption', imageArray[activeImage][1]); 335 } 336 // if image is part of set display 'Image x of x' 337 if(imageArray.length > 1){ 338 Element.show('stimuli_numberDisplay'); 339 Element.setInnerHTML( 'stimuli_numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length); 340 } 341 new Effect.Parallel( 342 [ new Effect.SlideDown( 'stimuli_imageDataContainer', { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }), 343 new Effect.Appear('stimuli_imageDataContainer', { sync: true, duration: resizeDuration }) ], 344 { duration: resizeDuration, afterFinish: function() { 345 // update overlay size and update nav 346 var arrayPageSize = getPageSize(); 347 Element.setHeight('stimuli_overlay', arrayPageSize[1]); 348 myLightbox.updateNav(); 349 } 350 } 351 ); 352 }, 353 // updateNav() 354 // Display appropriate previous and next hover navigation. 355 updateNav: function() { 356 Element.show('stimuli_hoverNav'); 357 // if not first image in set, display prev image button 358 if(activeImage != 0){ 359 Element.show('stimuli_prevLink'); 360 document.getElementById('stimuli_prevLink').onclick = function() { 361 myLightbox.changeImage(activeImage - 1); return false;
362 } 363 } 364 // if not last image in set, display next image button 365 if(activeImage != (imageArray.length - 1)){ 366 Element.show('stimuli_nextLink'); 367 document.getElementById('stimuli_nextLink').onclick = function() { 368 myLightbox.changeImage(activeImage + 1); return false; 369 } 370 } 371 this.enableKeyboardNav(); 372 }, 373 // enableKeyboardNav() 374 enableKeyboardNav: function() { 375 document.onkeydown = this.keyboardAction; 376 }, 377 // disableKeyboardNav() 378 disableKeyboardNav: function() { 379 document.onkeydown = ''; 380 }, 381 // keyboardAction() 382 keyboardAction: function(e) { 383 if (e == null) { // ie 384 keycode = event.keyCode; 385 escapeKey = 27; 386 } else { // mozilla 387 keycode = e.keyCode; 388 escapeKey = e.DOM_VK_ESCAPE; 389 } 390 key = String.fromCharCode(keycode).toLowerCase(); 391 if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)){ // close lightbox 392 myLightbox.end(); 393 } else if((key == 'p') || (keycode == 37)){ // display previous image 394 if(activeImage != 0){ 395 myLightbox.disableKeyboardNav(); 396 myLightbox.changeImage(activeImage - 1); 397 } 398 } else if((key == 'n') || (keycode == 39)){ // display next image 399 if(activeImage != (imageArray.length - 1)){ 400 myLightbox.disableKeyboardNav(); 401 myLightbox.changeImage(activeImage + 1); 402 } 403 } 404 }, 405 // preloadNeighborImages() 406 // Preload previous and next images. 407 preloadNeighborImages: function(){ 408 if((imageArray.length - 1) > activeImage){ 409 preloadNextImage = new Image(); 410 preloadNextImage.src = imageArray[activeImage + 1][0]; 411 } 412 if(activeImage > 0){ 413 preloadPrevImage = new Image(); 414 preloadPrevImage.src = imageArray[activeImage - 1][0]; 415 } 416 }, 417 // end() 418 end: function() { 419 this.disableKeyboardNav(); 420 Element.hide('stimuli_lightbox'); 421 new Effect.Fade('stimuli_overlay', { duration: overlayDuration}); 422 showSelectBoxes(); 423 showFlash(); 424 } 425} 426// ----------------------------------------------------------------------------------- 427// getPageScroll() 428function getPageScroll(){ 429 var xScroll, yScroll; 430 if (self.pageYOffset) { 431 yScroll = self.pageYOffset; 432 xScroll = self.pageXOffset; 433 } else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict 434 yScroll = document.documentElement.scrollTop; 435 xScroll = document.documentElement.scrollLeft; 436 } else if (document.body) {// all other Explorers 437 yScroll = document.body.scrollTop; 438 xScroll = document.body.scrollLeft; 439 } 440 arrayPageScroll = new Array(xScroll,yScroll) 441 return arrayPageScroll; 442} 443// ----------------------------------------------------------------------------------- 444// getPageSize() 445function getPageSize(){ 446 var xScroll, yScroll; 447 if (window.innerHeight && window.scrollMaxY) { 448 xScroll = window.innerWidth + window.scrollMaxX; 449 yScroll = window.innerHeight + window.scrollMaxY; 450 } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac 451 xScroll = document.body.scrollWidth; 452 yScroll = document.body.scrollHeight; 453 } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari 454 xScroll = document.body.offsetWidth; 455 yScroll = document.body.offsetHeight; 456 } 457 var windowWidth, windowHeight; 458 if (self.innerHeight) { // all except Explorer 459 if(document.documentElement.clientWidth){ 460 windowWidth = document.documentElement.clientWidth; 461 } else { 462 windowWidth = self.innerWidth; 463 } 464 windowHeight = self.innerHeight; 465 } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode 466 windowWidth = document.documentElement.clientWidth; 467 windowHeight = document.documentElement.clientHeight; 468 } else if (document.body) { // other Explorers 469 windowWidth = document.body.clientWidth; 470 windowHeight = document.body.clientHeight; 471 } 472 // for small pages with total height less then height of the viewport 473 if(yScroll < windowHeight){ 474 pageHeight = windowHeight; 475 } else { 476 pageHeight = yScroll; 477 } 478 // for small pages with total width less then width of the viewport 479 if(xScroll < windowWidth){ 480 pageWidth = xScroll; 481 } else { 482 pageWidth = windowWidth; 483 } 484 arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 485 return arrayPageSize; 486} 487// ----------------------------------------------------------------------------------- 488// getKey(key) 489function getKey(e){ 490 if (e == null) { // ie 491 keycode = event.keyCode; 492 } else { // mozilla 493 keycode = e.which; 494 } 495 key = String.fromCharCode(keycode).toLowerCase(); 496 if(key == 'x'){ 497 } 498} 499// ----------------------------------------------------------------------------------- 500// listenKey() 501function listenKey () { document.onkeypress = getKey; } 502// --------------------------------------------------- 503function showSelectBoxes(){ 504 var selects = document.getElementsByTagName("select"); 505 for (i = 0; i != selects.length; i++) { 506 selects[i].style.visibility = "visible"; 507 } 508} 509// --------------------------------------------------- 510function hideSelectBoxes(){ 511 var selects = document.getElementsByTagName("select"); 512 for (i = 0; i != selects.length; i++) { 513 selects[i].style.visibility = "hidden"; 514 } 515} 516// --------------------------------------------------- 517function showFlash(){ 518 var flashObjects = document.getElementsByTagName("object"); 519 for (i = 0; i < flashObjects.length; i++) { 520 flashObjects[i].style.visibility = "visible"; 521 } 522 var flashEmbeds = document.getElementsByTagName("embed"); 523 for (i = 0; i < flashEmbeds.length; i++) { 524 flashEmbeds[i].style.visibility = "visible"; 525 } 526} 527// --------------------------------------------------- 528function hideFlash(){ 529 var flashObjects = document.getElementsByTagName("object"); 530 for (i = 0; i < flashObjects.length; i++) { 531 flashObjects[i].style.visibility = "hidden"; 532 } 533 var flashEmbeds = document.getElementsByTagName("embed"); 534 for (i = 0; i < flashEmbeds.length; i++) { 535 flashEmbeds[i].style.visibility = "hidden"; 536 } 537} 538// --------------------------------------------------- 539function stimuli_pause(ms){ 540 var date = new Date(); 541 curDate = null; 542 do{var curDate = new Date();} 543 while( curDate - date < ms); 544} 545// --------------------------------------------------- 546function initLightbox() { myLightbox = new Lightbox(); } 547Event.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.