A hacked version of lightbox that uses an IFrame when the url points to anything other than a jpeg. Also, added some syntax that allows a link to specify the height of the lightbox like this:
1 <a href="http://google.com" rel="lightbox|300">LB with height 300</a>
1 2 // ----------------------------------------------------------------------------------- 3 // 4 // Lightbox v2.02 5 // by Lokesh Dhakar - http://www.huddletogether.com 6 // 3/31/06 7 // 8 // hacked to use iframe for non-jpeg urls 9 // by Tim Morgan - http://timmorgan.org 10 // 8/9/06 11 // 12 // For more information on this script, visit: 13 // http://huddletogether.com/projects/lightbox2/ 14 // ...and... 15 // http://mpov.wordpress.com/2006/08/08/lightbox-with-iframes/ 16 // 17 // Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/ 18 // 19 // Credit also due to those who have helped, inspired, and made their code available to the public. 20 // Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others. 21 // 22 // 23 // ----------------------------------------------------------------------------------- 24 /* 25 26 Table of Contents 27 ----------------- 28 Configuration 29 Global Variables 30 31 Extending Built-in Objects 32 - Object.extend(Element) 33 - Array.prototype.removeDuplicates() 34 - Array.prototype.empty() 35 36 Lightbox Class Declaration 37 - initialize() 38 - start() 39 - changeImage() 40 - resizeImageContainer() 41 - showImage() 42 - updateDetails() 43 - updateNav() 44 - enableKeyboardNav() 45 - disableKeyboardNav() 46 - keyboardAction() 47 - preloadNeighborImages() 48 - end() 49 50 Miscellaneous Functions 51 - getPageScroll() 52 - getPageSize() 53 - getKey() 54 - listenKey() 55 - showSelectBoxes() 56 - hideSelectBoxes() 57 - pause() 58 - initLightbox() 59 60 Function Calls 61 - addLoadEvent(initLightbox) 62 63 */ 64 // ----------------------------------------------------------------------------------- 65 66 // 67 // Configuration 68 // 69 var fileLoadingImage = "../images/loading.gif"; 70 var fileBottomNavCloseImage = "../images/closelabel.gif"; 71 72 var iframeWidth = 400; 73 var iframeHeight = 450; 74 75 var resizeSpeed = 10; // controls the speed of the image resizing (1=slowest and 10=fastest) 76 77 var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable 78 79 // ----------------------------------------------------------------------------------- 80 81 // 82 // Global Variables 83 // 84 var imageArray = new Array; 85 var activeImage; 86 87 if(resizeSpeed > 10){ resizeSpeed = 10;} 88 if(resizeSpeed < 1){ resizeSpeed = 1;} 89 resizeDuration = (11 - resizeSpeed) * 0.15; 90 91 // ----------------------------------------------------------------------------------- 92 93 // 94 // Additional methods for Element added by SU, Couloir 95 // - further additions by Lokesh Dhakar (huddletogether.com) 96 // 97 Object.extend(Element, { 98 getWidth: function(element) { 99 element = $(element); 100 return element.offsetWidth; 101 }, 102 setWidth: function(element,w) { 103 element = $(element); 104 element.style.width = w +"px"; 105 }, 106 setHeight: function(element,h) { 107 element = $(element); 108 element.style.height = h +"px"; 109 }, 110 setTop: function(element,t) { 111 element = $(element); 112 element.style.top = t +"px"; 113 }, 114 setSrc: function(element,src) { 115 element = $(element); 116 element.src = src; 117 }, 118 setHref: function(element,href) { 119 element = $(element); 120 element.href = href; 121 }, 122 setInnerHTML: function(element,content) { 123 element = $(element); 124 element.innerHTML = content; 125 } 126 }); 127 128 // ----------------------------------------------------------------------------------- 129 130 // 131 // Extending built-in Array object 132 // - array.removeDuplicates() 133 // - array.empty() 134 // 135 Array.prototype.removeDuplicates = function () { 136 for(i = 1; i < this.length; i++){ 137 if(this[i][0] == this[i-1][0]){ 138 this.splice(i,1); 139 } 140 } 141 } 142 143 // ----------------------------------------------------------------------------------- 144 145 Array.prototype.empty = function () { 146 for(i = 0; i <= this.length; i++){ 147 this.shift(); 148 } 149 } 150 151 // ----------------------------------------------------------------------------------- 152 153 // 154 // Lightbox Class Declaration 155 // - initialize() 156 // - start() 157 // - changeImage() 158 // - resizeImageContainer() 159 // - showImage() 160 // - updateDetails() 161 // - updateNav() 162 // - enableKeyboardNav() 163 // - disableKeyboardNav() 164 // - keyboardNavAction() 165 // - preloadNeighborImages() 166 // - end() 167 // 168 // Structuring of code inspired by Scott Upton (http://www.uptonic.com/) 169 // 170 var Lightbox = Class.create(); 171 172 Lightbox.prototype = { 173 174 // initialize() 175 // Constructor runs on completion of the DOM loading. Loops through anchor tags looking for 176 // 'lightbox' references and applies onclick events to appropriate links. The 2nd section of 177 // the function inserts html at the bottom of the page which is used to display the shadow 178 // overlay and the image container. 179 // 180 initialize: function() { 181 if (!document.getElementsByTagName){ return; } 182 var anchors = document.getElementsByTagName('a'); 183 184 // loop through all anchor tags 185 for (var i=0; i<anchors.length; i++){ 186 var anchor = anchors[i]; 187 188 var relAttribute = String(anchor.getAttribute('rel')); 189 190 // use the string.match() method to catch 'lightbox' references in the rel attribute 191 if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){ 192 anchor.onclick = function () {myLightbox.start(this); return false;} 193 } 194 } 195 196 // The rest of this code inserts html at the bottom of the page that looks similar to this: 197 // 198 // <div id="overlay"></div> 199 // <div id="lightbox"> 200 // <div id="outerImageContainer"> 201 // <div id="imageContainer"> 202 // <img id="lightboxImage"> 203 // <div style="" id="hoverNav"> 204 // <a href="#" id="prevLink"></a> 205 // <a href="#" id="nextLink"></a> 206 // </div> 207 // <div id="loading"> 208 // <a href="#" id="loadingLink"> 209 // <img src="images/loading.gif"> 210 // </a> 211 // </div> 212 // </div> 213 // </div> 214 // <div id="imageDataContainer"> 215 // <div id="imageData"> 216 // <div id="imageDetails"> 217 // <span id="caption"></span> 218 // <span id="numberDisplay"></span> 219 // </div> 220 // <div id="bottomNav"> 221 // <a href="#" id="bottomNavClose"> 222 // <img src="images/close.gif"> 223 // </a> 224 // </div> 225 // </div> 226 // </div> 227 // </div> 228 229 230 var objBody = document.getElementsByTagName("body").item(0); 231 232 var objOverlay = document.createElement("div"); 233 objOverlay.setAttribute('id','overlay'); 234 objOverlay.style.display = 'none'; 235 //objOverlay.onclick = function() { myLightbox.end(); return false; } 236 objBody.appendChild(objOverlay); 237 238 var objLightbox = document.createElement("div"); 239 objLightbox.setAttribute('id','lightbox'); 240 objLightbox.style.display = 'none'; 241 objBody.appendChild(objLightbox); 242 243 var objOuterImageContainer = document.createElement("div"); 244 objOuterImageContainer.setAttribute('id','outerImageContainer'); 245 objLightbox.appendChild(objOuterImageContainer); 246 247 var objImageContainer = document.createElement("div"); 248 objImageContainer.setAttribute('id','imageContainer'); 249 objOuterImageContainer.appendChild(objImageContainer); 250 251 var objLightboxIframe = document.createElement("iframe"); 252 objLightboxIframe.setAttribute('id','lightboxIframe'); 253 objLightboxIframe.style.width = iframeWidth + 'px'; 254 objLightboxIframe.style.height = iframeHeight + 'px'; 255 objLightboxIframe.style.border = 'none'; 256 objImageContainer.appendChild(objLightboxIframe); 257 258 var objLightboxImage = document.createElement("img"); 259 objLightboxImage.setAttribute('id','lightboxImage'); 260 objImageContainer.appendChild(objLightboxImage); 261 262 var objHoverNav = document.createElement("div"); 263 objHoverNav.setAttribute('id','hoverNav'); 264 objImageContainer.appendChild(objHoverNav); 265 266 var objPrevLink = document.createElement("a"); 267 objPrevLink.setAttribute('id','prevLink'); 268 objPrevLink.setAttribute('href','#'); 269 objHoverNav.appendChild(objPrevLink); 270 271 var objNextLink = document.createElement("a"); 272 objNextLink.setAttribute('id','nextLink'); 273 objNextLink.setAttribute('href','#'); 274 objHoverNav.appendChild(objNextLink); 275 276 var objLoading = document.createElement("div"); 277 objLoading.setAttribute('id','loading'); 278 objImageContainer.appendChild(objLoading); 279 280 var objLoadingLink = document.createElement("a"); 281 objLoadingLink.setAttribute('id','loadingLink'); 282 objLoadingLink.setAttribute('href','#'); 283 objLoadingLink.onclick = function() { myLightbox.end(); return false; } 284 objLoading.appendChild(objLoadingLink); 285 286 var objLoadingImage = document.createElement("img"); 287 objLoadingImage.setAttribute('src', fileLoadingImage); 288 objLoadingLink.appendChild(objLoadingImage); 289 290 var objImageDataContainer = document.createElement("div"); 291 objImageDataContainer.setAttribute('id','imageDataContainer'); 292 objImageDataContainer.className = 'clearfix'; 293 objLightbox.appendChild(objImageDataContainer); 294 295 var objImageData = document.createElement("div"); 296 objImageData.setAttribute('id','imageData'); 297 objImageDataContainer.appendChild(objImageData); 298 299 var objImageDetails = document.createElement("div"); 300 objImageDetails.setAttribute('id','imageDetails'); 301 objImageData.appendChild(objImageDetails); 302 303 var objCaption = document.createElement("span"); 304 objCaption.setAttribute('id','caption'); 305 objImageDetails.appendChild(objCaption); 306 307 var objNumberDisplay = document.createElement("span"); 308 objNumberDisplay.setAttribute('id','numberDisplay'); 309 objImageDetails.appendChild(objNumberDisplay); 310 311 var objBottomNav = document.createElement("div"); 312 objBottomNav.setAttribute('id','bottomNav'); 313 objImageData.appendChild(objBottomNav); 314 315 var objBottomNavCloseLink = document.createElement("a"); 316 objBottomNavCloseLink.setAttribute('id','bottomNavClose'); 317 objBottomNavCloseLink.setAttribute('href','#'); 318 objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; } 319 objBottomNav.appendChild(objBottomNavCloseLink); 320 321 var objBottomNavCloseImage = document.createElement("img"); 322 objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage); 323 objBottomNavCloseLink.appendChild(objBottomNavCloseImage); 324 }, 325 326 // 327 // start() 328 // Display overlay and lightbox. If image is part of a set, add siblings to imageArray. 329 // 330 start: function(imageLink) { 331 332 hideSelectBoxes(); 333 334 // stretch overlay to fill page and fade in 335 var arrayPageSize = getPageSize(); 336 Element.setHeight('overlay', arrayPageSize[1]); 337 new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 }); 338 339 imageArray = []; 340 imageNum = 0; 341 342 if (!document.getElementsByTagName){ return; } 343 var anchors = document.getElementsByTagName('a'); 344 345 var rel = imageLink.getAttribute('rel'); 346 347 // if image is NOT part of a set.. 348 if(!rel.match(/\[/)){ 349 // add single image to imageArray 350 imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title'))); 351 if(rel.match(/\|/)) iframeHeight = parseInt(rel.split(/\|/)[1]); 352 } else { 353 // if image is part of a set.. 354 355 // loop through anchors, find other images in set, and add them to imageArray 356 for (var i=0; i<anchors.length; i++){ 357 var anchor = anchors[i]; 358 if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){ 359 imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title'))); 360 } 361 } 362 imageArray.removeDuplicates(); 363 while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;} 364 } 365 366 // calculate top offset for the lightbox and display 367 var arrayPageSize = getPageSize(); 368 var arrayPageScroll = getPageScroll(); 369 var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 15); 370 371 Element.setTop('lightbox', lightboxTop); 372 Element.show('lightbox'); 373 374 this.changeImage(imageNum); 375 }, 376 377 // 378 // changeImage() 379 // Hide most elements and preload image in preparation for resizing image container. 380 // 381 changeImage: function(imageNum) { 382 383 activeImage = imageNum; // update global var 384 385 // hide elements during transition 386 Element.show('loading'); 387 Element.hide('lightboxImage'); 388 Element.hide('lightboxIframe'); 389 Element.hide('hoverNav'); 390 Element.hide('prevLink'); 391 Element.hide('nextLink'); 392 Element.hide('imageDataContainer'); 393 Element.hide('numberDisplay'); 394 395 if(imageArray[activeImage][0].match(/\.jpg$/)) { 396 397 this.content_is_image = true; 398 399 imgPreloader = new Image(); 400 401 // once image is preloaded, resize image container 402 imgPreloader.onload=function(){ 403 Element.setSrc('lightboxImage', imageArray[activeImage][0]); 404 myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height); 405 } 406 imgPreloader.src = imageArray[activeImage][0]; 407 408 } else { 409 this.content_is_image = false; 410 Element.setSrc('lightboxIframe', imageArray[activeImage][0]); 411 myLightbox.resizeImageContainer(iframeWidth, iframeHeight); 412 } 413 }, 414 415 // 416 // resizeImageContainer() 417 // 418 resizeImageContainer: function( imgWidth, imgHeight) { 419 420 $('lightboxIframe').style.height = iframeHeight + 'px'; 421 422 // get current height and width 423 this.wCur = Element.getWidth('outerImageContainer'); 424 this.hCur = Element.getHeight('outerImageContainer'); 425 426 // scalars based on change from old to new 427 this.xScale = ((imgWidth + (borderSize * 2)) / this.wCur) * 100; 428 this.yScale = ((imgHeight + (borderSize * 2)) / this.hCur) * 100; 429 430 // calculate size difference between new and old image, and resize if necessary 431 wDiff = (this.wCur - borderSize * 2) - imgWidth; 432 hDiff = (this.hCur - borderSize * 2) - imgHeight; 433 434 if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); } 435 if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); } 436 437 // if new and old image are same size and no scaling transition is necessary, 438 // do a quick pause to prevent image flicker. 439 if((hDiff == 0) && (wDiff == 0)){ 440 if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);} 441 } 442 443 Element.setHeight('prevLink', imgHeight); 444 Element.setHeight('nextLink', imgHeight); 445 Element.setWidth( 'imageDataContainer', imgWidth + (borderSize * 2)); 446 447 this.showImage(); 448 }, 449 450 // 451 // showImage() 452 // Display image and begin preloading neighbors. 453 // 454 showImage: function(){ 455 Element.hide('loading'); 456 new Effect.Appear(this.content_is_image ? 'lightboxImage' : 'lightboxIframe', { duration: 0.5, queue: 'end', afterFinish: function(){ myLightbox.updateDetails(); } }); 457 this.preloadNeighborImages(); 458 }, 459 460 // 461 // updateDetails() 462 // Display caption, image number, and bottom nav. 463 // 464 updateDetails: function() { 465 466 Element.show('caption'); 467 Element.setInnerHTML( 'caption', imageArray[activeImage][1]); 468 469 // if image is part of set display 'Image x of x' 470 if(imageArray.length > 1){ 471 Element.show('numberDisplay'); 472 Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length); 473 } 474 475 new Effect.Parallel( 476 [ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration + 0.25, from: 0.0, to: 1.0 }), 477 new Effect.Appear('imageDataContainer', { sync: true, duration: 1.0 }) ], 478 { duration: 0.65 } 479 ); 480 }, 481 482 // 483 // updateNav() 484 // Display appropriate previous and next hover navigation. 485 // 486 updateNav: function() { 487 488 Element.show('hoverNav'); 489 490 // if not first image in set, display prev image button 491 if(activeImage != 0){ 492 Element.show('prevLink'); 493 document.getElementById('prevLink').onclick = function() { 494 myLightbox.changeImage(activeImage - 1); return false; 495 } 496 } 497 498 // if not last image in set, display next image button 499 if(activeImage != (imageArray.length - 1)){ 500 Element.show('nextLink'); 501 document.getElementById('nextLink').onclick = function() { 502 myLightbox.changeImage(activeImage + 1); return false; 503 } 504 } 505 506 this.enableKeyboardNav(); 507 }, 508 509 // 510 // enableKeyboardNav() 511 // 512 enableKeyboardNav: function() { 513 document.onkeydown = this.keyboardAction; 514 }, 515 516 // 517 /