1//v1.1 06/08/2009 Modifications pour compatibilit� Chrome et Safari (bourrin) 2//v1.0 29/07/2009 3 4//***********************************************************************************************************************************/ 5// LyteBox v3.22 6// 7// Author: Markus F. Hay 8// Website: http://www.dolem.com/lytebox 9// Date: October 2, 2007 10// License: Creative Commons Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/) 11// Browsers: Tested successfully on WinXP with the following browsers (using no DOCTYPE and Strict/Transitional/Loose DOCTYPES): 12// * Firefox: 2.0.0.7, 1.5.0.12 13// * Internet Explorer: 7.0, 6.0 SP2, 5.5 SP2 14// * Opera: 9.23 15// 16// Releases: For up-to-date and complete release information, visit http://www.dolem.com/forum/showthread.php?tid=62 17// * v3.22 (10/02/07) 18// * v3.21 (09/30/07) 19// * v3.20 (07/12/07) 20// * v3.10 (05/28/07) 21// * v3.00 (05/15/07) 22// * v2.02 (11/13/06) 23// 24// Credit: LyteBox was originally derived from the Lightbox class (v2.02) that was written by Lokesh Dhakar. For more 25// information please visit http://huddletogether.com/projects/lightbox2/ 26//***********************************************************************************************************************************/ 27Array.prototype.removeDuplicates = function () { for (var i = 1; i < this.length; i++) { if (this[i][0] == this[i-1][0]) { this.splice(i,1); } } } 28Array.prototype.empty = function () { for (var i = 0; i <= this.length; i++) { this.shift(); } } 29String.prototype.trim = function () { return this.replace(/^\s+|\s+$/g, ''); } 30 31function LyteBox() { 32 /*** Start Global Configuration ***/ 33 this.theme = 'grey'; // themes: grey (default), red, green, blue, gold 34 this.hideFlash = true; // controls whether or not Flash objects should be hidden 35 this.outerBorder = true; // controls whether to show the outer grey (or theme) border 36 this.resizeSpeed = 10; // controls the speed of the image resizing (1=slowest and 10=fastest) 37 this.maxOpacity = 80; // higher opacity = darker overlay, lower opacity = lighter overlay 38 this.navType = 2; // 1 = "Prev/Next" buttons on top left and left (default), 2 = "<< prev | next >>" links next to image number 39 this.autoResize = true; // controls whether or not images should be resized if larger than the browser window dimensions 40 this.doAnimations = true; // controls whether or not "animate" Lytebox, i.e. resize transition between images, fade in/out effects, etc. 41 42 this.borderSize = 12; // if you adjust the padding in the CSS, you will need to update this variable -- otherwise, leave this alone... 43 /*** End Global Configuration ***/ 44 45 /*** Configure Slideshow Options ***/ 46 this.slideInterval = 3000; // Change value (milliseconds) to increase/decrease the time between "slides" (10000 = 10 seconds) 47 this.showNavigation = true; // true to display Next/Prev buttons/text during slideshow, false to hide 48 this.showClose = true; // true to display the Close button, false to hide 49 this.showDetails = true; // true to display image details (caption, count), false to hide 50 this.showPlayPause = true; // true to display pause/play buttons next to close button, false to hide 51 this.autoEnd = true; // true to automatically close Lytebox after the last image is reached, false to keep open 52 this.pauseOnNextClick = false; // true to pause the slideshow when the "Next" button is clicked 53 this.pauseOnPrevClick = true; // true to pause the slideshow when the "Prev" button is clicked 54 /*** End Slideshow Configuration ***/ 55 56 if(this.resizeSpeed > 10) { this.resizeSpeed = 10; } 57 if(this.resizeSpeed < 1) { resizeSpeed = 1; } 58 this.resizeDuration = (11 - this.resizeSpeed) * 0.15; 59 this.resizeWTimerArray = new Array(); 60 this.resizeWTimerCount = 0; 61 this.resizeHTimerArray = new Array(); 62 this.resizeHTimerCount = 0; 63 this.showContentTimerArray = new Array(); 64 this.showContentTimerCount = 0; 65 this.overlayTimerArray = new Array(); 66 this.overlayTimerCount = 0; 67 this.imageTimerArray = new Array(); 68 this.imageTimerCount = 0; 69 this.timerIDArray = new Array(); 70 this.timerIDCount = 0; 71 this.slideshowIDArray = new Array(); 72 this.slideshowIDCount = 0; 73 this.imageArray = new Array(); 74 this.activeImage = null; 75 this.slideArray = new Array(); 76 this.activeSlide = null; 77 this.frameArray = new Array(); 78 this.activeFrame = null; 79 this.checkFrame(); 80 this.isSlideshow = false; 81 this.isLyteframe = false; 82 /*@cc_on 83 /*@if (@_jscript) 84 this.ie = (document.all && !window.opera) ? true : false; 85 /*@else @*/ 86 this.ie = false; 87 /*@end 88 @*/ 89 this.ie7 = (this.ie && window.XMLHttpRequest); 90 this.initialize(); 91} 92LyteBox.prototype.initialize = function() { 93 this.updateLyteboxItems(); 94 var objBody = this.doc.getElementsByTagName("body").item(0); 95 if (this.doc.getElementById('lbOverlay')) { 96 objBody.removeChild(this.doc.getElementById("lbOverlay")); 97 objBody.removeChild(this.doc.getElementById("lbMain")); 98 } 99 var objOverlay = this.doc.createElement("div"); 100 objOverlay.setAttribute('id','lbOverlay'); 101 objOverlay.setAttribute((this.ie ? 'className' : 'class'), this.theme); 102 if ((this.ie && !this.ie7) || (this.ie7 && this.doc.compatMode == 'BackCompat')) { 103 objOverlay.style.position = 'absolute'; 104 } 105 objOverlay.style.display = 'none'; 106 objBody.appendChild(objOverlay); 107 var objLytebox = this.doc.createElement("div"); 108 objLytebox.setAttribute('id','lbMain'); 109 objLytebox.style.display = 'none'; 110 objBody.appendChild(objLytebox); 111 var objOuterContainer = this.doc.createElement("div"); 112 objOuterContainer.setAttribute('id','lbOuterContainer'); 113 objOuterContainer.setAttribute((this.ie ? 'className' : 'class'), this.theme); 114 objLytebox.appendChild(objOuterContainer); 115 var objIframeContainer = this.doc.createElement("div"); 116 objIframeContainer.setAttribute('id','lbIframeContainer'); 117 objIframeContainer.style.display = 'none'; 118 objOuterContainer.appendChild(objIframeContainer); 119 var objIframe = this.doc.createElement("iframe"); 120 objIframe.setAttribute('id','lbIframe'); 121 objIframe.setAttribute('name','lbIframe'); 122 objIframe.style.display = 'none'; 123 objIframeContainer.appendChild(objIframe); 124 var objImageContainer = this.doc.createElement("div"); 125 objImageContainer.setAttribute('id','lbImageContainer'); 126 objOuterContainer.appendChild(objImageContainer); 127 var objLyteboxImage = this.doc.createElement("img"); 128 objLyteboxImage.setAttribute('id','lbImage'); 129 objImageContainer.appendChild(objLyteboxImage); 130 var objLoading = this.doc.createElement("div"); 131 objLoading.setAttribute('id','lbLoading'); 132 objOuterContainer.appendChild(objLoading); 133 var objDetailsContainer = this.doc.createElement("div"); 134 objDetailsContainer.setAttribute('id','lbDetailsContainer'); 135 objDetailsContainer.setAttribute((this.ie ? 'className' : 'class'), this.theme); 136 objLytebox.appendChild(objDetailsContainer); 137 var objDetailsData =this.doc.createElement("div"); 138 objDetailsData.setAttribute('id','lbDetailsData'); 139 objDetailsData.setAttribute((this.ie ? 'className' : 'class'), this.theme); 140 objDetailsContainer.appendChild(objDetailsData); 141 var objDetails = this.doc.createElement("div"); 142 objDetails.setAttribute('id','lbDetails'); 143 objDetailsData.appendChild(objDetails); 144 var objCaption = this.doc.createElement("span"); 145 objCaption.setAttribute('id','lbCaption'); 146 objDetails.appendChild(objCaption); 147 148 var objDL = this.doc.createElement("span"); 149 objDL.setAttribute('id','lbDL'); 150 objDL.setAttribute('style','display:block;'); 151 objDetails.appendChild(objDL); 152 153 var objHoverNav = this.doc.createElement("div"); 154 objHoverNav.setAttribute('id','lbHoverNav'); 155 objImageContainer.appendChild(objHoverNav); 156 var objBottomNav = this.doc.createElement("div"); 157 objBottomNav.setAttribute('id','lbBottomNav'); 158 objDetailsData.appendChild(objBottomNav); 159 var objPrev = this.doc.createElement("a"); 160 objPrev.setAttribute('id','lbPrev'); 161 objPrev.setAttribute((this.ie ? 'className' : 'class'), this.theme); 162 objPrev.setAttribute('href','#'); 163 objHoverNav.appendChild(objPrev); 164 var objNext = this.doc.createElement("a"); 165 objNext.setAttribute('id','lbNext'); 166 objNext.setAttribute((this.ie ? 'className' : 'class'), this.theme); 167 objNext.setAttribute('href','#'); 168 objHoverNav.appendChild(objNext); 169 var objNumberDisplay = this.doc.createElement("span"); 170 objNumberDisplay.setAttribute('id','lbNumberDisplay'); 171 objDetails.appendChild(objNumberDisplay); 172 var objNavDisplay = this.doc.createElement("span"); 173 objNavDisplay.setAttribute('id','lbNavDisplay'); 174 objNavDisplay.style.display = 'none'; 175 objDetails.appendChild(objNavDisplay); 176 var objClose = this.doc.createElement("a"); 177 objClose.setAttribute('id','lbClose'); 178 objClose.setAttribute((this.ie ? 'className' : 'class'), this.theme); 179 objClose.setAttribute('href','#'); 180 objBottomNav.appendChild(objClose); 181 var objPause = this.doc.createElement("a"); 182 objPause.setAttribute('id','lbPause'); 183 objPause.setAttribute((this.ie ? 'className' : 'class'), this.theme); 184 objPause.setAttribute('href','#'); 185 objPause.style.display = 'none'; 186 objBottomNav.appendChild(objPause); 187 var objPlay = this.doc.createElement("a"); 188 objPlay.setAttribute('id','lbPlay'); 189 objPlay.setAttribute((this.ie ? 'className' : 'class'), this.theme); 190 objPlay.setAttribute('href','#'); 191 objPlay.style.display = 'none'; 192 objBottomNav.appendChild(objPlay); 193}; 194LyteBox.prototype.updateLyteboxItems = function() { 195 var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a'); 196 for (var i = 0; i < anchors.length; i++) { 197 var anchor = anchors[i]; 198 var relAttribute = String(anchor.getAttribute('rel')); 199 if (anchor.getAttribute('href')) { 200 if (relAttribute.toLowerCase().match('lytebox')) { 201 anchor.onclick = function () { myLytebox.start(this, false, false); return false; } 202 } else if (relAttribute.toLowerCase().match('lyteshow')) { 203 anchor.onclick = function () { myLytebox.start(this, true, false); return false; } 204 } else if (relAttribute.toLowerCase().match('lyteframe')) { 205 anchor.onclick = function () { myLytebox.start(this, false, true); return false; } 206 } 207 } 208 } 209}; 210LyteBox.prototype.start = function(imageLink, doSlide, doFrame) { 211 if (this.ie && !this.ie7) { this.toggleSelects('hide'); } 212 if (this.hideFlash) { this.toggleFlash('hide'); } 213 this.isLyteframe = (doFrame ? true : false); 214 var pageSize = this.getPageSize(); 215 var objOverlay = this.doc.getElementById('lbOverlay'); 216 var objBody = this.doc.getElementsByTagName("body").item(0); 217 objOverlay.style.height = pageSize[1] + "px"; 218 objOverlay.style.display = ''; 219 this.appear('lbOverlay', (this.doAnimations ? 0 : this.maxOpacity)); 220 var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a'); 221 if (this.isLyteframe) { 222 this.frameArray = []; 223 this.frameNum = 0; 224 if ((imageLink.getAttribute('rel') == 'lyteframe')) { 225 var rev = imageLink.getAttribute('rev'); 226 this.frameArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title'), (rev == null || rev == '' ? 'width: 400px; height: 400px; scrolling: auto;' : rev))); 227 } else { 228 if (imageLink.getAttribute('rel').indexOf('lyteframe') != -1) { 229 for (var i = 0; i < anchors.length; i++) { 230 var anchor = anchors[i]; 231 if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) { 232 var rev = anchor.getAttribute('rev'); 233 this.frameArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title'), (rev == null || rev == '' ? 'width: 400px; height: 400px; scrolling: auto;' : rev))); 234 } 235 } 236 this.frameArray.removeDuplicates(); 237 while(this.frameArray[this.frameNum][0] != imageLink.getAttribute('href')) { this.frameNum++; } 238 } 239 } 240 } else { 241 this.imageArray = []; 242 this.imageNum = 0; 243 this.slideArray = []; 244 this.slideNum = 0; 245 if ((imageLink.getAttribute('rel') == 'lytebox')) { 246 this.imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title'))); 247 } else { 248 if (imageLink.getAttribute('rel').indexOf('lytebox') != -1) { 249 for (var i = 0; i < anchors.length; i++) { 250 var anchor = anchors[i]; 251 if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) { 252 this.imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title'))); 253 } 254 } 255 this.imageArray.removeDuplicates(); 256 while(this.imageArray[this.imageNum][0] != imageLink.getAttribute('href')) { this.imageNum++; } 257 } 258 if (imageLink.getAttribute('rel').indexOf('lyteshow') != -1) { 259 for (var i = 0; i < anchors.length; i++) { 260 var anchor = anchors[i]; 261 if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) { 262 this.slideArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title'))); 263 } 264 } 265 this.slideArray.removeDuplicates(); 266 while(this.slideArray[this.slideNum][0] != imageLink.getAttribute('href')) { this.slideNum++; } 267 } 268 } 269 } 270 var object = this.doc.getElementById('lbMain'); 271 object.style.top = (this.getPageScroll() + (pageSize[3] / 15)) + "px"; 272 object.style.display = ''; 273 if (!this.outerBorder) { 274 this.doc.getElementById('lbOuterContainer').style.border = 'none'; 275 this.doc.getElementById('lbDetailsContainer').style.border = 'none'; 276 } else { 277 this.doc.getElementById('lbOuterContainer').style.borderBottom = ''; 278 this.doc.getElementById('lbOuterContainer').setAttribute((this.ie ? 'className' : 'class'), this.theme); 279 } 280 this.doc.getElementById('lbOverlay').onclick = function() { myLytebox.end(); return false; } 281 this.doc.getElementById('lbMain').onclick = function(e) { 282 var e = e; 283 if (!e) { 284 if (window.parent.frames[window.name] && (parent.document.getElementsByTagName('frameset').length <= 0)) { 285 e = window.parent.window.event; 286 } else { 287 e = window.event; 288 } 289 } 290 var id = (e.target ? e.target.id : e.srcElement.id); 291 if (id == 'lbMain') { myLytebox.end(); return false; } 292 } 293 if (this && this.doc && this.doc.getElementById('lbPause')) this.doc.getElementById('lbPause').onclick = function() { myLytebox.togglePlayPause("lbPause", "lbPlay"); return false; } 294 if (this && this.doc && this.doc.getElementById('lbPlay')) this.doc.getElementById('lbPlay').onclick = function() { myLytebox.togglePlayPause("lbPlay", "lbPause"); return false; } 295 if (this && this.doc && this.doc.getElementById('lbClose')) this.doc.getElementById('lbClose').onclick = function() { myLytebox.end(); return false; } 296 this.isSlideshow = doSlide; 297 this.isPaused = (this.slideNum != 0 ? true : false); 298 if (this.isSlideshow && this.showPlayPause && this.isPaused) { 299 this.doc.getElementById('lbPlay').style.display = ''; 300 this.doc.getElementById('lbPause').style.display = 'none'; 301 } 302 if (this.isLyteframe) { 303 this.changeContent(this.frameNum); 304 } else { 305 if (this.isSlideshow) { 306 this.changeContent(this.slideNum); 307 } else { 308 this.changeContent(this.imageNum); 309 } 310 } 311}; 312LyteBox.prototype.changeContent = function(imageNum) { 313 if (this.isSlideshow) { 314 for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); } 315 } 316 this.activeImage = this.activeSlide = this.activeFrame = imageNum; 317 if (!this.outerBorder) { 318 this.doc.getElementById('lbOuterContainer').style.border = 'none'; 319 this.doc.getElementById('lbDetailsContainer').style.border = 'none'; 320 } else { 321 this.doc.getElementById('lbOuterContainer').style.borderBottom = ''; 322 this.doc.getElementById('lbOuterContainer').setAttribute((this.ie ? 'className' : 'class'), this.theme); 323 } 324 this.doc.getElementById('lbLoading').style.display = ''; 325 this.doc.getElementById('lbImage').style.display = 'none'; 326 this.doc.getElementById('lbIframe').style.display = 'none'; 327 if (this && this.doc && this.doc.getElementById('lbPrev')) this.doc.getElementById('lbPrev').style.display = 'none'; 328 if (this && this.doc && this.doc.getElementById('lbNext')) this.doc.getElementById('lbNext').style.display = 'none'; 329 this.doc.getElementById('lbIframeContainer').style.display = 'none'; 330 this.doc.getElementById('lbDetailsContainer').style.display = 'none'; 331 this.doc.getElementById('lbNumberDisplay').style.display = 'none'; 332 333 this.doc.getElementById('lbDL').innerHTML=''; 334 335 if (this.navType == 2 || this.isLyteframe) { 336 object = this.doc.getElementById('lbNavDisplay'); 337 //object.innerHTML = ' <span id="lbPrev2_Off" style="display: none;" class="' + this.theme + '">« prev</span><a href="#" id="lbPrev2" class="' + this.theme + '" style="display: none;">« prev</a> <b id="lbSpacer" class="' + this.theme + '">||</b> <span id="lbNext2_Off" style="display: none;" class="' + this.theme + '">next »</span><a href="#" id="lbNext2" class="' + this.theme + '" style="display: none;">next »</a>'; 338 object.innerHTML = ' <span id="lbPrev2_Off" style="display: none;" class="' + this.theme + '">« </span><a href="#" id="lbPrev2" class="' + this.theme + '" style="display: none;">« </a> <b id="lbSpacer" class="' + this.theme + '">|</b> <span id="lbNext2_Off" style="display: none;" class="' + this.theme + '"> »</span><a href="#" id="lbNext2" class="' + this.theme + '" style="display: none;"> »</a>'; 339 object.style.display = 'none'; 340 } 341 if (this.isLyteframe) { 342 var iframe = myLytebox.doc.getElementById('lbIframe'); 343 var styles = this.frameArray[this.activeFrame][2]; 344 var aStyles = styles.split(';'); 345 for (var i = 0; i < aStyles.length; i++) { 346 if (aStyles[i].indexOf('width:') >= 0) { 347 var w = aStyles[i].replace('width:', ''); 348 if (w.trim()=='auto') { 349 iframe.width=window.innerWidth*0.9; 350 } 351 else { 352 iframe.width = w.trim(); 353 } 354 } else if (aStyles[i].indexOf('height:') >= 0) { 355 var h = aStyles[i].replace('height:', ''); 356 if (h.trim()=='auto') { 357 iframe.height=window.innerHeight*0.75; 358 } 359 else { 360 iframe.height = h.trim(); 361 } 362 } else if (aStyles[i].indexOf('scrolling:') >= 0) { 363 var s = aStyles[i].replace('scrolling:', ''); 364 iframe.scrolling = s.trim(); 365 } else if (aStyles[i].indexOf('border:') >= 0) { 366 // Not implemented yet, as there are cross-platform issues with setting the border (from a GUI standpoint) 367 //var b = aStyles[i].replace('border:', ''); 368 //iframe.style.border = b.trim(); 369 } 370 iframe.style.border="none"; 371 } 372 this.resizeContainer(parseInt(iframe.width), parseInt(iframe.height)); 373 } else { 374 imgPreloader = new Image(); 375 imgPreloader.onload = function() { 376 var imageWidth = imgPreloader.width; 377 var imageHeight = imgPreloader.height; 378 if (myLytebox.autoResize) { 379 var pagesize = myLytebox.getPageSize(); 380 var x = pagesize[2] - 150; 381 var y = pagesize[3] - 150; 382 if (imageWidth > x) { 383 imageHeight = Math.round(imageHeight * (x / imageWidth)); 384 imageWidth = x; 385 if (imageHeight > y) { 386 imageWidth = Math.round(imageWidth * (y / imageHeight)); 387 imageHeight = y; 388 } 389 } else if (imageHeight > y) { 390 imageWidth = Math.round(imageWidth * (y / imageHeight)); 391 imageHeight = y; 392 if (imageWidth > x) { 393 imageHeight = Math.round(imageHeight * (x / imageWidth)); 394 imageWidth = x; 395 } 396 } 397 } 398 var lbImage = myLytebox.doc.getElementById('lbImage') 399 lbImage.src = (myLytebox.isSlideshow ? myLytebox.slideArray[myLytebox.activeSlide][0] : myLytebox.imageArray[myLytebox.activeImage][0]); 400 lbImage.width = imageWidth; 401 lbImage.height = imageHeight; 402 myLytebox.resizeContainer(imageWidth, imageHeight); 403 imgPreloader.onload = function() {}; 404 } 405 imgPreloader.src = (this.isSlideshow ? this.slideArray[this.activeSlide][0] : this.imageArray[this.activeImage][0]); 406 } 407}; 408LyteBox.prototype.resizeContainer = function(imgWidth, imgHeight) { 409 this.wCur = this.doc.getElementById('lbOuterContainer').offsetWidth; 410 this.hCur = this.doc.getElementById('lbOuterContainer').offsetHeight; 411 this.xScale = ((imgWidth + (this.borderSize * 2)) / this.wCur) * 100; 412 this.yScale = ((imgHeight + (this.borderSize * 2)) / this.hCur) * 100; 413 var wDiff = (this.wCur - this.borderSize * 2) - imgWidth; 414 var hDiff = (this.hCur - this.borderSize * 2) - imgHeight; 415 if (!(hDiff == 0)) { 416 this.hDone = false; 417 this.resizeH('lbOuterContainer', this.hCur, imgHeight + this.borderSize*2, this.getPixelRate(this.hCur, imgHeight)); 418 } else { 419 this.hDone = true; 420 } 421 if (!(wDiff == 0)) { 422 this.wDone = false; 423 this.resizeW('lbOuterContainer', this.wCur, imgWidth + this.borderSize*2, this.getPixelRate(this.wCur, imgWidth)); 424 } else { 425 this.wDone = true; 426 } 427 if ((hDiff == 0) && (wDiff == 0)) { 428 if (this.ie){ this.pause(250); } else { this.pause(100); } 429 } 430 if (this && this.doc && this.doc.getElementById('lbPrev')) this.doc.getElementById('lbPrev').style.height = imgHeight + "px"; 431 if (this && this.doc && this.doc.getElementById('lbNext')) this.doc.getElementById('lbNext').style.height = imgHeight + "px"; 432 this.doc.getElementById('lbDetailsContainer').style.width = (imgWidth + (this.borderSize * 2) + (this.ie && this.doc.compatMode == "BackCompat" && this.outerBorder ? 2 : 0)) + "px"; 433 this.showContent(); 434}; 435LyteBox.prototype.showContent = function() { 436 if (this.wDone && this.hDone) { 437 for (var i = 0; i < this.showContentTimerCount; i++) { window.clearTimeout(this.showContentTimerArray[i]); } 438 if (this.outerBorder) { 439 this.doc.getElementById('lbOuterContainer').style.borderBottom = 'none'; 440 } 441 this.doc.getElementById('lbLoading').style.display = 'none'; 442 if (this.isLyteframe) { 443 this.doc.getElementById('lbIframe').style.display = ''; 444 this.appear('lbIframe', (this.doAnimations ? 0 : 100)); 445 } else { 446 this.doc.getElementById('lbImage').style.display = ''; 447 this.appear('lbImage', (this.doAnimations ? 0 : 100)); 448 this.preloadNeighborImages(); 449 } 450 if (this.isSlideshow) { 451 if(this.activeSlide == (this.slideArray.length - 1)) { 452 if (this.autoEnd) { 453 this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.end('slideshow')", this.slideInterval); 454 } 455 } else { 456 if (!this.isPaused) { 457 this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.changeContent("+(this.activeSlide+1)+")", this.slideInterval); 458 } 459 } 460 this.doc.getElementById('lbHoverNav').style.display = (this.showNavigation && this.navType == 1 ? '' : 'none'); 461 this.doc.getElementById('lbClose').style.display = (this.showClose ? '' : 'none'); 462 this.doc.getElementById('lbDetails').style.display = (this.showDetails ? '' : 'none'); 463 this.doc.getElementById('lbPause').style.display = (this.showPlayPause && !this.isPaused ? '' : 'none'); 464 this.doc.getElementById('lbPlay').style.display = (this.showPlayPause && !this.isPaused ? 'none' : ''); 465 this.doc.getElementById('lbNavDisplay').style.display = (this.showNavigation && this.navType == 2 ? '' : 'none'); 466 } else { 467 this.doc.getElementById('lbHoverNav').style.display = (this.navType == 1 && !this.isLyteframe ? '' : 'none'); 468 if ((this.navType == 2 && !this.isLyteframe && this.imageArray.length > 1) || (this.frameArray.length > 1 && this.isLyteframe)) { 469 this.doc.getElementById('lbNavDisplay').style.display = ''; 470 } else { 471 this.doc.getElementById('lbNavDisplay').style.display = 'none'; 472 } 473 if (this && this.doc && this.doc.getElementById('lbClose')) this.doc.getElementById('lbClose').style.display = ''; 474 if (this && this.doc && this.doc.getElementById('lbDetails')) this.doc.getElementById('lbDetails').style.display = ''; 475 if (this && this.doc && this.doc.getElementById('lbPause')) this.doc.getElementById('lbPause').style.display = 'none'; 476 if (this && this.doc && this.doc.getElementById('lbPlay')) this.doc.getElementById('lbPlay').style.display = 'none'; 477 } 478 this.doc.getElementById('lbImageContainer').style.display = (this.isLyteframe ? 'none' : ''); 479 this.doc.getElementById('lbIframeContainer').style.display = (this.isLyteframe ? '' : 'none'); 480 try { 481 this.doc.getElementById('lbIframe').src = this.frameArray[this.activeFrame][0]; 482 } catch(e) { } 483 } else { 484 this.showContentTimerArray[this.showContentTimerCount++] = setTimeout("myLytebox.showContent()", 200); 485 } 486}; 487LyteBox.prototype.updateDetails = function() { 488 var object = this.doc.getElementById('lbCaption'); 489 var sTitle = (this.isSlideshow ? this.slideArray[this.activeSlide][1] : (this.isLyteframe ? this.frameArray[this.activeFrame][1] : this.imageArray[this.activeImage][1])); 490 object.style.display = ''; 491 492 //if (this.isLyteframe) object.innerHTML = (sTitle == null ? '' : '<a href="'+sTitle+'" target="_new">'+sTitle+'</a>'); 493 if (this.isLyteframe) { 494 //object.innerHTML = (sTitle == null ? '' : ''+sTitle+'') + '<br /><a href="'+this.doc.getElementById('lbIframe').src+'" target="_blank">'+this.doc.getElementById('lbIframe').src+'</a>'; 495 object.innerHTML = (sTitle == null ? '' : ''+sTitle+''); 496 } 497 else object.innerHTML = (sTitle == null ? '' : sTitle); 498 499 this.updateNav(); 500 this.doc.getElementById('lbDetailsContainer').style.display = ''; 501 object = this.doc.getElementById('lbNumberDisplay'); 502 if (this.isSlideshow && this.slideArray.length > 1) { 503 object.style.display = ''; 504 //object.innerHTML = "Image " + eval(this.activeSlide + 1) + " of " + this.slideArray.length; 505 object.innerHTML = "" + eval(this.activeSlide + 1) + " / " + this.slideArray.length; 506 this.doc.getElementById('lbNavDisplay').style.display = (this.navType == 2 && this.showNavigation ? '' : 'none'); 507 } else if (this.imageArray.length > 1 && !this.isLyteframe) { 508 object.style.display = ''; 509 //object.innerHTML = "Image " + eval(this.activeImage + 1) + " of " + this.imageArray.length; 510 object.innerHTML = "" + eval(this.activeImage + 1) + " / " + this.imageArray.length; 511 this.doc.getElementById('lbNavDisplay').style.display = (this.navType == 2 ? '' : 'none'); 512 } else if (this.frameArray.length > 1 && this.isLyteframe) { 513 object.style.display = ''; 514 //object.innerHTML = "Page " + eval(this.activeFrame + 1) + " of " + this.frameArray.length; 515 object.innerHTML = "" + eval(this.activeFrame + 1) + " / " + this.frameArray.length; 516 this.doc.getElementById('lbNavDisplay').style.display = ''; 517 } else { 518 this.doc.getElementById('lbNavDisplay').style.display = 'none'; 519 } 520 this.appear('lbDetailsContainer', (this.doAnimations ? 0 : 100)); 521}; 522LyteBox.prototype.updateNav = function() { 523 if (this.isSlideshow) { 524 if (this.activeSlide != 0) { 525 var object = (this.navType == 2 ? this.doc.getElementById('lbPrev2') : this.doc.getElementById('lbPrev')); 526 object.style.display = ''; 527 object.onclick = function() { 528 if (myLytebox.pauseOnPrevClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); } 529 myLytebox.changeContent(myLytebox.activeSlide - 1); return false; 530 } 531 } else { 532 if (this.navType == 2) { this.doc.getElementById('lbPrev2_Off').style.display = ''; } 533 } 534 if (this.activeSlide != (this.slideArray.length - 1)) { 535 var object = (this.navType == 2 ? this.doc.getElementById('lbNext2') : this.doc.getElementById('lbNext')); 536 object.style.display = ''; 537 object.onclick = function() { 538 if (myLytebox.pauseOnNextClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); } 539 myLytebox.changeContent(myLytebox.activeSlide + 1); return false; 540 } 541 } else { 542 if (this.navType == 2) { this.doc.getElementById('lbNext2_Off').style.display = ''; } 543 } 544 } else if (this.isLyteframe) { 545 if(this.activeFrame != 0) { 546 var object = this.doc.getElementById('lbPrev2'); 547 object.style.display = ''; 548 object.onclick = function() { 549 myLytebox.changeContent(myLytebox.activeFrame - 1); return false; 550 } 551 } else { 552 this.doc.getElementById('lbPrev2_Off').style.display = ''; 553 } 554 if(this.activeFrame != (this.frameArray.length - 1)) { 555 var object = this.doc.getElementById('lbNext2'); 556 object.style.display = ''; 557 object.onclick = function() { 558 myLytebox.changeContent(myLytebox.activeFrame + 1); return false; 559 } 560 } else { 561 this.doc.getElementById('lbNext2_Off').style.display = ''; 562 } 563 } else { 564 if(this.activeImage != 0) { 565 var object = (this.navType == 2 ? this.doc.getElementById('lbPrev2') : this.doc.getElementById('lbPrev')); 566 object.style.display = ''; 567 object.onclick = function() { 568 myLytebox.changeContent(myLytebox.activeImage - 1); return false; 569 } 570 } else { 571 if (this.navType == 2) { this.doc.getElementById('lbPrev2_Off').style.display = ''; } 572 } 573 if(this.activeImage != (this.imageArray.length - 1)) { 574 var object = (this.navType == 2 ? this.doc.getElementById('lbNext2') : this.doc.getElementById('lbNext')); 575 object.style.display = ''; 576 object.onclick = function() { 577 myLytebox.changeContent(myLytebox.activeImage + 1); return false; 578 } 579 } else { 580 if (this.navType == 2) { this.doc.getElementById('lbNext2_Off').style.display = ''; } 581 } 582 } 583 this.enableKeyboardNav(); 584}; 585LyteBox.prototype.enableKeyboardNav = function() { document.onkeydown = this.keyboardAction; }; 586LyteBox.prototype.disableKeyboardNav = function() { document.onkeydown = ''; }; 587LyteBox.prototype.keyboardAction = function(e) { 588 var keycode = key = escape = null; 589 keycode = (e == null) ? event.keyCode : e.which; 590 key = String.fromCharCode(keycode).toLowerCase(); 591 escape = (e == null) ? 27 : e.DOM_VK_ESCAPE; 592 if ((key == 'x') || (key == 'c') || (keycode == escape)) { 593 myLytebox.end(); 594 } else if ((key == 'p') || (keycode == 37)) { 595 if (myLytebox.isSlideshow) { 596 if(myLytebox.activeSlide != 0) { 597 myLytebox.disableKeyboardNav(); 598 myLytebox.changeContent(myLytebox.activeSlide - 1); 599 } 600 } else if (myLytebox.isLyteframe) { 601 if(myLytebox.activeFrame != 0) { 602 myLytebox.disableKeyboardNav(); 603 myLytebox.changeContent(myLytebox.activeFrame - 1); 604 } 605 } else { 606 if(myLytebox.activeImage != 0) { 607 myLytebox.disableKeyboardNav(); 608 myLytebox.changeContent(myLytebox.activeImage - 1); 609 } 610 } 611 } else if ((key == 'n') || (key == 's') || (keycode == 39)) { 612 if (myLytebox.isSlideshow) { 613 if(myLytebox.activeSlide != (myLytebox.slideArray.length - 1)) { 614 myLytebox.disableKeyboardNav(); 615 myLytebox.changeContent(myLytebox.activeSlide + 1); 616 } 617 } else if (myLytebox.isLyteframe) { 618 if(myLytebox.activeFrame != (myLytebox.frameArray.length - 1)) { 619 myLytebox.disableKeyboardNav(); 620 myLytebox.changeContent(myLytebox.activeFrame + 1); 621 } 622 } else { 623 if(myLytebox.activeImage != (myLytebox.imageArray.length - 1)) { 624 myLytebox.disableKeyboardNav(); 625 myLytebox.changeContent(myLytebox.activeImage + 1); 626 } 627 } 628 } 629}; 630LyteBox.prototype.preloadNeighborImages = function() { 631 if (this.isSlideshow) { 632 if ((this.slideArray.length - 1) > this.activeSlide) { 633 preloadNextImage = new Image(); 634 preloadNextImage.src = this.slideArray[this.activeSlide + 1][0]; 635 } 636 if(this.activeSlide > 0) { 637 preloadPrevImage = new Image(); 638 preloadPrevImage.src = this.slideArray[this.activeSlide - 1][0]; 639 } 640 } else { 641 if ((this.imageArray.length - 1) > this.activeImage) { 642 preloadNextImage = new Image(); 643 preloadNextImage.src = this.imageArray[this.activeImage + 1][0]; 644 } 645 if(this.activeImage > 0) { 646 preloadPrevImage = new Image(); 647 preloadPrevImage.src = this.imageArray[this.activeImage - 1][0]; 648 } 649 } 650}; 651LyteBox.prototype.togglePlayPause = function(hideID, showID) { 652 if (this.isSlideshow && hideID == "lbPause") { 653 for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); } 654 } 655 this.doc.getElementById(hideID).style.display = 'none'; 656 this.doc.getElementById(showID).style.display = ''; 657 if (hideID == "lbPlay") { 658 this.isPaused = false; 659 if (this.activeSlide == (this.slideArray.length - 1)) { 660 this.end(); 661 } else { 662 this.changeContent(this.activeSlide + 1); 663 } 664 } else { 665 this.isPaused = true; 666 } 667}; 668LyteBox.prototype.end = function(caller) { 669 var closeClick = (caller == 'slideshow' ? false : true); 670 if (this.isSlideshow && this.isPaused && !closeClick) { return; } 671 this.disableKeyboardNav(); 672 this.doc.getElementById('lbMain').style.display = 'none'; 673 this.fade('lbOverlay', (this.doAnimations ? this.maxOpacity : 0)); 674 this.toggleSelects('visible'); 675 if (this.hideFlash) { this.toggleFlash('visible'); } 676 if (this.isSlideshow) { 677 for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); } 678 } 679 if (this.isLyteframe) { 680 this.initialize(); 681 } 682}; 683LyteBox.prototype.checkFrame = function() { 684 if (window.parent.frames[window.name] && (parent.document.getElementsByTagName('frameset').length <= 0)) { 685 this.isFrame = true; 686 this.lytebox = "window.parent." + window.name + ".myLytebox"; 687 this.doc = parent.document; 688 } else { 689 this.isFrame = false; 690 this.lytebox = "myLytebox"; 691 this.doc = document; 692 } 693}; 694LyteBox.prototype.getPixelRate = function(cur, img) { 695 var diff = (img > cur) ? img - cur : cur - img; 696 if (diff >= 0 && diff <= 100) { return 10; } 697 if (diff > 100 && diff <= 200) { return 15; } 698 if (diff > 200 && diff <= 300) { return 20; } 699 if (diff > 300 && diff <= 400) { return 25; } 700 if (diff > 400 && diff <= 500) { return 30; } 701 if (diff > 500 && diff <= 600) { return 35; } 702 if (diff > 600 && diff <= 700) { return 40; } 703 if (diff > 700) { return 45; } 704}; 705LyteBox.prototype.appear = function(id, opacity) { 706 var object = this.doc.getElementById(id).style; 707 object.opacity = (opacity / 100); 708 object.MozOpacity = (opacity / 100); 709 object.KhtmlOpacity = (opacity / 100); 710 object.filter = "alpha(opacity=" + (opacity + 10) + ")"; 711 if (opacity == 100 && (id == 'lbImage' || id == 'lbIframe')) { 712 try { object.removeAttribute("filter"); } catch(e) {} /* Fix added for IE Alpha Opacity Filter bug. */ 713 this.updateDetails(); 714 } else if (opacity >= this.maxOpacity && id == 'lbOverlay') { 715 for (var i = 0; i < this.overlayTimerCount; i++) { window.clearTimeout(this.overlayTimerArray[i]); } 716 return; 717 } else if (opacity >= 100 && id == 'lbDetailsContainer') { 718 try { object.removeAttribute("filter"); } catch(e) {} /* Fix added for IE Alpha Opacity Filter bug. */ 719 for (var i = 0; i < this.imageTimerCount; i++) { window.clearTimeout(this.imageTimerArray[i]); } 720 this.doc.getElementById('lbOverlay').style.height = this.getPageSize()[1] + "px"; 721 } else { 722 if (id == 'lbOverlay') { 723 this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.appear('" + id + "', " + (opacity+20) + ")", 1); 724 } else { 725 this.imageTimerArray[this.imageTimerCount++] = setTimeout("myLytebox.appear('" + id + "', " + (opacity+10) + ")", 1); 726 } 727 } 728}; 729LyteBox.prototype.fade = function(id, opacity) { 730 var object = this.doc.getElementById(id).style; 731 object.opacity = (opacity / 100); 732 object.MozOpacity = (opacity / 100); 733 object.KhtmlOpacity = (opacity / 100); 734 object.filter = "alpha(opacity=" + opacity + ")"; 735 if (opacity <= 0) { 736 try { 737 object.display = 'none'; 738 } catch(err) { } 739 } else if (id == 'lbOverlay') { 740 this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.fade('" + id + "', " + (opacity-20) + ")", 1); 741 } else { 742 this.timerIDArray[this.timerIDCount++] = setTimeout("myLytebox.fade('" + id + "', " + (opacity-10) + ")", 1); 743 } 744}; 745LyteBox.prototype.resizeW = function(id, curW, maxW, pixelrate, speed) { 746 if (!this.hDone) { 747 this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW('" + id + "', " + curW + ", " + maxW + ", " + pixelrate + ")", 100); 748 return; 749 } 750 var object = this.doc.getElementById(id); 751 var timer = speed ? speed : (this.resizeDuration/2); 752 var newW = (this.doAnimations ? curW : maxW); 753 object.style.width = (newW) + "px"; 754 if (newW < maxW) { 755 newW += (newW + pixelrate >= maxW) ? (maxW - newW) : pixelrate; 756 } else if (newW > maxW) { 757 newW -= (newW - pixelrate <= maxW) ? (newW - maxW) : pixelrate; 758 } 759 this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW('" + id + "', " + newW + ", " + maxW + ", " + pixelrate + ", " + (timer+0.02) + ")", timer+0.02); 760 if (parseInt(object.style.width) == maxW) { 761 this.wDone = true; 762 for (var i = 0; i < this.resizeWTimerCount; i++) { window.clearTimeout(this.resizeWTimerArray[i]); } 763 } 764}; 765LyteBox.prototype.resizeH = function(id, curH, maxH, pixelrate, speed) { 766 var timer = speed ? speed : (this.resizeDuration/2); 767 var object = this.doc.getElementById(id); 768 var newH = (this.doAnimations ? curH : maxH); 769 object.style.height = (newH) + "px"; 770 if (newH < maxH) { 771 newH += (newH + pixelrate >= maxH) ? (maxH - newH) : pixelrate; 772 } else if (newH > maxH) { 773 newH -= (newH - pixelrate <= maxH) ? (newH - maxH) : pixelrate; 774 } 775 this.resizeHTimerArray[this.resizeHTimerCount++] = setTimeout("myLytebox.resizeH('" + id + "', " + newH + ", " + maxH + ", " + pixelrate + ", " + (timer+.02) + ")", timer+.02); 776 if (parseInt(object.style.height) == maxH) { 777 this.hDone = true; 778 for (var i = 0; i < this.resizeHTimerCount; i++) { window.clearTimeout(this.resizeHTimerArray[i]); } 779 } 780}; 781LyteBox.prototype.getPageScroll = function() { 782 if (self.pageYOffset) { 783 return this.isFrame ? parent.pageYOffset : self.pageYOffset; 784 } else if (this.doc.documentElement && this.doc.documentElement.scrollTop){ 785 return this.doc.documentElement.scrollTop; 786 } else if (document.body) { 787 return this.doc.body.scrollTop; 788 } 789}; 790LyteBox.prototype.getPageSize = function() { 791 var xScroll, yScroll, windowWidth, windowHeight; 792 if (window.innerHeight && window.scrollMaxY) { 793 xScroll = this.doc.scrollWidth; 794 yScroll = (this.isFrame ? parent.innerHeight : self.innerHeight) + (this.isFrame ? parent.scrollMaxY : self.scrollMaxY); 795 } else if (this.doc.body.scrollHeight > this.doc.body.offsetHeight){ 796 xScroll = this.doc.body.scrollWidth; 797 yScroll = this.doc.body.scrollHeight; 798 } else { 799 xScroll = this.doc.getElementsByTagName("html").item(0).offsetWidth; 800 yScroll = this.doc.getElementsByTagName("html").item(0).offsetHeight; 801 xScroll = (xScroll < this.doc.body.offsetWidth) ? this.doc.body.offsetWidth : xScroll; 802 yScroll = (yScroll < this.doc.body.offsetHeight) ? this.doc.body.offsetHeight : yScroll; 803 } 804 if (self.innerHeight) { 805 windowWidth = (this.isFrame) ? parent.innerWidth : self.innerWidth; 806 windowHeight = (this.isFrame) ? parent.innerHeight : self.innerHeight; 807 } else if (document.documentElement && document.documentElement.clientHeight) { 808 windowWidth = this.doc.documentElement.clientWidth; 809 windowHeight = this.doc.documentElement.clientHeight; 810 } else if (document.body) { 811 windowWidth = this.doc.getElementsByTagName("html").item(0).clientWidth; 812 windowHeight = this.doc.getElementsByTagName("html").item(0).clientHeight; 813 windowWidth = (windowWidth == 0) ? this.doc.body.clientWidth : windowWidth; 814 windowHeight = (windowHeight == 0) ? this.doc.body.clientHeight : windowHeight; 815 } 816 var pageHeight = (yScroll < windowHeight) ? windowHeight : yScroll; 817 var pageWidth = (xScroll < windowWidth) ? windowWidth : xScroll; 818 return new Array(pageWidth, pageHeight, windowWidth, windowHeight); 819}; 820LyteBox.prototype.toggleFlash = function(state) { 821 var objects = this.doc.getElementsByTagName("object"); 822 for (var i = 0; i < objects.length; i++) { 823 objects[i].style.visibility = (state == "hide") ? 'hidden' : 'visible'; 824 } 825 var embeds = this.doc.getElementsByTagName("embed"); 826 for (var i = 0; i < embeds.length; i++) { 827 embeds[i].style.visibility = (state == "hide") ? 'hidden' : 'visible'; 828 } 829 if (this.isFrame) { 830 for (var i = 0; i < parent.frames.length; i++) { 831 try { 832 objects = parent.frames[i].window.document.getElementsByTagName("object"); 833 for (var j = 0; j < objects.length; j++) { 834 objects[j].style.visibility = (state == "hide") ? 'hidden' : 'visible'; 835 } 836 } catch(e) { } 837 try { 838 embeds = parent.frames[i].window.document.getElementsByTagName("embed"); 839 for (var j = 0; j < embeds.length; j++) { 840 embeds[j].style.visibility = (state == "hide") ? 'hidden' : 'visible'; 841 } 842 } catch(e) { } 843 } 844 } 845}; 846LyteBox.prototype.toggleSelects = function(state) { 847 var selects = this.doc.getElementsByTagName("select"); 848 for (var i = 0; i < selects.length; i++ ) { 849 selects[i].style.visibility = (state == "hide") ? 'hidden' : 'visible'; 850 } 851 if (this.isFrame) { 852 for (var i = 0; i < parent.frames.length; i++) { 853 try { 854 selects = parent.frames[i].window.document.getElementsByTagName("select"); 855 for (var j = 0; j < selects.length; j++) { 856 selects[j].style.visibility = (state == "hide") ? 'hidden' : 'visible'; 857 } 858 } catch(e) { } 859 } 860 } 861}; 862LyteBox.prototype.pause = function(numberMillis) { 863 var now = new Date(); 864 var exitTime = now.getTime() + numberMillis; 865 while (true) { 866 now = new Date(); 867 if (now.getTime() > exitTime) { return; } 868 } 869}; 870if (window.addEventListener) { 871 window.addEventListener("load",initLytebox,false); 872} else if (window.attachEvent) { 873 window.attachEvent("onload",initLytebox); 874} else { 875 window.onload = function() {initLytebox();} 876} 877function initLytebox() { myLytebox = new LyteBox(); } 878