//******************************************************************************************************************************/ // LyteBox v2.02 // // Author: Markus F. Hay // Website: http://www.dolem.com/ // Date: November 13, 2006 // License: Creative Commons Attribution 2.5 License (http://creativecommons.org/licenses/by/2.5/) // Browsers: Tested successfully on WinXP with the following browsers (using no DOCTYPE, Strict DOCTYPE, and Transitional DOCTYPE): // * Firefox: 2.0, 1.5 // * Internet Explorer: 7.0, 6.0 SP2, 5.5 SP2 // * Opera: 9.10 // // NOTE: LyteBox was written from the Lightbox class that Lokesh Dhakar (http://www.huddletogether.com) // originally wrote. The purpose was to write a self-contained object that eliminates the dependency // of prototype.js, effects.js, and scriptaculous.js. Most of the core functionality and code was // left in tact, and several functions were added to mimic the effects provided by sciptaculous. These // newly added functions include: appear(), fade(), resizeW(), resizeH(), and toggleSelects(). Functions // that were not needed were removed, as were global variables. Additionally, support has been added for // iFrame environments without any code modifications needed by the end user (auto-detect). // // Other changes include: // - new close, next, and previous images // - prev/next images are always displayed (as opposed to mousing over a part of the DIV to see them) // // That being said, the original comments by Lokesh are below: // // * Lightbox v2.02 // * by Lokesh Dhakar - http://www.huddletogether.com // * 3/31/06 // // * For more information on this script, visit: http://huddletogether.com/projects/lightbox2/ // * Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/ // // * Credit also due to those who have helped, inspired, and made their code available to the public. // * Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others. // //******************************************************************************************************************************/ // Extended Built-in Objects // - Array.prototype.removeDuplicates() // - Array.prototype.empty() // // LyteBox Class Definition // - LyteBox() // - initialize() // - start() // - changeImage(imageNum) // - resizeImageContainer(imgWidth, imgHeight) // - showImage() // - updateDetails() // - updateNav() // - enableKeyboardNav() // - disableKeyboardNav() // - keyboardAction() // - preloadNeighborImages() // - end() // - appear(id, opacity) // - fade(id, opacity) // - resizeW(id, curW, maxW, timer) // - resizeH(id, curH, maxH, timer) // - getPageScroll() // - getPageSize() // - toggleSelects(state) // - pause(numberMillis) // // - initLytebox() //**************************************************************************************************************/ Array.prototype.removeDuplicates = function () { for (var i = 1; i < this.length; i++) { if (this[i][0] == this[i-1][0]) { this.splice(i,1); } } } Array.prototype.empty = function () { for (var i = 0; i <= this.length; i++) { this.shift(); } } var lbImageTag = "Obrázek "; var lbOfTag = " z "; //*************************/ // LyteBox constructor //*************************/ function LyteBox(base) { /*** Start Configuration ***/ this.fileLoadingImage = base+"plugins/content/jwsigpro/loading.gif"; this.fileCloseImage = base+"plugins/content/jwsigpro/lytebox/english/closelabel.gif"; this.resizeSpeed = 5; // controls the speed of the image resizing (1=slowest and 10=fastest) this.borderSize = 12; //if you adjust the padding in the CSS, you will need to update this variable this.maxOpacity = 80; // higher opacity = darker overlay, lower opacity = lighter overlay /*** End Configuration ***/ if(this.resizeSpeed > 10) { this.resizeSpeed = 10; } if(this.resizeSpeed < 1) { resizeSpeed = 1; } this.resizeDuration = (11 - this.resizeSpeed) * 0.15; /* MEMBER VARIABLES USED TO CLEAR SETTIMEOUTS */ this.resizeWTimerArray = new Array(); this.resizeWTimerCount = 0; this.resizeHTimerArray = new Array(); this.resizeHTimerCount = 0; this.showImageTimerArray = new Array(); this.showImageTimerCount = 0; this.overlayTimerArray = new Array(); this.overlayTimerCount = 0; this.imageTimerArray = new Array(); this.imageTimerCount = 0; this.timerIDArray = new Array(); this.timerIDCount = 0; /* GLOBAL */ this.imageArray = new Array(); this.activeImage = null; /* Check for iFrame environment (will set this.isFrame and this.doc member variables) */ this.checkFrame(); // We need to know the certain browser versions (or if it's IE) since IE is "special" and requires spoon feeding. /*@cc_on /*@if (@_jscript) this.ie = (document.all) ? true : false; /*@else @*/ this.ie = false; /*@end @*/ this.ie7 = (this.ie && window.XMLHttpRequest); /* INITIALIZE */ this.initialize(); } //********************************************************************************************/ // initialize() // Constructor runs on completion of the DOM loading. Loops through anchor tags looking for // 'lytebox' references and applies onclick events to appropriate links. The 2nd section of // the function inserts html at the bottom of the page which is used to display the shadow // overlay and the image container. //********************************************************************************************/ LyteBox.prototype.initialize = function() { if (!document.getElementsByTagName) { return; } // populate array of anchors from the appropriate window (could be the parent or iframe document) var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a'); // loop through all anchor tags for (var i = 0; i < anchors.length; i++) { var anchor = anchors[i]; var relAttribute = String(anchor.getAttribute('rel')); // use the string.match() method to catch 'lytebox' references in the rel attribute if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lytebox'))) { anchor.onclick = function () { myLytebox.start(this); return false; } } } // The rest of this code inserts html at the bottom of the page that looks similar to this: // //
//
//
//
// //
// // //
//
// // // //
//
//
//
//
//
// // //
//
// //
//
//
//
var objBody = this.doc.getElementsByTagName("body").item(0); var objOverlay = this.doc.createElement("div"); objOverlay.setAttribute('id','overlay'); objOverlay.style.display = 'none'; if (this.isFrame) { objOverlay.onclick = function() { window.parent[window.name].myLytebox.end(); return false; } } else { objOverlay.onclick = function() { myLytebox.end(); return false; } } objBody.appendChild(objOverlay); var objLytebox = this.doc.createElement("div"); objLytebox.setAttribute('id','lytebox'); objLytebox.style.display = 'none'; objBody.appendChild(objLytebox); var objOuterImageContainer = this.doc.createElement("div"); objOuterImageContainer.setAttribute('id','outerImageContainer'); objLytebox.appendChild(objOuterImageContainer); var objImageContainer = this.doc.createElement("div"); objImageContainer.setAttribute('id','imageContainer'); objOuterImageContainer.appendChild(objImageContainer); var objLyteboxImage = this.doc.createElement("img"); objLyteboxImage.setAttribute('id','lyteboxImage'); objImageContainer.appendChild(objLyteboxImage); var objLoading = this.doc.createElement("div"); objLoading.setAttribute('id','loading'); objImageContainer.appendChild(objLoading); var objLoadingLink = this.doc.createElement("a"); objLoadingLink.setAttribute('id','loadingLink'); objLoadingLink.setAttribute('href','#'); if (this.isFrame) { objLoadingLink.onclick = function() { window.parent[window.name].myLytebox.end(); return false; } } else { objLoadingLink.onclick = function() { myLytebox.end(); return false; } } objLoading.appendChild(objLoadingLink); var objLoadingImage = this.doc.createElement("img"); objLoadingImage.setAttribute('src', this.fileLoadingImage); objLoadingLink.appendChild(objLoadingImage); var objImageDataContainer = this.doc.createElement("div"); objImageDataContainer.setAttribute('id','imageDataContainer'); objImageDataContainer.className = 'clearfix'; objLytebox.appendChild(objImageDataContainer); var objImageData =this.doc.createElement("div"); objImageData.setAttribute('id','imageData'); objImageDataContainer.appendChild(objImageData); var objImageDetails = this.doc.createElement("div"); objImageDetails.setAttribute('id','imageDetails'); objImageData.appendChild(objImageDetails); var objCaption = this.doc.createElement("span"); objCaption.setAttribute('id','caption'); objImageDetails.appendChild(objCaption); var objHoverNav = this.doc.createElement("div"); objHoverNav.setAttribute('id','hoverNav'); objImageContainer.appendChild(objHoverNav); var objBottomNav = this.doc.createElement("div"); objBottomNav.setAttribute('id','bottomNav'); objImageData.appendChild(objBottomNav); var objPrevLink = this.doc.createElement("a"); objPrevLink.setAttribute('id','prevLink'); objPrevLink.setAttribute('href','#'); objHoverNav.appendChild(objPrevLink); var objNextLink = this.doc.createElement("a"); objNextLink.setAttribute('id','nextLink'); objNextLink.setAttribute('href','#'); objHoverNav.appendChild(objNextLink); var objNumberDisplay = this.doc.createElement("span"); objNumberDisplay.setAttribute('id','numberDisplay'); objImageDetails.appendChild(objNumberDisplay); var objBottomNavCloseLink = this.doc.createElement("a"); objBottomNavCloseLink.setAttribute('id','bottomNavClose'); objBottomNavCloseLink.setAttribute('href','#'); if (this.isFrame) { objBottomNavCloseLink.onclick = function() { window.parent[window.name].myLytebox.end(); return false; } } else { objBottomNavCloseLink.onclick = function() { myLytebox.end(); return false; } } objBottomNav.appendChild(objBottomNavCloseLink); var objBottomNavCloseImage = this.doc.createElement("img"); objBottomNavCloseImage.setAttribute('src', this.fileCloseImage); objBottomNavCloseLink.appendChild(objBottomNavCloseImage); }; //********************************************************************************/ // start() // Display overlay and Lytebox. If image is part of a set, add siblings to imageArray. //********************************************************************************/ LyteBox.prototype.start = function(imageLink) { // Hide select boxes for IE6 and below if (this.ie && !this.ie7) { this.toggleSelects('hide'); } // stretch overlay to fill page and fade in var pageSize = this.getPageSize(); var objOverlay = this.doc.getElementById('overlay'); var objBody = this.doc.getElementsByTagName("body").item(0); objOverlay.style.height = pageSize[1] + "px"; objOverlay.style.display = ''; this.appear('overlay', 0); // initialize this.imageArray = []; this.imageNum = 0; if (!document.getElementsByTagName){ return; } var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a'); // if image is NOT part of a set.. if((imageLink.getAttribute('rel') == 'lytebox')) { // add single image to imageArray this.imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title'))); } else { // if image is part of a set.. // loop through anchors, find other images in set, and add them to imageArray for (var i = 0; i < anchors.length; i++){ var anchor = anchors[i]; if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) { //this.imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title'))); this.imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')== null ? '' : anchor.getAttribute('title') )); } } this.imageArray.removeDuplicates(); while(this.imageArray[this.imageNum][0] != imageLink.getAttribute('href')) { this.imageNum++; } } // calculate top offset for the lytebox and display var object = this.doc.getElementById('lytebox'); object.style.top = (this.getPageScroll() + (pageSize[3] / 15)) + "px"; object.style.display = ''; this.changeImage(this.imageNum); }; //******************************************************************************/ // changeImage() // Hide most elements and preload image in preparation for resizing image container. //******************************************************************************/ LyteBox.prototype.changeImage = function(imageNum) { this.activeImage = imageNum; // update global var // hide elements during transition this.doc.getElementById('loading').style.display = ''; this.doc.getElementById('lyteboxImage').style.display = 'none'; this.doc.getElementById('prevLink').style.display = 'none'; this.doc.getElementById('nextLink').style.display = 'none'; this.doc.getElementById('imageDataContainer').style.display = 'none'; this.doc.getElementById('numberDisplay').style.display = 'none'; imgPreloader = new Image(); // once image is preloaded, resize image container imgPreloader.onload = function() { myLytebox.doc.getElementById('lyteboxImage').src = myLytebox.imageArray[myLytebox.activeImage][0]; myLytebox.resizeImageContainer(imgPreloader.width, imgPreloader.height); } imgPreloader.src = this.imageArray[this.activeImage][0]; }; //******************************************************************************/ // resizeImageContainer() //******************************************************************************/ LyteBox.prototype.resizeImageContainer = function(imgWidth, imgHeight) { // get current height and width this.wCur = this.doc.getElementById('outerImageContainer').offsetWidth; this.hCur = this.doc.getElementById('outerImageContainer').offsetHeight; // scalars based on change from old to new this.xScale = ((imgWidth + (this.borderSize * 2)) / this.wCur) * 100; this.yScale = ((imgHeight + (this.borderSize * 2)) / this.hCur) * 100; // calculate size difference between new and old image, and resize if necessary var wDiff = (this.wCur - this.borderSize * 2) - imgWidth; var hDiff = (this.hCur - this.borderSize * 2) - imgHeight; if (!(hDiff == 0)) { this.hDone = false; this.resizeH('outerImageContainer', this.hCur, imgHeight + this.borderSize*2, this.getPixelRate(this.hCur, imgHeight)); } else { this.hDone = true; } if (!(wDiff == 0)) { this.wDone = false; this.resizeW('outerImageContainer', this.wCur, imgWidth + this.borderSize*2, this.getPixelRate(this.wCur, imgWidth)); } else { this.wDone = true; } // if new and old image are same size and no scaling transition is necessary, do a quick pause to prevent image flicker. if ((hDiff == 0) && (wDiff == 0)) { if (this.ie){ this.pause(200); } else { this.pause(100); } } this.doc.getElementById('prevLink').style.height = imgHeight + "px"; this.doc.getElementById('nextLink').style.height = imgHeight + "px"; this.doc.getElementById('imageDataContainer').style.width = (imgWidth + (this.borderSize * 2)) + "px"; this.showImage(); }; //******************************************************************************/ // showImage() - Display image and begin preloading neighbors. //******************************************************************************/ LyteBox.prototype.showImage = function() { if (this.wDone && this.hDone) { // Clear the timer for showImage... for (var i = 0; i < this.showImageTimerCount; i++) { window.clearTimeout(this.showImageTimerArray[i]); } this.doc.getElementById('loading').style.display = 'none'; this.doc.getElementById('lyteboxImage').style.display = ''; this.appear('lyteboxImage', 0); this.preloadNeighborImages(); } else { this.showImageTimerArray[this.showImageTimerCount++] = setTimeout("myLytebox.showImage()", 200); } }; //******************************************************************************/ // updateDetails() - Display caption, and bottom nav. //******************************************************************************/ LyteBox.prototype.updateDetails = function() { var object = this.doc.getElementById('caption'); object.style.display = ''; object.innerHTML = this.imageArray[this.activeImage][1]; this.updateNav() object = this.doc.getElementById('imageDataContainer'); object.style.display = ''; // if image is part of set display 'Image x of x' if(this.imageArray.length > 1){ object = this.doc.getElementById('numberDisplay'); object.style.display = ''; object.innerHTML = lbImageTag + eval(this.activeImage + 1) + lbOfTag + this.imageArray.length; } this.appear('imageDataContainer', 0); }; //******************************************************************************/ // updateNav() - Display appropriate previous and next hover navigation. //******************************************************************************/ LyteBox.prototype.updateNav = function() { // if not first image in set, display prev image button if(this.activeImage != 0){ var object = this.doc.getElementById('prevLink'); object.style.display = ''; object.onclick = function() { myLytebox.changeImage(myLytebox.activeImage - 1); return false; } } // if not last image in set, display next image button if(this.activeImage != (this.imageArray.length - 1)){ var object = this.doc.getElementById('nextLink'); object.style.display = ''; object.onclick = function() { myLytebox.changeImage(myLytebox.activeImage + 1); return false; } } this.enableKeyboardNav(); }; //********************************************************************************/ // enableKeyboardNav(), disableKeyboardNav(), keyboardAction() -- COMBINED COMMENT //********************************************************************************/ LyteBox.prototype.enableKeyboardNav = function() { document.onkeydown = this.keyboardAction; }; LyteBox.prototype.disableKeyboardNav = function() { document.onkeydown = ''; }; LyteBox.prototype.keyboardAction = function(e) { var keycode = key = null; keycode = (e == null) ? event.keyCode : e.which; key = String.fromCharCode(keycode).toLowerCase(); if((key == 'x') || (key == 'c')){ // close lytebox myLytebox.end(); } else if(key == 'f'){ // display previous image (front) if(this.activeImage != 0){ myLytebox.disableKeyboardNav(); myLytebox.changeImage(this.activeImage - 1); } } else if(key == 'b'){ // display next image (back) if(this.activeImage != (this.imageArray.length - 1)) { myLytebox.disableKeyboardNav(); myLytebox.changeImage(this.activeImage + 1); } } }; //********************************************************************************/ // preloadNeighborImages() - Preload previous and next images. //********************************************************************************/ LyteBox.prototype.preloadNeighborImages = function() { if ((this.imageArray.length - 1) > this.activeImage) { preloadNextImage = new Image(); preloadNextImage.src = this.imageArray[this.activeImage + 1][0]; } if(this.activeImage > 0) { preloadPrevImage = new Image(); preloadPrevImage.src = this.imageArray[this.activeImage - 1][0]; } }; //********************************************************************************/ // end() //********************************************************************************/ LyteBox.prototype.end = function() { this.disableKeyboardNav(); this.doc.getElementById('lytebox').style.display = 'none'; this.fade('overlay', 80); this.toggleSelects('visible'); }; //***********************************************************************************/ // checkFrame() - Determines if we are in an iFrame or not so we can display properly //***********************************************************************************/ LyteBox.prototype.checkFrame = function() { // If we are an iFrame ONLY (framesets are excluded because we can't overlay a frameset). Note that there are situations // where "this" will not refer to LyteBox, such as when buttons are clicked, therefor we have to set this.dialog appropriately. if (window.parent.frames[window.name] && (parent.document.getElementsByTagName('frameset').length <= 0)) { this.isFrame = true; this.lytebox = "window.parent." + window.name + ".myLytebox"; this.doc = parent.document; } else { this.isFrame = false; this.lytebox = "myLytebox"; this.doc = document; } }; //*******************************************************************************************/ // getPixelRate() - Determines the rate (number of pixels) that we want to scale PER call // to a setTimeout() function. "cur" represents the current width or height, // and img represents the image (new) width or height. //*******************************************************************************************/ LyteBox.prototype.getPixelRate = function(cur, img) { var diff = (img > cur) ? img - cur : cur - img; if (diff > 0 && diff <= 100) { return 4; } if (diff > 100 && diff <= 200) { return 8; } if (diff > 200 && diff <= 300) { return 12; } if (diff > 300 && diff <= 400) { return 16; } if (diff > 400 && diff <= 500) { return 20; } if (diff > 500 && diff <= 600) { return 24; } if (diff > 600 && diff <= 700) { return 28; } if (diff > 700) { return 32; } }; //********************************************************************************/ // appear() - Makes an element fade in (appear). //********************************************************************************/ LyteBox.prototype.appear = function(id, opacity) { var object = this.doc.getElementById(id).style; object.opacity = (opacity/100); object.MozOpacity = (opacity/100); object.KhtmlOpacity = (opacity/100); object.filter = "alpha(opacity=" + (opacity+10) + ")"; if (opacity == 100 && id == 'lyteboxImage') { this.updateDetails(); } else if (opacity == this.maxOpacity && id == 'overlay') { // Clear the overlay timer... for (var i = 0; i < this.overlayTimerCount; i++) { window.clearTimeout(this.overlayTimerArray[i]); } return; } else if (opacity == 100 && id == 'imageDataContainer') { // Clear all the image timers... for (var i = 0; i < this.imageTimerCount; i++) { window.clearTimeout(this.imageTimerArray[i]); } } else { if (id == 'overlay') { this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.appear('" + id + "', " + (opacity+20) + ")", 1); } else { this.imageTimerArray[this.imageTimerCount++] = setTimeout("myLytebox.appear('" + id + "', " + (opacity+10) + ")", 1); } } }; //********************************************************************************/ // fade() - Makes an element fade out (disappear). //********************************************************************************/ LyteBox.prototype.fade = function(id, opacity) { var object = this.doc.getElementById(id).style; object.opacity = (opacity / 100); object.MozOpacity = (opacity / 100); object.KhtmlOpacity = (opacity / 100); object.filter = "alpha(opacity=" + opacity + ")"; if (opacity == 0) { try { object.display = 'none'; } catch(err) { } } else if (id == 'overlay') { this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.fade('" + id + "', " + (opacity-20) + ")", 1); } else { this.timerIDArray[this.timerIDCount++] = setTimeout("myLytebox.fade('" + id + "', " + (opacity-10) + ")", 1); } }; //********************************************************************************/ // resizeW() - Resize the width of an element (smooth animation)... //********************************************************************************/ LyteBox.prototype.resizeW = function(id, curW, maxW, pixelrate, speed) { if (!this.hDone) { this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW('" + id + "', " + curW + ", " + maxW + ", " + pixelrate + ")", 100); return; } var object = this.doc.getElementById(id); var timer = speed ? speed : (this.resizeDuration/2); object.style.width = (curW) + "px"; if (curW < maxW) { curW += (curW + pixelrate >= maxW) ? (maxW - curW) : pixelrate; // increase size } else if (curW > maxW) { curW -= (curW - pixelrate <= maxW) ? (curW - maxW) : pixelrate; // decrease size } this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW('" + id + "', " + curW + ", " + maxW + ", " + pixelrate + ", " + (timer+0.02) + ")", timer+0.02); if (parseInt(object.style.width) == maxW) { this.wDone = true; // Clear all the timers for resizing... for (var i = 0; i < this.resizeWTimerCount; i++) { window.clearTimeout(this.resizeWTimerArray[i]); } } }; //********************************************************************************/ // resizeH() - Resize the height of an element (smooth animation)... //********************************************************************************/ LyteBox.prototype.resizeH = function(id, curH, maxH, pixelrate, speed) { var timer = speed ? speed : (this.resizeDuration/2); var object = this.doc.getElementById(id); object.style.height = (curH) + "px"; if (curH < maxH) { curH += (curH + pixelrate >= maxH) ? (maxH - curH) : pixelrate; // increase size } else if (curH > maxH) { curH -= (curH - pixelrate <= maxH) ? (curH - maxH) : pixelrate; // decrease size } this.resizeHTimerArray[this.resizeHTimerCount++] = setTimeout("myLytebox.resizeH('" + id + "', " + curH + ", " + maxH + ", " + pixelrate + ", " + (timer+.02) + ")", timer+.02); if (parseInt(object.style.height) == maxH) { this.hDone = true; // Clear all the timers for resizing... for (var i = 0; i < this.resizeHTimerCount; i++) { window.clearTimeout(this.resizeHTimerArray[i]); } } }; //**************************************************/ // getPageScroll() - returns the y page scroll value //**************************************************/ LyteBox.prototype.getPageScroll = function() { if (self.pageYOffset) { return this.isFrame ? parent.pageYOffset : self.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict return this.doc.documentElement.scrollTop; } else if (document.body) {// all other Explorers return this.doc.body.scrollTop; } }; //*******************************************************************************/ // getPageSize() - Returns array with page width, height and window width, height // Core code from - quirksmode.org, Edit for Firefox by pHaez //*******************************************************************************/ LyteBox.prototype.getPageSize = function() { var xScroll, yScroll, windowWidth, windowHeight; if (window.innerHeight && window.scrollMaxY) { xScroll = this.doc.scrollWidth; yScroll = (this.isFrame ? parent.innerHeight : self.innerHeight) + (this.isFrame ? parent.scrollMaxY : self.scrollMaxY); } else if (this.doc.body.scrollHeight > this.doc.body.offsetHeight){ // all but Explorer Mac xScroll = this.doc.body.scrollWidth; yScroll = this.doc.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = this.doc.getElementsByTagName("html").item(0).offsetWidth; yScroll = this.doc.getElementsByTagName("html").item(0).offsetHeight; // Strict mode fixes xScroll = (xScroll < this.doc.body.offsetWidth) ? this.doc.body.offsetWidth : xScroll; yScroll = (yScroll < this.doc.body.offsetHeight) ? this.doc.body.offsetHeight : yScroll; } if (self.innerHeight) { // all except Explorer windowWidth = (this.isFrame) ? parent.innerWidth : self.innerWidth; windowHeight = (this.isFrame) ? parent.innerHeight : self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = this.doc.documentElement.clientWidth; windowHeight = this.doc.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = this.doc.getElementsByTagName("html").item(0).clientWidth; windowHeight = this.doc.getElementsByTagName("html").item(0).clientHeight; // Strict mode fixes... windowWidth = (windowWidth == 0) ? this.doc.body.clientWidth : windowWidth; windowHeight = (windowHeight == 0) ? this.doc.body.clientHeight : windowHeight; } // for small pages with total height/width less then height/width of the viewport var pageHeight = (yScroll < windowHeight) ? windowHeight : yScroll; var pageWidth = (xScroll < windowWidth) ? windowWidth : xScroll; return new Array(pageWidth, pageHeight, windowWidth, windowHeight); }; //**********************************************************************************************************/ // toggleSelects(state) - Toggles select boxes between hidden and visible states, including those in iFrames //**********************************************************************************************************/ LyteBox.prototype.toggleSelects = function(state) { // hide in the parent frame, then in child frames var selects = this.doc.getElementsByTagName("select"); for (i = 0; i < selects.length; i++ ) { selects[i].style.visibility = (state == "hide") ? 'hidden' : 'visible'; } if (this.isFrame) { for (i = 0; i < parent.frames.length; i++) { selects = parent.frames[i].window.document.getElementsByTagName("select"); for (var j = 0; j < selects.length; j++) { selects[j].style.visibility = (state == "hide") ? 'hidden' : 'visible'; } } } }; //********************************************************************************/ // pause(numberMillis) // Pauses code execution for specified time. Uses busy code, not good. // Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602 //********************************************************************************/ LyteBox.prototype.pause = function(numberMillis) { var now = new Date(); var exitTime = now.getTime() + numberMillis; while (true) { now = new Date(); if (now.getTime() > exitTime) { return; } } }; //***************/ // add listeners //***************/ if (window.addEventListener) { // W3C window.addEventListener("load",initLytebox,false); } else if (window.attachEvent) { // IE window.attachEvent("onload",initLytebox); } else { // backwards compatible window.onload = function() {initLytebox();} } /* START IT UP! */ function initLytebox() { myLytebox = new LyteBox(base); }