// Configuration // If you would like to use a custom loading image or close button reference them in the next two lines. var loadingImage = '/common/images/lightbox/loading.gif'; var closeButtonImage = '/common/images/lightbox/close.gif'; var overlayImage = '/images/lightbox/overlay.gif'; function getRequest(u) { var request; var results = ""; var DoCommit = "Yes"; var method = "GET"; var params = null; if (arguments.length >= 2 && arguments[1].toString().toLowerCase() == "post") { method = "POST"; if (arguments.length >= 3) { params = arguments[2]; } } if (window.XMLHttpRequest) { request = new XMLHttpRequest(); if (request.overrideMimeType) { request.overrideMimeType("text/xml"); } } else if (window.ActiveXObject) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { DoCommit = "No"; } } } if(DoCommit != "No") { request.open(method, u, false); if (method == "POST") { request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); } request.send(params); if (request.readyState == 4) { results = request.responseText; return results; } else { request.onreadystatechange = function() { if (request.readyState == 4) { if(request.status == 200) { results = request.responseText; return results; } else { return results; } } } } } else { return results; } } // getPageScroll() // Returns array with x,y page scroll values. // Core code from - quirksmode.org function getPageScroll() { var yScroll; if(self.pageYOffset) { yScroll = self.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict yScroll = document.documentElement.scrollTop; } else if (document.body) { // all other Explorers yScroll = document.body.scrollTop; } arrayPageScroll = new Array(); arrayPageScroll[0] = ""; arrayPageScroll[1] = yScroll; return arrayPageScroll; } // getPageSize() // Returns array with page width, height and window width, height // Core code from - quirksmode.org // Edit for Firefox by pHaez function getPageSize() { var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) {// all except Explorer windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight) { pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth) { pageWidth = windowWidth; } else { pageWidth = xScroll; } arrayPageSize = new Array(); arrayPageSize[0] = pageWidth; arrayPageSize[1] = pageHeight; arrayPageSize[2] = windowWidth; arrayPageSize[3] = windowHeight; return arrayPageSize; } // getKey(key) // Gets keycode. If 'x' is pressed then it hides the lightbox. function getKey(e){ if (e == null) { // ie keycode = event.keyCode; } else { // mozilla keycode = e.which; } key = String.fromCharCode(keycode).toLowerCase(); if(key == 'x'){ hideLightBox(); } } // hideFlash() // Hides all Flash on a page. function hideFlash(){ var flashObjects = document.getElementsByTagName("object"); for(i = 0; i != flashObjects.length; i++) { flashObjects[i].style.visibility = "hidden"; } var flashEmbeds = document.getElementsByTagName("embeds"); for(i = 0; i != flashEmbeds.length; i++) { flashEmbeds[i].style.visibility = "hidden"; } } // showFlash() // Shows all Flash on a page. function showFlash() { var flashObjects = document.getElementsByTagName("object"); for(i = 0; i != flashObjects.length; i++) { flashObjects[i].style.visibility = "visible"; } var flashEmbeds = document.getElementsByTagName("embeds"); for(i = 0; i != flashEmbeds.length; i++) { flashEmbeds[i].style.visibility = "visible"; } } // hideSelects() // Hides all Selects on a page. function hideSelects(){ // Hide select boxes as they will 'peek' through the image in IE var selects = document.getElementsByTagName("select"); for(i = 0; i != selects.length; i++) { selects[i].style.visibility = "hidden"; } jQuery("#lightBoxHTMLSection select").css("visibility","visible"); } // showSelects() // Shows all Selects on a page. function showSelects() { // Hide select boxes as they will 'peek' through the image in IE var selects = document.getElementsByTagName("select"); for(i = 0; i != selects.length; i++) { selects[i].style.visibility = "visible"; } } // addLoadEvent() // Adds event to window.onload without overwriting currently assigned onload functions. // Function found at Simon Willison's weblog - http://simon.incutio.com/ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } // initLightBox() // Function runs on window load, going through link tags looking for rel="lightbox". // These links receive onclick events that enable the lightbox display for their targets. // The function also inserts html markup at the top of the page which will be used as a // container for the overlay pattern and the inline image. function initLightBox() { if (!document.getElementsByTagName) { return; } // the rest of this code inserts html at the top of the page that looks like this: // //
// //
// var objBody = document.getElementsByTagName("body").item(0); // create overlay div and hardcode some functional styles (aesthetic styles are in CSS file) var objOverlay = document.createElement("div"); objOverlay.setAttribute('id','overlay'); objOverlay.onclick = function() { hideLightBox(); return false; } objOverlay.style.display = 'none'; objOverlay.style.position = 'absolute'; objOverlay.style.top = '0'; objOverlay.style.left = '0'; objOverlay.style.zIndex = '90'; objOverlay.style.width = '100%'; objOverlay.style.border = 'none'; objOverlay.style.background = 'url(' + overlayImage + ')'; objBody.insertBefore(objOverlay, objBody.firstChild); var arrayPageSize = getPageSize(); var arrayPageScroll = getPageScroll(); // preload and create loader image var imgPreloader = new Image(); // if loader image found, create link to hide lightbox and create loadingimage imgPreloader.onload = function() { var objLoadingImageLink = document.createElement("a"); objLoadingImageLink.setAttribute('href','#'); objLoadingImageLink.onclick = function() { hideLightBox(); return false; } objOverlay.appendChild(objLoadingImageLink); var objLoadingImage = document.createElement("img"); objLoadingImage.setAttribute('id','loadingImage'); objLoadingImage.src = loadingImage; objLoadingImage.style.position = 'absolute'; objLoadingImage.style.border = 'none'; objLoadingImage.style.zIndex = '150'; objLoadingImageLink.appendChild(objLoadingImage); imgPreloader.onload = function() { }; // clear onLoad, as IE will flip out w/ animated gifs return false; } imgPreloader.src = loadingImage; // create lightbox div, same note about styles as above var objLightBox = document.createElement("div"); objLightBox.setAttribute('id','lightbox'); objLightBox.style.display = 'none'; objLightBox.style.position = 'absolute'; objLightBox.style.zIndex = '100'; objLightBox.style.backgroundColor = '#EEEEEE'; objLightBox.style.padding = '10px'; objLightBox.style.borderBottom = '2px solid #666666'; objLightBox.style.borderRight = '2px solid #666666'; objLightBox.style.borderLeft = '2px solid #AAAAAA'; objLightBox.style.borderTop = '2px solid #AAAAAA'; objBody.insertBefore(objLightBox,objOverlay.nextSibling); // create lightboxSectionImage div, same note about styles as above var objImageSection = document.createElement("div"); objImageSection.setAttribute('id','lightBoxImageSection'); objImageSection.style.zIndex = '101'; objImageSection.style.display = ''; objLightBox.appendChild(objImageSection); // create lightboxSectionHTML div, same note about styles as above var objHTMLSection = document.createElement("div"); objHTMLSection.setAttribute('id','lightBoxHTMLSection'); objHTMLSection.style.zIndex = '101'; objHTMLSection.style.display = 'none'; objHTMLSection.style.overflow = 'auto'; objLightBox.appendChild(objHTMLSection); // create the image link var objLink = document.createElement("a"); objLink.setAttribute('href','#'); objLink.setAttribute('title','Click to close'); objLink.onclick = function () { hideLightBox(); return false; } objImageSection.appendChild(objLink); // preload and create close button image var imgPreloadCloseButton = new Image(); // if close button image found... imgPreloadCloseButton.onload = function() { var objCloseButton = document.createElement("img"); objCloseButton.setAttribute('id','closeButton'); objCloseButton.src = closeButtonImage; objCloseButton.onclick = function () { hideLightBox(); return false; } objCloseButton.style.cursor = 'pointer'; objCloseButton.style.position = 'absolute'; objCloseButton.style.zIndex = '200'; objCloseButton.style.border = 'none'; objCloseButton.style.clear = 'both'; objCloseButton.style.top = '5px'; objCloseButton.style.right = '4px'; objLightBox.appendChild(objCloseButton); return false; } imgPreloadCloseButton.src = closeButtonImage; // create image var objImage = document.createElement("img"); objImage.setAttribute('id','lightboxImage'); objImage.style.border = 'none'; objImage.style.clear = 'both'; objLink.appendChild(objImage); // create details div, a container for the caption and keyboard message var objLightBoxDetails = document.createElement("div"); objLightBoxDetails.setAttribute('id','lightboxDetails'); objLightBox.appendChild(objLightBoxDetails); // create caption var objCaption = document.createElement("div"); objCaption.setAttribute('id','lightboxCaption'); objCaption.style.display = 'none'; objCaption.style.fontSize = '0.8em'; objCaption.style.paddingTop = '0.4em'; objCaption.style.textAlign = 'center'; objLightBoxDetails.appendChild(objCaption); } // loadLightBoxImage() // Preloads the image, then places in lightbox, centers and displays. function loadLightBoxImage(imageURL,flashTitle) { // prep objects var objOverlay = document.getElementById('overlay'); var objLightBox = document.getElementById('lightbox'); var objImageSection = document.getElementById('lightBoxImageSection'); var objHTMLSection = document.getElementById('lightBoxHTMLSection'); var objCaption = document.getElementById('lightboxCaption'); var objImage = document.getElementById('lightboxImage'); var objLoadingImage = document.getElementById('loadingImage'); var objLightBoxDetails = document.getElementById('lightboxDetails'); var arrayPageSize = getPageSize(); var arrayPageScroll = getPageScroll(); // center loadingImage if it exists if(objLoadingImage) { objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px'); objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px'); objLoadingImage.style.display = 'block'; } // set height of Overlay to take up whole page and show objOverlay.style.height = (arrayPageSize[1] + 'px'); objOverlay.style.display = 'block'; // preload image imgPreload = new Image(); imgPreload.onload = function() { objImage.src = imageURL; // center lightbox and make sure that the top and left values are not negative // and the image placed outside the viewport var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2); var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2); objLightBox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px"; objLightBox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px"; objLightBoxDetails.style.width = imgPreload.width + 'px'; if(flashTitle != undefined){ objCaption.style.display = 'block'; objCaption.innerHTML = flashTitle; } else { objCaption.style.display = 'none'; } if (objLoadingImage) { objLoadingImage.style.display = 'none'; } // Hide flash and selects as they will 'peek' through the image in IE hideSelects(); hideFlash(); objLightBox.style.display = 'block'; objImageSection.style.display = ''; objHTMLSection.style.display = 'none'; // After image is loaded, update the overlay height as the new image might have // increased the overall page height. arrayPageSize = getPageSize(); objOverlay.style.height = (arrayPageSize[1] + 'px'); // Check for 'x' keypress document.onkeypress = getKey; return false; } imgPreload.src = imageURL; } // loadLightBoxHTML(contentURL,width,height) // Fetches the URL's content via ajax and sets the innerHTML of the HTML section // to the returned HTML. Width and height refer to the window's width and height. function loadLightBoxHTML(contentURL,width,height) { // ajax variables var results = ""; var request = ""; var complete = ""; var prepare = ""; var timer = 0; // prep objects var objOverlay = document.getElementById('overlay'); var objLightBox = document.getElementById('lightbox'); var objImageSection = document.getElementById('lightBoxImageSection'); var objHTMLSection = document.getElementById('lightBoxHTMLSection'); var objCaption = document.getElementById('lightboxCaption'); var objImage = document.getElementById('lightboxImage'); var objLoadingImage = document.getElementById('loadingImage'); var objLightBoxDetails = document.getElementById('lightboxDetails'); var arrayPageSize = getPageSize(); var arrayPageScroll = getPageScroll(); request = function() { clearTimeout(timer); results = getRequest(contentURL,'GET'); complete(); } complete = function() { objHTMLSection.innerHTML = results; objHTMLSection.style.width = width + "px"; objHTMLSection.style.height = height + "px"; objCaption.style.display = 'block'; objCaption.innerHTML = ''; if (objLoadingImage) { objLoadingImage.style.display = 'none'; } // Hide flash and selects as they will 'peek' through the image in IE hideSelects(); hideFlash(); // center lightbox and make sure that the top and left values are not negative // and the image placed outside the viewport var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - height) / 2); var lightboxLeft = ((arrayPageSize[0] - 20 - width) / 2); objLightBox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px"; objLightBox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px"; objLightBoxDetails.style.width = width + 'px'; objLightBox.style.display = 'block'; objImageSection.style.display = 'none'; objHTMLSection.style.display = ''; // After image is loaded, update the overlay height as the content might // have increased the overall page height. arrayPageSize = getPageSize(); objOverlay.style.height = (arrayPageSize[1] + 'px'); } // start request prepare = function() { // center loadingImage if it exists if(objLoadingImage) { objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px'); objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px'); objLoadingImage.style.display = 'block'; } // set height of Overlay to take up whole page and show objOverlay.style.height = (arrayPageSize[1] + 'px'); objOverlay.style.display = 'block'; timer = setTimeout(request, 100); } prepare(); } // hideLightBox() // Hides the Light Box function hideLightBox() { // get objects var objOverlay = document.getElementById('overlay'); var objLightBox = document.getElementById('lightbox'); // hide lightbox and overlay objOverlay.style.display = 'none'; objLightBox.style.display = 'none'; // disable keypress listener document.onkeypress = ''; // show flash and selects showSelects(); showFlash(); } // sendToLightBox(item,[type],[width],[height]) // Sends content of type to the LightBox. Type defaults to image, which expects an // image url. Type can also be 'html', which expects a url to a page. Width and // height are only used by type 'html' for the size of the window. function sendToLightBox(item) { var type = "image"; var width = 650; var height = 500; if(arguments.length > 1) { type = arguments[1]; } if(arguments.length > 2) { width = arguments[2]; } if(arguments.length > 3) { height = arguments[3]; } switch(type) { case "image": { loadLightBoxImage(item,"Click On Image To Close"); break; } case "html": { loadLightBoxHTML(item,width,height); break; } default: { // Do Nothing break; } } } addLoadEvent(initLightBox); // run initLightBox onLoad