/* Web page containing this slidehsow must contain: */ var lightbox = {}; /*------------------------------------ Init ------------------------------------*/ lightbox.Init = function () { // variable declarations lightbox.strImageFolder = 'images\/lightbox_images\/'; lightbox.divBackscreen = null; lightbox.divLightboxSpace = null; lightbox.divLightboxContainer = null; lightbox.divImageContainer = null; lightbox.divDetailContainer = null; lightbox.divLeftBtn = null; lightbox.divRightBtn = null; lightbox.divDetails = null; lightbox.imgCurrent = null; lightbox.imgPrev = null; lightbox.imgNext = null; lightbox.imgLoading = null; lightbox.imgLeft = null; lightbox.imgRight = null; lightbox.imgClose = null; lightbox.imgClose_small = null; lightbox.paraDetails = null; lightbox.paraIndexInfo = null; lightbox.ar_divLightbox = []; // index lightbox.iDiv = 0; lightbox.iImage = 0; // opacity lightbox.opBackscreen = 0; lightbox.opImage = 0; lightbox.imageWidth = 0; lightbox.imageHeight = 0; lightbox.stepWidth = 0; lightbox.stepHeight = 0; lightbox.detailHeight = 0; // related to images: lightbox.minWidth = 200; lightbox.minHeight = 200; lightbox.maxWidth = document.body.offsetWidth / 2; lightbox.maxHeight = 500; // boolean values lightbox.bRefreshed = false; lightbox.SetupLightbox (); lightbox.CreateLightbox (); lightbox.SetupListeners (); }; //-------------------------------------------------------------------------------- /*------------------------------------ AddEventListener ------------------------------------*/ lightbox.AddEventListener = function (target, type, listener) { if (typeof target.addEventListener != 'undefined') target.addEventListener (type, listener, false); else if (typeof target.attachEvent != 'undefined') { type = 'on' + type; target.attachEvent (type, listener); } }; /*------------------------------------ BtnClickHandle ------------------------------------*/ lightbox.BtnClickHandle = function (e) { var evt = window.event || e; var target; if (evt.target) target = evt.target; else if (evt.srcElement) target = evt.srcElement; // handle safari bug if (target.nodeType == 3) target = target.parentNode; var i = lightbox.iDiv; // left-btn click: if (target.className.substring (0, 1) == 'l') { lightbox.iImage -= 1; if (lightbox.iImage < 0) lightbox.iImage = lightbox.ar_divLightbox [i].image.length - 1; } // right-btn click: else if (target.className.substring (0, 1) == 'r') { lightbox.iImage += 1; if (lightbox.iImage >= lightbox.ar_divLightbox [i].image.length) lightbox.iImage = 0; } lightbox.RefreshDisplay (); }; /*------------------------------------ BtnMouseOver ------------------------------------*/ lightbox.BtnMouseOver = function (e) { var evt = window.event || e; var target; if (evt.target) target = evt.target; else if (evt.srcElement) target = evt.srcElement; // handle safari bug if (target.nodeType == 3) target = target.parentNode; // left-btn: if (target.className.substring (0, 1) == 'l') { lightbox.imgLeft.style.opacity = '1'; lightbox.imgLeft.style.filter = 'alpha(opacity=100)'; } // right-btn: else if (target.className.substring (0, 1) == 'r') { lightbox.imgRight.style.opacity = '1'; lightbox.imgRight.style.filter = 'alpha(opacity=100)'; } document.body.style.cursor = 'pointer'; }; /*------------------------------------ BtnMouseOut ------------------------------------*/ lightbox.BtnMouseOut = function (e) { var evt = window.event || e; var target; if (evt.target) target = evt.target; else if (evt.srcElement) target = evt.srcElement; // handle safari bug if (target.nodeType == 3) target = target.parentNode; // left-btn: if (target.className.substring (0, 1) == 'l') { lightbox.imgLeft.style.opacity = '0.2'; lightbox.imgLeft.style.filter = 'alpha(opacity=20)'; } // right-btn: else if (target.className.substring (0, 1) == 'r') { lightbox.imgRight.style.opacity = '0.2'; lightbox.imgRight.style.filter = 'alpha(opacity=20)'; } document.body.style.cursor = 'default'; }; /*------------------------------------ CloseMouseOver ------------------------------------*/ lightbox.CloseMouseOver = function () { lightbox.imgClose_small.style.opacity = '1'; lightbox.imgClose_small.style.filter = 'alpha(opacity=100)'; }; /*------------------------------------ CloseMouseOut ------------------------------------*/ lightbox.CloseMouseOut = function () { lightbox.imgClose_small.style.opacity = '0'; lightbox.imgClose_small.style.filter = 'alpha(opacity=0)'; }; /*------------------------------------ CreateLightbox ------------------------------------*/ lightbox.CreateLightbox = function () { // backscreen div var div = document.createElement ('div'); div.style.position = 'absolute'; div.style.top = '0'; div.style.left = '0'; div.style.width = '100%'; div.style.height = Math.max (document.body.offsetHeight, 800) + 'px'; div.style.visibility = 'hidden'; div.style.backgroundColor = '#000'; div.style.opacity = '0'; div.style.filter = 'alpha(opacity=0)'; lightbox.divBackscreen = div; document.body.appendChild (lightbox.divBackscreen); // lightbox space div div = document.createElement ('div'); div.style.position = 'absolute'; div.style.top = '0'; div.style.left = '0'; div.style.width = '100%'; div.style.height = Math.max (document.body.offsetHeight, 800) + 'px'; div.style.visibility = 'hidden'; div.style.textAlign = 'center'; lightbox.divLightboxSpace = div; document.body.appendChild (lightbox.divLightboxSpace); // lightbox container div div = document.createElement ('div'); div.style.width = '280px'; div.style.height = '180px'; div.style.backgroundColor = '#FFF'; div.style.margin = '50px auto 0 auto'; div.style.textAlign = 'left'; div.style.padding = '8px'; lightbox.divLightboxContainer = div; lightbox.divLightboxSpace.appendChild (lightbox.divLightboxContainer); // image container div div = document.createElement ('div'); div.style.position = 'relative'; div.style.width = '100%'; div.style.height = '180px'; lightbox.divImageContainer = div; lightbox.divLightboxContainer.appendChild (lightbox.divImageContainer); // small close-button image var img = document.createElement ('img'); img.src = lightbox.strImageFolder + 'close16.png'; img.style.width = '16px'; img.style.position = 'absolute'; img.style.top = '0'; img.style.left = '96.75%'; img.style.zIndex = '3'; img.style.opacity = '0'; img.style.filter = 'alpha(opacity=0)'; var left = lightbox.divImageContainer.offsetWidth - 16; img.style.left = left + 'px'; lightbox.imgClose_small = img; lightbox.divImageContainer.appendChild (lightbox.imgClose_small); // details container div div = document.createElement ('div'); div.style.width = '100%'; div.style.height = '0px'; div.style.overflow = 'hidden'; div.style.fontSize = '12px'; lightbox.divDetailContainer = div; lightbox.divLightboxContainer.appendChild (lightbox.divDetailContainer); // close-button image img = document.createElement ('img'); img.src = lightbox.strImageFolder + 'close.png'; img.style.cssFloat = 'right'; img.style.styleFloat = 'right'; img.style.padding = '4px'; img.style.border = 'none'; img.style.width = '96px'; img.style.height = '32px'; var link = document.createElement ('a'); link.setAttribute ('href', '#'); link.style.border = 'none'; lightbox.imgClose = img; link.appendChild (lightbox.imgClose); lightbox.divDetailContainer.appendChild (link); // paragraph containing details var para = document.createElement ('p'); para.style.padding = '8px'; para.style.cssFloat = 'left'; para.style.styleFloat = 'left'; para.style.color = '#000'; para.style.padding = '6px 6px 2px 6px'; para.style.margin = '0'; para.style.fontFamily = 'Trebuchet MS'; lightbox.paraDetails = para; lightbox.divDetailContainer.appendChild (lightbox.paraDetails); // paragraph containing index info para = document.createElement ('p'); para.style.width = '25%'; para.style.color = '#9C9C9C'; para.style.clear = 'left'; para.style.padding = '0 0 0 6px'; para.style.margin = '0'; para.style.fontSize = '12px'; lightbox.paraIndexInfo = para; lightbox.divDetailContainer.appendChild (lightbox.paraIndexInfo); // left- and right-button divs for (var i = 1; i <= 2; i++) { var div = document.createElement ('div'); div.style.width = '45%'; div.style.height = '100%'; div.style.visibility = 'hidden'; div.style.position = 'relative'; div.style.zIndex = 2; div.style.background = 'url(' + lightbox.strImageFolder + 'clear.gif)'; if (i == 1) // right { div.className = 'r_btn'; div.style.cssFloat = 'right'; div.style.styleFloat = 'right'; lightbox.divRightBtn = div; lightbox.divImageContainer.appendChild (lightbox.divRightBtn); } else if (i == 2) // left { div.className = 'l_btn'; lightbox.divLeftBtn = div; lightbox.divImageContainer.appendChild (lightbox.divLeftBtn); } } // current image displayed var img = new Image (); img.style.position = 'absolute'; img.style.top = '0'; img.style.left = '0'; img.style.opacity = '0'; img.style.filter = 'alpha(opacity=0)'; lightbox.AddEventListener (img, 'load', lightbox.LoadComplete); lightbox.imgCurrent = img; lightbox.divImageContainer.appendChild (lightbox.imgCurrent); // left-button image img = document.createElement ('img'); img.className = 'l_btn'; img.src = lightbox.strImageFolder + 'left.png'; img.style.margin = '55% 2%'; img.style.opacity = '0.2'; img.style.filter = 'alpha(opacity=20)'; lightbox.imgLeft = img; lightbox.divLeftBtn.appendChild (lightbox.imgLeft); // right-button image img = document.createElement ('img'); img.className = 'r_btn'; img.src = lightbox.strImageFolder + 'right.png'; img.style.cssFloat = 'right'; img.style.styleFloat = 'right'; img.style.margin = '55% 2%'; img.style.opacity = '0.2'; img.style.filter = 'alpha(opacity=20)'; lightbox.imgRight = img; lightbox.divRightBtn.appendChild (lightbox.imgRight); // loading-icon image img = document.createElement ('img'); img.src = lightbox.strImageFolder + 'loading.gif'; img.style.visibility = 'hidden'; img.style.position = 'absolute'; img.style.top = '40%'; var left = (lightbox.divImageContainer.offsetWidth / 2) - (img.offsetWidth / 2); img.style.left = '' + left + 'px'; lightbox.imgLoading = img; lightbox.divImageContainer.appendChild (lightbox.imgLoading); }; /*------------------------------------ FadeInBackscreen ------------------------------------*/ lightbox.FadeInBackscreen = function () { var opMax = 85; lightbox.divBackscreen.style.visibility = 'visible'; if (lightbox.opBackscreen < opMax) { lightbox.opBackscreen += 20; lightbox.divBackscreen.style.opacity = lightbox.opBackscreen / 100; lightbox.divBackscreen.style.filter = 'alpha(opacity=' + lightbox.opBackscreen + ')'; setTimeout (lightbox.FadeInBackscreen, 1000 / 45); } else { lightbox.opBackscreen = opMax; lightbox.divBackscreen.style.opacity = opMax / 100; lightbox.divBackscreen.style.filter = 'alpha(opacity=' + opMax + ')'; } }; /*------------------------------------ FadeInDetails ------------------------------------*/ lightbox.FadeInDetails = function () { if (lightbox.divDetailContainer.offsetHeight < lightbox.detailHeight) { lightbox.divDetailContainer.style.height = '' + (lightbox.divDetailContainer.offsetHeight + 8) + 'px'; var height = lightbox.divLightboxContainer.style.height; height = parseInt (height.substring (0, 3), 10); lightbox.divLightboxContainer.style.height = (height + 8) + 'px'; setTimeout (lightbox.FadeInDetails, 1000 / 45); } else { lightbox.divDetailContainer.style.height = '' + lightbox.detailHeight + 'px'; lightbox.divLeftBtn.style.visibility = 'visible'; lightbox.divRightBtn.style.visibility = 'visible'; lightbox.imgClose_small.style.visibility = 'visible'; } }; /*------------------------------------ FadeInImage ------------------------------------*/ lightbox.FadeInImage = function () { if (lightbox.opImage < 100) { lightbox.opImage += 15; lightbox.imgCurrent.style.opacity = lightbox.opImage / 100; lightbox.imgCurrent.style.filter = 'alpha(opacity=' + lightbox.opImage + ')'; setTimeout (lightbox.FadeInImage, 1000 / 25); } else { lightbox.opImage = 100; lightbox.imgCurrent.style.opacity = 1; lightbox.imgCurrent.style.filter = 'alpha(opacity=100)'; // adjust description width lightbox.paraDetails.style.width = (lightbox.divLightboxContainer.offsetWidth - lightbox.imgClose.offsetWidth - 40) + 'px'; // -40 for any padding // adjust small close-btn position var left = lightbox.divImageContainer.offsetWidth - lightbox.imgClose_small.offsetWidth; lightbox.imgClose_small.style.left = left + 'px'; setTimeout (lightbox.FadeInDetails, 300); } }; /*------------------------------------ FadeOutBackscreen ------------------------------------*/ lightbox.FadeOutBackscreen = function () { if (lightbox.opBackscreen > 0) { lightbox.opBackscreen -= 20; lightbox.divBackscreen.style.opacity = lightbox.opBackscreen / 100; lightbox.divBackscreen.style.filter = 'alpha(opacity=' + lightbox.opBackscreen + ')'; setTimeout (lightbox.FadeOutBackscreen, 1000 / 45); } else { lightbox.opBackscreen = 0; lightbox.divBackscreen.style.opacity = '0'; lightbox.divBackscreen.style.filter = 'alpha(opacity=0)'; lightbox.divBackscreen.style.visibility = 'hidden'; } }; /*------------------------------------ GetElementsByClass ------------------------------------*/ lightbox.GetElementsByClass = function (className) { var elementArray = []; if (typeof document.all != 'undefined') elementArray = document.all; else elementArray = document.getElementsByTagName ("*"); var matchedArray = []; var pattern = new RegExp ("(^|)" + className + "(|$)"); for (var i = 0; i < elementArray.length; i++) if (pattern.test (elementArray[i].className)) matchedArray [matchedArray.length] = elementArray [i]; return matchedArray; }; /*------------------------------------ LoadBegin ------------------------------------*/ lightbox.LoadBegin = function () { lightbox.imgLoading.style.visibility = 'visible'; var i = lightbox.iDiv; var j = lightbox.iImage; lightbox.imgCurrent.src = lightbox.ar_divLightbox[i].image[j]; }; /*------------------------------------ LoadComplete ------------------------------------*/ lightbox.LoadComplete = function () { lightbox.imgLoading.style.visibility = 'hidden'; if (!lightbox.bRefreshed) // give time to refresh setTimeout (lightbox.ResizeDisplay, 300); else lightbox.ResizeDisplay (); }; /*------------------------------------ RefreshDisplay ------------------------------------*/ lightbox.RefreshDisplay = function () { lightbox.Reset (); lightbox.LoadBegin (); // refresh description var i = lightbox.iDiv; var j = lightbox.iImage; // remove any previous text nodes if (lightbox.paraDetails.childNodes.length > 0) lightbox.paraDetails.removeChild (lightbox.paraDetails.childNodes[0]); var desc = lightbox.ar_divLightbox [i].desc [j]; if (!desc) { desc = "No Description"; lightbox.paraDetails.style.color = "#FFF"; } else lightbox.paraDetails.style.color = "#000"; var text = document.createTextNode (desc); lightbox.paraDetails.appendChild (text); // refresh index info var info = 'Image ' + (j +1) + ' of ' + lightbox.ar_divLightbox [i].image.length; // remove any previous text nodes if (lightbox.paraIndexInfo.childNodes.length > 0) lightbox.paraIndexInfo.removeChild (lightbox.paraIndexInfo.childNodes[0]); text = document.createTextNode (info); lightbox.paraIndexInfo.appendChild (text); lightbox.detailHeight = lightbox.paraDetails.offsetHeight + lightbox.paraIndexInfo.offsetHeight; // adjust loading-icon position var left = (lightbox.divImageContainer.offsetWidth / 2) - (lightbox.imgLoading.offsetWidth / 2); lightbox.imgLoading.style.left = left + 'px'; lightbox.bRefreshed = true; }; /*------------------------------------ Reset ------------------------------------*/ lightbox.Reset = function () { lightbox.divImageContainer.removeChild (lightbox.imgCurrent); var img = new Image (); img.style.position = 'absolute'; img.style.top = '0'; img.style.left = '0'; img.style.opacity = '0'; img.style.filter = 'alpha(opacity=0)'; lightbox.AddEventListener (img, 'load', lightbox.LoadComplete); lightbox.imgCurrent = img; lightbox.divImageContainer.appendChild (lightbox.imgCurrent); lightbox.opImage = 0; lightbox.detailHeight = 0; lightbox.imgCurrent.style.opacity = '0'; lightbox.imgCurrent.style.filter = 'alpha(opacity=0)'; lightbox.imageWidth = 0; lightbox.imageHeight = 0; lightbox.divDetailContainer.style.height = '0px'; lightbox.divLeftBtn.style.visibility = 'hidden'; lightbox.divRightBtn.style.visibility = 'hidden'; lightbox.imgClose_small.style.visibility = 'hidden'; lightbox.bRefreshed = false; }; /*------------------------------------ ResizeDisplay ------------------------------------*/ lightbox.ResizeDisplay = function () { var ratio; var width = lightbox.imgCurrent.offsetWidth; var height = lightbox.imgCurrent.offsetHeight; if (width > height) { ratio = height / width; // new image width if (width > lightbox.maxWidth) width = lightbox.maxWidth; else if (width < lightbox.minWidth) width = lightbox.minWidth; // new image height height = width * ratio; } else if (width < height) { ratio = width / height; // new image height if (height > lightbox.maxHeight) height = lightbox.maxHeight; else if (height < lightbox.minHeight) height = lightbox.minHeight; // new image width width = height * ratio; } lightbox.imageWidth = parseInt (width, 10); lightbox.imageHeight = parseInt (height, 10); lightbox.imgCurrent.style.width = '' + lightbox.imageWidth + 'px'; lightbox.imgCurrent.style.height = '' + lightbox.imageHeight + 'px'; var div = lightbox.divLightboxContainer; // width increment (step) var width = parseInt (div.style.width.substring (0, 3), 10); if (width > lightbox.imageWidth) lightbox.stepWidth = - ((width - lightbox.imageWidth) / 12); else if (width < lightbox.imageWidth) lightbox.stepWidth = (lightbox.imageWidth - width) / 12; // height increment (step) var height = parseInt (div.style.height.substring (0, 3), 10); if (height > lightbox.imageHeight) lightbox.stepHeight = - ((height - lightbox.imageHeight) / 12); else if (height < lightbox.imageHeight) lightbox.stepHeight = (lightbox.imageHeight - height) / 12; setTimeout (lightbox.ResizeWidth, 150); }; /*------------------------------------ ResizeWidth ------------------------------------*/ lightbox.ResizeWidth = function () { var div = lightbox.divLightboxContainer; var width = parseInt (div.style.width.substring (0, 3), 10); if (width != lightbox.imageWidth) { width += lightbox.stepWidth; div.style.width = width + 'px'; lightbox.divImageContainer.style.width = width + 'px'; if ( (width < lightbox.imageWidth - 20) || (width > lightbox.imageWidth + 20) ) { setTimeout (lightbox.ResizeWidth, 1000 / 25); } else { div.style.width = lightbox.imageWidth + 'px'; lightbox.divImageContainer.style.width = lightbox.imageWidth + 'px'; setTimeout (lightbox.ResizeHeight, 300); } } // end width != light... else lightbox.ResizeHeight (); }; /*------------------------------------ ResizeHeight ------------------------------------*/ lightbox.ResizeHeight = function () { var div = lightbox.divLightboxContainer; var height = parseInt (div.style.height.substring (0, 3), 10); height += lightbox.stepHeight; div.style.height = height + 'px'; lightbox.divImageContainer.style.height = height + 'px'; if ( (height < lightbox.imageHeight - 20) || (height > lightbox.imageHeight + 20) ) { setTimeout (lightbox.ResizeHeight, 1000 / 25); } else { div.style.height = lightbox.imageHeight + 'px'; lightbox.divImageContainer.style.height = lightbox.imageHeight + 'px'; setTimeout (lightbox.FadeInImage, 200); } }; /*------------------------------------ SetupLightbox ------------------------------------*/ lightbox.SetupLightbox = function () { lightbox.ar_divLightbox = lightbox.GetElementsByClass ("lightbox"); // for all images in all lightbox divs: for (var i = 0; i < lightbox.ar_divLightbox.length; i++) { var ar_img = lightbox.ar_divLightbox[i].getElementsByTagName ('img'); lightbox.ar_divLightbox[i].image = []; lightbox.ar_divLightbox[i].desc = []; for (var j=0; j < ar_img.length; j++) { // store image location lightbox.ar_divLightbox[i].image[j] = ar_img[j].parentNode.getAttribute ('href'); // store image description lightbox.ar_divLightbox[i].desc[j] = ar_img[j].getAttribute ('title'); // set links of images to null ar_img[j].parentNode.setAttribute ('href', '#'); // give each image a unique id ar_img[j].setAttribute ('id', '' + i + '_' + j); } } }; /*------------------------------------ SetupListeners ------------------------------------*/ lightbox.SetupListeners = function () { // click handle for each thumbnail for (var i = 0; i < lightbox.ar_divLightbox.length; i++) { var ar_image = lightbox.ar_divLightbox[i].getElementsByTagName ('img'); for (var j=0; j < ar_image.length; j++) { lightbox.AddEventListener (ar_image[j], 'click', lightbox.ThumbClickHandle); } } // mouseover and mouseout for left/right btns lightbox.AddEventListener (lightbox.divLeftBtn, 'mouseover', lightbox.BtnMouseOver); lightbox.AddEventListener (lightbox.divRightBtn, 'mouseover', lightbox.BtnMouseOver); lightbox.AddEventListener (lightbox.divLeftBtn, 'mouseout', lightbox.BtnMouseOut); lightbox.AddEventListener (lightbox.divRightBtn, 'mouseout', lightbox.BtnMouseOut); // img click lightbox.AddEventListener (lightbox.imgLeft, 'click', lightbox.BtnClickHandle); // click handle for left- and right-button divs lightbox.AddEventListener (lightbox.divLeftBtn, 'click', lightbox.BtnClickHandle); lightbox.AddEventListener (lightbox.divRightBtn, 'click', lightbox.BtnClickHandle); // close button lightbox.AddEventListener (lightbox.imgClose, 'click', lightbox.Stop); lightbox.AddEventListener (lightbox.imgClose_small, 'click', lightbox.Stop); lightbox.AddEventListener (lightbox.imgClose_small, 'mouseover', lightbox.CloseMouseOver); lightbox.AddEventListener (lightbox.imgClose_small, 'mouseout', lightbox.CloseMouseOut); }; /*------------------------------------ Start ------------------------------------*/ lightbox.Start = function () { lightbox.FadeInBackscreen (); lightbox.divLightboxSpace.style.visibility = 'visible'; lightbox.RefreshDisplay (); }; /*------------------------------------ Stop ------------------------------------*/ lightbox.Stop = function () { lightbox.FadeOutBackscreen (); lightbox.imgLoading.style.visibility = 'hidden'; lightbox.divLightboxSpace.style.visibility = 'hidden'; lightbox.Reset (); }; /*------------------------------------ ThumbClickHandle ------------------------------------*/ lightbox.ThumbClickHandle = function (e) { var target; var evt = window.event || e; if (evt.target) target = evt.target; else if (evt.srcElement) target = evt.srcElement; // handle safari bug if (target.nodeType == 3) target = target.parentNode; var i = target.id.substr (0); i = parseInt (i, 10); var j = target.id.substr (target.id.length -1); j = parseInt (j, 10); lightbox.iDiv = i; lightbox.iImage = j; lightbox.Start (); }; window.onload = lightbox.Init;