http://2014hs.igem.org/wiki/index.php?title=Team:Lethbridge_Canada/js_lightbox&feed=atom&action=history
Team:Lethbridge Canada/js lightbox - Revision history
2024-03-28T22:50:09Z
Revision history for this page on the wiki
MediaWiki 1.16.5
http://2014hs.igem.org/wiki/index.php?title=Team:Lethbridge_Canada/js_lightbox&diff=22618&oldid=prev
Dinula98: Created page with "// ----------------------------------------------------------------------------------- // // Lightbox v2.03 // by Lokesh Dhakar - http://www.huddletogether.com // 4/9/06 // // Fo..."
2014-06-20T13:44:43Z
<p>Created page with "// ----------------------------------------------------------------------------------- // // Lightbox v2.03 // by Lokesh Dhakar - http://www.huddletogether.com // 4/9/06 // // Fo..."</p>
<p><b>New page</b></p><div>// -----------------------------------------------------------------------------------<br />
//<br />
// Lightbox v2.03<br />
// by Lokesh Dhakar - http://www.huddletogether.com<br />
// 4/9/06<br />
//<br />
// For more information on this script, visit:<br />
// http://huddletogether.com/projects/lightbox2/<br />
//<br />
// Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/<br />
// <br />
// Credit also due to those who have helped, inspired, and made their code available to the public.<br />
// Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others.<br />
//<br />
// Lightbox v2.03a<br />
// by Dynamicdrive.com- http://www.dynamicdrive.com<br />
// Nov 29th, 2007<br />
// Added ability for the caption ("title" attr of link) to be optionally hyperlinked, by throwing in a "rev" attr containing the desired link<br />
// -----------------------------------------------------------------------------------<br />
/*<br />
<br />
Table of Contents<br />
-----------------<br />
Configuration<br />
Global Variables<br />
<br />
Extending Built-in Objects <br />
- Object.extend(Element)<br />
- Array.prototype.removeDuplicates()<br />
- Array.prototype.empty()<br />
<br />
Lightbox Class Declaration<br />
- initialize()<br />
- start()<br />
- changeImage()<br />
- resizeImageContainer()<br />
- showImage()<br />
- updateDetails()<br />
- updateNav()<br />
- enableKeyboardNav()<br />
- disableKeyboardNav()<br />
- keyboardAction()<br />
- preloadNeighborImages()<br />
- end()<br />
<br />
Miscellaneous Functions<br />
- getPageScroll()<br />
- getPageSize()<br />
- getKey()<br />
- listenKey()<br />
- showSelectBoxes()<br />
- hideSelectBoxes()<br />
- showFlash()<br />
- hideFlash()<br />
- pause()<br />
- initLightbox()<br />
<br />
Function Calls<br />
- addLoadEvent(initLightbox)<br />
<br />
*/<br />
// -----------------------------------------------------------------------------------<br />
<br />
//<br />
// Configuration<br />
//<br />
var fileLoadingImage = "images/loading.gif"; <br />
var fileBottomNavCloseImage = "images/closelabel.gif";<br />
<br />
var animate = true; // toggles resizing animations<br />
var resizeSpeed = 7; // controls the speed of the image resizing animations (1=slowest and 10=fastest)<br />
<br />
var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable<br />
<br />
// -----------------------------------------------------------------------------------<br />
<br />
//<br />
// Global Variables<br />
//<br />
var imageArray = new Array;<br />
var activeImage;<br />
<br />
if(animate == true){<br />
overlayDuration = 0.2; // shadow fade in/out duration<br />
if(resizeSpeed > 10){ resizeSpeed = 10;}<br />
if(resizeSpeed < 1){ resizeSpeed = 1;}<br />
resizeDuration = (11 - resizeSpeed) * 0.15;<br />
} else { <br />
overlayDuration = 0;<br />
resizeDuration = 0;<br />
}<br />
<br />
// -----------------------------------------------------------------------------------<br />
<br />
//<br />
// Additional methods for Element added by SU, Couloir<br />
// - further additions by Lokesh Dhakar (huddletogether.com)<br />
//<br />
Object.extend(Element, {<br />
getWidth: function(element) {<br />
element = $(element);<br />
return element.offsetWidth; <br />
},<br />
setWidth: function(element,w) {<br />
element = $(element);<br />
element.style.width = w +"px";<br />
},<br />
setHeight: function(element,h) {<br />
element = $(element);<br />
element.style.height = h +"px";<br />
},<br />
setTop: function(element,t) {<br />
element = $(element);<br />
element.style.top = t +"px";<br />
},<br />
setSrc: function(element,src) {<br />
element = $(element);<br />
element.src = src; <br />
},<br />
setHref: function(element,href) {<br />
element = $(element);<br />
element.href = href; <br />
},<br />
setInnerHTML: function(element,content) {<br />
element = $(element);<br />
element.innerHTML = content;<br />
}<br />
});<br />
<br />
// -----------------------------------------------------------------------------------<br />
<br />
//<br />
// Extending built-in Array object<br />
// - array.removeDuplicates()<br />
// - array.empty()<br />
//<br />
Array.prototype.removeDuplicates = function () {<br />
for(i = 0; i < this.length; i++){<br />
for(j = this.length-1; j>i; j--){ <br />
if(this[i][0] == this[j][0]){<br />
this.splice(j,1);<br />
}<br />
}<br />
}<br />
}<br />
<br />
// -----------------------------------------------------------------------------------<br />
<br />
Array.prototype.empty = function () {<br />
for(i = 0; i <= this.length; i++){<br />
this.shift();<br />
}<br />
}<br />
<br />
// -----------------------------------------------------------------------------------<br />
<br />
//<br />
// Lightbox Class Declaration<br />
// - initialize()<br />
// - start()<br />
// - changeImage()<br />
// - resizeImageContainer()<br />
// - showImage()<br />
// - updateDetails()<br />
// - updateNav()<br />
// - enableKeyboardNav()<br />
// - disableKeyboardNav()<br />
// - keyboardNavAction()<br />
// - preloadNeighborImages()<br />
// - end()<br />
//<br />
// Structuring of code inspired by Scott Upton (http://www.uptonic.com/)<br />
//<br />
var Lightbox = Class.create();<br />
<br />
Lightbox.prototype = {<br />
<br />
// initialize()<br />
// Constructor runs on completion of the DOM loading. Loops through anchor tags looking for <br />
// 'lightbox' references and applies onclick events to appropriate links. The 2nd section of<br />
// the function inserts html at the bottom of the page which is used to display the shadow <br />
// overlay and the image container.<br />
//<br />
initialize: function() { <br />
if (!document.getElementsByTagName){ return; }<br />
var anchors = document.getElementsByTagName('a');<br />
var areas = document.getElementsByTagName('area');<br />
<br />
// loop through all anchor tags<br />
for (var i=0; i<anchors.length; i++){<br />
var anchor = anchors[i];<br />
<br />
var relAttribute = String(anchor.getAttribute('rel'));<br />
<br />
// use the string.match() method to catch 'lightbox' references in the rel attribute<br />
if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){<br />
anchor.onclick = function () {myLightbox.start(this); return false;}<br />
}<br />
}<br />
<br />
// loop through all area tags<br />
// todo: combine anchor & area tag loops<br />
for (var i=0; i< areas.length; i++){<br />
var area = areas[i];<br />
<br />
var relAttribute = String(area.getAttribute('rel'));<br />
<br />
// use the string.match() method to catch 'lightbox' references in the rel attribute<br />
if (area.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){<br />
area.onclick = function () {myLightbox.start(this); return false;}<br />
}<br />
}<br />
<br />
// The rest of this code inserts html at the bottom of the page that looks similar to this:<br />
//<br />
// <div id="overlay"></div><br />
// <div id="lightbox"><br />
// <div id="outerImageContainer"><br />
// <div id="imageContainer"><br />
// <img id="lightboxImage"><br />
// <div style="" id="hoverNav"><br />
// <a href="#" id="prevLink"></a><br />
// <a href="#" id="nextLink"></a><br />
// </div><br />
// <div id="loading"><br />
// <a href="#" id="loadingLink"><br />
// <img src="images/loading.gif"><br />
// </a><br />
// </div><br />
// </div><br />
// </div><br />
// <div id="imageDataContainer"><br />
// <div id="imageData"><br />
// <div id="imageDetails"><br />
// <span id="caption"></span><br />
// <span id="numberDisplay"></span><br />
// </div><br />
// <div id="bottomNav"><br />
// <a href="#" id="bottomNavClose"><br />
// <img src="images/close.gif"><br />
// </a><br />
// </div><br />
// </div><br />
// </div><br />
// </div><br />
<br />
<br />
var objBody = document.getElementsByTagName("body").item(0);<br />
<br />
var objOverlay = document.createElement("div");<br />
objOverlay.setAttribute('id','overlay');<br />
objOverlay.style.display = 'none';<br />
objOverlay.onclick = function() { myLightbox.end(); }<br />
objBody.appendChild(objOverlay);<br />
<br />
var objLightbox = document.createElement("div");<br />
objLightbox.setAttribute('id','lightbox');<br />
objLightbox.style.display = 'none';<br />
objLightbox.onclick = function(e) { // close Lightbox is user clicks shadow overlay<br />
if (!e) var e = window.event;<br />
var clickObj = Event.element(e).id;<br />
if ( clickObj == 'lightbox') {<br />
myLightbox.end();<br />
}<br />
};<br />
objBody.appendChild(objLightbox);<br />
<br />
var objOuterImageContainer = document.createElement("div");<br />
objOuterImageContainer.setAttribute('id','outerImageContainer');<br />
objLightbox.appendChild(objOuterImageContainer);<br />
<br />
// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.<br />
// If animations are turned off, it will be hidden as to prevent a flicker of a<br />
// white 250 by 250 box.<br />
if(animate){<br />
Element.setWidth('outerImageContainer', 250);<br />
Element.setHeight('outerImageContainer', 250); <br />
} else {<br />
Element.setWidth('outerImageContainer', 1);<br />
Element.setHeight('outerImageContainer', 1); <br />
}<br />
<br />
var objImageContainer = document.createElement("div");<br />
objImageContainer.setAttribute('id','imageContainer');<br />
objOuterImageContainer.appendChild(objImageContainer);<br />
<br />
var objLightboxImage = document.createElement("img");<br />
objLightboxImage.setAttribute('id','lightboxImage');<br />
objImageContainer.appendChild(objLightboxImage);<br />
<br />
var objHoverNav = document.createElement("div");<br />
objHoverNav.setAttribute('id','hoverNav');<br />
objImageContainer.appendChild(objHoverNav);<br />
<br />
var objPrevLink = document.createElement("a");<br />
objPrevLink.setAttribute('id','prevLink');<br />
objPrevLink.setAttribute('href','#');<br />
objHoverNav.appendChild(objPrevLink);<br />
<br />
var objNextLink = document.createElement("a");<br />
objNextLink.setAttribute('id','nextLink');<br />
objNextLink.setAttribute('href','#');<br />
objHoverNav.appendChild(objNextLink);<br />
<br />
var objLoading = document.createElement("div");<br />
objLoading.setAttribute('id','loading');<br />
objImageContainer.appendChild(objLoading);<br />
<br />
var objLoadingLink = document.createElement("a");<br />
objLoadingLink.setAttribute('id','loadingLink');<br />
objLoadingLink.setAttribute('href','#');<br />
objLoadingLink.onclick = function() { myLightbox.end(); return false; }<br />
objLoading.appendChild(objLoadingLink);<br />
<br />
var objLoadingImage = document.createElement("img");<br />
objLoadingImage.setAttribute('src', fileLoadingImage);<br />
objLoadingLink.appendChild(objLoadingImage);<br />
<br />
var objImageDataContainer = document.createElement("div");<br />
objImageDataContainer.setAttribute('id','imageDataContainer');<br />
objImageDataContainer.className = 'clearfix';<br />
objLightbox.appendChild(objImageDataContainer);<br />
<br />
var objImageData = document.createElement("div");<br />
objImageData.setAttribute('id','imageData');<br />
objImageDataContainer.appendChild(objImageData);<br />
<br />
var objImageDetails = document.createElement("div");<br />
objImageDetails.setAttribute('id','imageDetails');<br />
objImageData.appendChild(objImageDetails);<br />
<br />
var objCaption = document.createElement("span");<br />
objCaption.setAttribute('id','caption');<br />
objImageDetails.appendChild(objCaption);<br />
<br />
var objNumberDisplay = document.createElement("span");<br />
objNumberDisplay.setAttribute('id','numberDisplay');<br />
objImageDetails.appendChild(objNumberDisplay);<br />
<br />
var objBottomNav = document.createElement("div");<br />
objBottomNav.setAttribute('id','bottomNav');<br />
objImageData.appendChild(objBottomNav);<br />
<br />
var objBottomNavCloseLink = document.createElement("a");<br />
objBottomNavCloseLink.setAttribute('id','bottomNavClose');<br />
objBottomNavCloseLink.setAttribute('href','#');<br />
objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }<br />
objBottomNav.appendChild(objBottomNavCloseLink);<br />
<br />
var objBottomNavCloseImage = document.createElement("img");<br />
objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);<br />
objBottomNavCloseLink.appendChild(objBottomNavCloseImage);<br />
},<br />
<br />
//<br />
// start()<br />
// Display overlay and lightbox. If image is part of a set, add siblings to imageArray.<br />
//<br />
start: function(imageLink) { <br />
<br />
function getImageTitle(anchor){ //DynamicDrive.com added function that allows the caption("title") to be linked ("rev").<br />
var ddimageTitle=anchor.getAttribute('title')<br />
var ddimageTitleURL=(ddimageTitle!=null && ddimageTitle!="")? anchor.getAttribute('rev') : null<br />
return ddimageTitleFinal=(ddimageTitleURL!=null && ddimageTitleURL!="")? '<a href="'+ddimageTitleURL+'" class="ddcaptionurl">'+ddimageTitle+'</a>' : ddimageTitle<br />
};<br />
<br />
hideSelectBoxes();<br />
hideFlash();<br />
<br />
// stretch overlay to fill page and fade in<br />
var arrayPageSize = getPageSize();<br />
Element.setHeight('overlay', arrayPageSize[1]);<br />
<br />
new Effect.Appear('overlay', { duration: overlayDuration, from: 0.0, to: 0.8 });<br />
<br />
imageArray = [];<br />
imageNum = 0; <br />
<br />
if (!document.getElementsByTagName){ return; }<br />
var anchors = document.getElementsByTagName('a');<br />
<br />
// if image is NOT part of a set..<br />
if((imageLink.getAttribute('rel') == 'lightbox')){<br />
// add single image to imageArray<br />
imageArray.push(new Array(imageLink.getAttribute('href'), getImageTitle(imageLink))); <br />
} else {<br />
// if image is part of a set..<br />
<br />
// loop through anchors, find other images in set, and add them to imageArray<br />
for (var i=0; i<anchors.length; i++){<br />
var anchor = anchors[i];<br />
if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){<br />
imageArray.push(new Array(anchor.getAttribute('href'), getImageTitle(anchor)));<br />
}<br />
}<br />
imageArray.removeDuplicates();<br />
while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}<br />
}<br />
<br />
// calculate top offset for the lightbox and display <br />
var arrayPageScroll = getPageScroll();<br />
var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);<br />
<br />
Element.setTop('lightbox', lightboxTop);<br />
Element.show('lightbox');<br />
<br />
this.changeImage(imageNum);<br />
},<br />
<br />
//<br />
// changeImage()<br />
// Hide most elements and preload image in preparation for resizing image container.<br />
//<br />
changeImage: function(imageNum) { <br />
<br />
activeImage = imageNum; // update global var<br />
<br />
// hide elements during transition<br />
if(animate){ Element.show('loading');}<br />
Element.hide('lightboxImage');<br />
Element.hide('hoverNav');<br />
Element.hide('prevLink');<br />
Element.hide('nextLink');<br />
Element.hide('imageDataContainer');<br />
Element.hide('numberDisplay'); <br />
<br />
imgPreloader = new Image();<br />
<br />
// once image is preloaded, resize image container<br />
imgPreloader.onload=function(){<br />
Element.setSrc('lightboxImage', imageArray[activeImage][0]);<br />
myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);<br />
}<br />
imgPreloader.src = imageArray[activeImage][0];<br />
},<br />
<br />
//<br />
// resizeImageContainer()<br />
//<br />
resizeImageContainer: function( imgWidth, imgHeight) {<br />
<br />
// get curren width and height<br />
this.widthCurrent = Element.getWidth('outerImageContainer');<br />
this.heightCurrent = Element.getHeight('outerImageContainer');<br />
<br />
// get new width and height<br />
var widthNew = (imgWidth + (borderSize * 2));<br />
var heightNew = (imgHeight + (borderSize * 2));<br />
<br />
// scalars based on change from old to new<br />
this.xScale = ( widthNew / this.widthCurrent) * 100;<br />
this.yScale = ( heightNew / this.heightCurrent) * 100;<br />
<br />
// calculate size difference between new and old image, and resize if necessary<br />
wDiff = this.widthCurrent - widthNew;<br />
hDiff = this.heightCurrent - heightNew;<br />
<br />
if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }<br />
if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }<br />
<br />
// if new and old image are same size and no scaling transition is necessary, <br />
// do a quick pause to prevent image flicker.<br />
if((hDiff == 0) && (wDiff == 0)){<br />
if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);} <br />
}<br />
<br />
Element.setHeight('prevLink', imgHeight);<br />
Element.setHeight('nextLink', imgHeight);<br />
Element.setWidth( 'imageDataContainer', widthNew);<br />
<br />
this.showImage();<br />
},<br />
<br />
//<br />
// showImage()<br />
// Display image and begin preloading neighbors.<br />
//<br />
showImage: function(){<br />
Element.hide('loading');<br />
new Effect.Appear('lightboxImage', { duration: resizeDuration, queue: 'end', afterFinish: function(){ myLightbox.updateDetails(); } });<br />
this.preloadNeighborImages();<br />
},<br />
<br />
//<br />
// updateDetails()<br />
// Display caption, image number, and bottom nav.<br />
//<br />
updateDetails: function() {<br />
<br />
Element.show('caption');<br />
Element.setInnerHTML( 'caption', imageArray[activeImage][1]);<br />
<br />
// if image is part of set display 'Image x of x' <br />
if(imageArray.length > 1){<br />
Element.show('numberDisplay');<br />
Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);<br />
}<br />
<br />
new Effect.Parallel(<br />
[ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }), <br />
new Effect.Appear('imageDataContainer', { sync: true, duration: resizeDuration }) ], <br />
{ duration: resizeDuration, afterFinish: function() {<br />
// update overlay size and update nav<br />
var arrayPageSize = getPageSize();<br />
Element.setHeight('overlay', arrayPageSize[1]);<br />
myLightbox.updateNav();<br />
}<br />
} <br />
);<br />
},<br />
<br />
//<br />
// updateNav()<br />
// Display appropriate previous and next hover navigation.<br />
//<br />
updateNav: function() {<br />
<br />
Element.show('hoverNav'); <br />
<br />
// if not first image in set, display prev image button<br />
if(activeImage != 0){<br />
Element.show('prevLink');<br />
document.getElementById('prevLink').onclick = function() {<br />
myLightbox.changeImage(activeImage - 1); return false;<br />
}<br />
}<br />
<br />
// if not last image in set, display next image button<br />
if(activeImage != (imageArray.length - 1)){<br />
Element.show('nextLink');<br />
document.getElementById('nextLink').onclick = function() {<br />
myLightbox.changeImage(activeImage + 1); return false;<br />
}<br />
}<br />
<br />
this.enableKeyboardNav();<br />
},<br />
<br />
//<br />
// enableKeyboardNav()<br />
//<br />
enableKeyboardNav: function() {<br />
document.onkeydown = this.keyboardAction; <br />
},<br />
<br />
//<br />
// disableKeyboardNav()<br />
//<br />
disableKeyboardNav: function() {<br />
document.onkeydown = '';<br />
},<br />
<br />
//<br />
// keyboardAction()<br />
//<br />
keyboardAction: function(e) {<br />
if (e == null) { // ie<br />
keycode = event.keyCode;<br />
escapeKey = 27;<br />
} else { // mozilla<br />
keycode = e.keyCode;<br />
escapeKey = e.DOM_VK_ESCAPE;<br />
}<br />
<br />
key = String.fromCharCode(keycode).toLowerCase();<br />
<br />
if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)){ // close lightbox<br />
myLightbox.end();<br />
} else if((key == 'p') || (keycode == 37)){ // display previous image<br />
if(activeImage != 0){<br />
myLightbox.disableKeyboardNav();<br />
myLightbox.changeImage(activeImage - 1);<br />
}<br />
} else if((key == 'n') || (keycode == 39)){ // display next image<br />
if(activeImage != (imageArray.length - 1)){<br />
myLightbox.disableKeyboardNav();<br />
myLightbox.changeImage(activeImage + 1);<br />
}<br />
}<br />
<br />
},<br />
<br />
//<br />
// preloadNeighborImages()<br />
// Preload previous and next images.<br />
//<br />
preloadNeighborImages: function(){<br />
<br />
if((imageArray.length - 1) > activeImage){<br />
preloadNextImage = new Image();<br />
preloadNextImage.src = imageArray[activeImage + 1][0];<br />
}<br />
if(activeImage > 0){<br />
preloadPrevImage = new Image();<br />
preloadPrevImage.src = imageArray[activeImage - 1][0];<br />
}<br />
<br />
},<br />
<br />
//<br />
// end()<br />
//<br />
end: function() {<br />
this.disableKeyboardNav();<br />
Element.hide('lightbox');<br />
new Effect.Fade('overlay', { duration: overlayDuration});<br />
showSelectBoxes();<br />
showFlash();<br />
}<br />
}<br />
<br />
// -----------------------------------------------------------------------------------<br />
<br />
//<br />
// getPageScroll()<br />
// Returns array with x,y page scroll values.<br />
// Core code from - quirksmode.org<br />
//<br />
function getPageScroll(){<br />
<br />
var yScroll;<br />
<br />
if (self.pageYOffset) {<br />
yScroll = self.pageYOffset;<br />
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict<br />
yScroll = document.documentElement.scrollTop;<br />
} else if (document.body) {// all other Explorers<br />
yScroll = document.body.scrollTop;<br />
}<br />
<br />
arrayPageScroll = new Array('',yScroll) <br />
return arrayPageScroll;<br />
}<br />
<br />
// -----------------------------------------------------------------------------------<br />
<br />
//<br />
// getPageSize()<br />
// Returns array with page width, height and window width, height<br />
// Core code from - quirksmode.org<br />
// Edit for Firefox by pHaez<br />
//<br />
function getPageSize(){<br />
<br />
var xScroll, yScroll;<br />
<br />
if (window.innerHeight && window.scrollMaxY) { <br />
xScroll = document.body.scrollWidth;<br />
yScroll = window.innerHeight + window.scrollMaxY;<br />
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac<br />
xScroll = document.body.scrollWidth;<br />
yScroll = document.body.scrollHeight;<br />
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari<br />
xScroll = document.body.offsetWidth;<br />
yScroll = document.body.offsetHeight;<br />
}<br />
<br />
var windowWidth, windowHeight;<br />
if (self.innerHeight) { // all except Explorer<br />
windowWidth = self.innerWidth;<br />
windowHeight = self.innerHeight;<br />
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode<br />
windowWidth = document.documentElement.clientWidth;<br />
windowHeight = document.documentElement.clientHeight;<br />
} else if (document.body) { // other Explorers<br />
windowWidth = document.body.clientWidth;<br />
windowHeight = document.body.clientHeight;<br />
} <br />
<br />
// for small pages with total height less then height of the viewport<br />
if(yScroll < windowHeight){<br />
pageHeight = windowHeight;<br />
} else { <br />
pageHeight = yScroll;<br />
}<br />
<br />
// for small pages with total width less then width of the viewport<br />
if(xScroll < windowWidth){ <br />
pageWidth = windowWidth;<br />
} else {<br />
pageWidth = xScroll;<br />
}<br />
<br />
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) <br />
return arrayPageSize;<br />
}<br />
<br />
// -----------------------------------------------------------------------------------<br />
<br />
//<br />
// getKey(key)<br />
// Gets keycode. If 'x' is pressed then it hides the lightbox.<br />
//<br />
function getKey(e){<br />
if (e == null) { // ie<br />
keycode = event.keyCode;<br />
} else { // mozilla<br />
keycode = e.which;<br />
}<br />
key = String.fromCharCode(keycode).toLowerCase();<br />
<br />
if(key == 'x'){<br />
}<br />
}<br />
<br />
// -----------------------------------------------------------------------------------<br />
<br />
//<br />
// listenKey()<br />
//<br />
function listenKey () { document.onkeypress = getKey; }<br />
<br />
// ---------------------------------------------------<br />
<br />
function showSelectBoxes(){<br />
var selects = document.getElementsByTagName("select");<br />
for (i = 0; i != selects.length; i++) {<br />
selects[i].style.visibility = "visible";<br />
}<br />
}<br />
<br />
// ---------------------------------------------------<br />
<br />
function hideSelectBoxes(){<br />
var selects = document.getElementsByTagName("select");<br />
for (i = 0; i != selects.length; i++) {<br />
selects[i].style.visibility = "hidden";<br />
}<br />
}<br />
<br />
// ---------------------------------------------------<br />
<br />
function showFlash(){<br />
var flashObjects = document.getElementsByTagName("object");<br />
for (i = 0; i != flashObjects.length; i++) {<br />
flashObjects[i].style.visibility = "visible";<br />
}<br />
<br />
var flashEmbeds = document.getElementsByTagName("embeds");<br />
for (i = 0; i != flashEmbeds.length; i++) {<br />
flashEmbeds[i].style.visibility = "visible";<br />
}<br />
}<br />
<br />
// ---------------------------------------------------<br />
<br />
function hideFlash(){<br />
var flashObjects = document.getElementsByTagName("object");<br />
for (i = 0; i != flashObjects.length; i++) {<br />
flashObjects[i].style.visibility = "hidden";<br />
}<br />
<br />
var flashEmbeds = document.getElementsByTagName("embeds");<br />
for (i = 0; i != flashEmbeds.length; i++) {<br />
flashEmbeds[i].style.visibility = "hidden";<br />
}<br />
<br />
}<br />
<br />
<br />
// ---------------------------------------------------<br />
<br />
//<br />
// pause(numberMillis)<br />
// Pauses code execution for specified time. Uses busy code, not good.<br />
// Help from Ran Bar-On [ran2103@gmail.com]<br />
//<br />
<br />
function pause(ms){<br />
var date = new Date();<br />
curDate = null;<br />
do{var curDate = new Date();}<br />
while( curDate - date < ms);<br />
}<br />
/*<br />
function pause(numberMillis) {<br />
var curently = new Date().getTime() + sender;<br />
while (new Date().getTime(); <br />
}<br />
*/<br />
// ---------------------------------------------------<br />
<br />
<br />
<br />
function initLightbox() { myLightbox = new Lightbox(); }<br />
Event.observe(window, 'load', initLightbox, false);</div>
Dinula98