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 Element.setSrc('stimuli_lightboxImage', imageArray[activeImage][0]); 279 Element.setWidth('stimuli_lightboxImage', imgPreloader.width); 280 Element.setHeight('stimuli_lightboxImage', imgPreloader.height); 281 myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height); 282 imgPreloader.onload=function(){}; // clear onLoad, IE behaves irratically with animated gifs otherwise 283 } 284 imgPreloader.src = imageArray[activeImage][0]; 285 }, 286 // resizeImageContainer() 287 resizeImageContainer: function( imgWidth, imgHeight) { 288 // get curren width and height 289 this.widthCurrent = Element.getWidth('stimuli_outerImageContainer'); 290 this.heightCurrent = Element.getHeight('stimuli_outerImageContainer'); 291 // get new width and height 292 var widthNew = (imgWidth + (borderSize * 2)); 293 var heightNew = (imgHeight + (borderSize * 2)); 294 // scalars based on change from old to new 295 this.xScale = ( widthNew / this.widthCurrent) * 100; 296 this.yScale = ( heightNew / this.heightCurrent) * 100; 297 // calculate size difference between new and old image, and resize if necessary 298 wDiff = this.widthCurrent - widthNew; 299 hDiff = this.heightCurrent - heightNew; 300 if(!( hDiff == 0)){ new Effect.Scale('stimuli_outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); } 301 if(!( wDiff == 0)){ new Effect.Scale('stimuli_outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); } 302 // if new and old image are same size and no scaling transition is necessary, 303 // do a quick pause to prevent image flicker. 304 if((hDiff == 0) && (wDiff == 0)){ 305 if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);} 306 } 307 Element.setHeight('stimuli_prevLink', imgHeight); 308 Element.setHeight('stimuli_nextLink', imgHeight); 309 Element.setWidth( 'stimuli_imageDataContainer', widthNew); 310 this.showImage(); 311 }, 312 // showImage() 313 // Display image and begin preloading neighbors. 314 showImage: function(){ 315 Element.hide('stimuli_loading'); 316 new Effect.Appear('stimuli_lightboxImage', { duration: resizeDuration, queue: 'end', afterFinish: function(){ myLightbox.updateDetails(); } }); 317 this.preloadNeighborImages(); 318 }, 319 // updateDetails() 320 // Display caption, image number, and bottom nav. 321 updateDetails: function() { 322 // if caption is not null 323 if(imageArray[activeImage][1]){ 324 Element.show('stimuli_caption'); 325 Element.setInnerHTML( 'stimuli_caption', imageArray[activeImage][1]); 326 } 327 // if image is part of set display 'Image x of x' 328 if(imageArray.length > 1){ 329 Element.show('stimuli_numberDisplay'); 330 Element.setInnerHTML( 'stimuli_numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length); 331 } 332 new Effect.Parallel( 333 [ new Effect.SlideDown( 'stimuli_imageDataContainer', { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }), 334 new Effect.Appear('stimuli_imageDataContainer', { sync: true, duration: resizeDuration }) ], 335 { duration: resizeDuration, afterFinish: function() { 336 // update overlay size and update nav 337 var arrayPageSize = getPageSize(); 338 Element.setHeight('stimuli_overlay', arrayPageSize[1]); 339 myLightbox.updateNav(); 340 } 341 } 342 ); 343 }, 344 // updateNav() 345 // Display appropriate previous and next hover navigation. 346 updateNav: function() { 347 Element.show('stimuli_hoverNav'); 348 // if not first image in set, display prev image button 349 if(activeImage != 0){ 350 Element.show('stimuli_prevLink'); 351 document.getElementById('stimuli_prevLink').onclick = function() { 352 myLightbox.changeImage(activeImage - 1); return false; 353 } 354 } 355 // if not last image in set, display next image button 356 if(activeImage != (imageArray.length - 1)){ 357 Element.show('stimuli_nextLink'); 358 document.getElementById('stimuli_nextLink').onclick = function() { 359 myLightbox.changeImage(activeImage + 1); return false;
360 } 361 } 362 this.enableKeyboardNav(); 363 }, 364 // enableKeyboardNav() 365 enableKeyboardNav: function() { 366 document.onkeydown = this.keyboardAction; 367 }, 368 // disableKeyboardNav() 369 disableKeyboardNav: function() { 370 document.onkeydown = ''; 371 }, 372 // keyboardAction() 373 keyboardAction: function(e) { 374 if (e == null) { // ie 375 keycode = event.keyCode; 376 escapeKey = 27; 377 } else { // mozilla 378 keycode = e.keyCode; 379 escapeKey = e.DOM_VK_ESCAPE; 380 } 381 key = String.fromCharCode(keycode).toLowerCase(); 382 if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)){ // close lightbox 383 myLightbox.end(); 384 } else if((key == 'p') || (keycode == 37)){ // display previous image 385 if(activeImage != 0){ 386 myLightbox.disableKeyboardNav(); 387 myLightbox.changeImage(activeImage - 1); 388 } 389 } else if((key == 'n') || (keycode == 39)){ // display next image 390 if(activeImage != (imageArray.length - 1)){ 391 myLightbox.disableKeyboardNav(); 392 myLightbox.changeImage(activeImage + 1); 393 } 394 } 395 }, 396 // preloadNeighborImages() 397 // Preload previous and next images. 398 preloadNeighborImages: function(){ 399 if((imageArray.length - 1) > activeImage){ 400 preloadNextImage = new Image(); 401 preloadNextImage.src = imageArray[activeImage + 1][0]; 402 } 403 if(activeImage > 0){ 404 preloadPrevImage = new Image(); 405 preloadPrevImage.src = imageArray[activeImage - 1][0]; 406 } 407 }, 408 // end() 409 end: function() { 410 this.disableKeyboardNav(); 411 Element.hide('stimuli_lightbox'); 412 new Effect.Fade('stimuli_overlay', { duration: overlayDuration}); 413 showSelectBoxes(); 414 showFlash(); 415 } 416} 417// ----------------------------------------------------------------------------------- 418// getPageScroll() 419function getPageScroll(){ 420 var xScroll, yScroll; 421 if (self.pageYOffset) { 422 yScroll = self.pageYOffset; 423 xScroll = self.pageXOffset; 424 } else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict 425 yScroll = document.documentElement.scrollTop; 426 xScroll = document.documentElement.scrollLeft; 427 } else if (document.body) {// all other Explorers 428 yScroll = document.body.scrollTop; 429 xScroll = document.body.scrollLeft; 430 } 431 arrayPageScroll = new Array(xScroll,yScroll) 432 return arrayPageScroll; 433} 434// ----------------------------------------------------------------------------------- 435// getPageSize() 436function getPageSize(){ 437 var xScroll, yScroll; 438 if (window.innerHeight && window.scrollMaxY) { 439 xScroll = window.innerWidth + window.scrollMaxX; 440 yScroll = window.innerHeight + window.scrollMaxY; 441 } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac 442 xScroll = document.body.scrollWidth; 443 yScroll = document.body.scrollHeight; 444 } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari 445 xScroll = document.body.offsetWidth; 446 yScroll = document.body.offsetHeight; 447 } 448 var windowWidth, windowHeight; 449 if (self.innerHeight) { // all except Explorer 450 if(document.documentElement.clientWidth){ 451 windowWidth = document.documentElement.clientWidth; 452 } else { 453 windowWidth = self.innerWidth; 454 } 455 windowHeight = self.innerHeight; 456 } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode 457 windowWidth = document.documentElement.clientWidth; 458 windowHeight = document.documentElement.clientHeight; 459 } else if (document.body) { // other Explorers 460 windowWidth = document.body.clientWidth; 461 windowHeight = document.body.clientHeight; 462 } 463 // for small pages with total height less then height of the viewport 464 if(yScroll < windowHeight){ 465 pageHeight = windowHeight; 466 } else { 467 pageHeight = yScroll; 468 } 469 // for small pages with total width less then width of the viewport 470 if(xScroll < windowWidth){ 471 pageWidth = xScroll; 472 } else { 473 pageWidth = windowWidth; 474 } 475 arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 476 return arrayPageSize; 477} 478// ----------------------------------------------------------------------------------- 479// getKey(key) 480function getKey(e){ 481 if (e == null) { // ie 482 keycode = event.keyCode; 483 } else { // mozilla 484 keycode = e.which; 485 } 486 key = String.fromCharCode(keycode).toLowerCase(); 487 if(key == 'x'){ 488 } 489} 490// ----------------------------------------------------------------------------------- 491// listenKey() 492function listenKey () { document.onkeypress = getKey; } 493// --------------------------------------------------- 494function showSelectBoxes(){ 495 var selects = document.getElementsByTagName("select"); 496 for (i = 0; i != selects.length; i++) { 497 selects[i].style.visibility = "visible"; 498 } 499} 500// --------------------------------------------------- 501function hideSelectBoxes(){ 502 var selects = document.getElementsByTagName("select"); 503 for (i = 0; i != selects.length; i++) { 504 selects[i].style.visibility = "hidden"; 505 } 506} 507// --------------------------------------------------- 508function showFlash(){ 509 var flashObjects = document.getElementsByTagName("object"); 510 for (i = 0; i < flashObjects.length; i++) { 511 flashObjects[i].style.visibility = "visible"; 512 } 513 var flashEmbeds = document.getElementsByTagName("embed"); 514 for (i = 0; i < flashEmbeds.length; i++) { 515 flashEmbeds[i].style.visibility = "visible"; 516 } 517} 518// --------------------------------------------------- 519function hideFlash(){ 520 var flashObjects = document.getElementsByTagName("object"); 521 for (i = 0; i < flashObjects.length; i++) { 522 flashObjects[i].style.visibility = "hidden"; 523 } 524 var flashEmbeds = document.getElementsByTagName("embed"); 525 for (i = 0; i < flashEmbeds.length; i++) { 526 flashEmbeds[i].style.visibility = "hidden"; 527 } 528} 529// --------------------------------------------------- 530function pause(ms){ 531 var date = new Date(); 532 curDate = null; 533 do{var curDate = new Date();} 534 while( curDate - date < ms); 535} 536// --------------------------------------------------- 537function initLightbox() { myLightbox = new Lightbox(); } 538Event.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.