Solved

Is there a way with Lytebox to have the close button on top of the image instead of below

Posted on 2009-06-29
10
2,114 Views
Last Modified: 2012-05-07
Currently I use Lytebox http://dolem.com/lytebox/ as a part of my image gallery. When a user clicks on an image the image pops up wonderfully. However I was wondering if there was a way that I can make the close button (that appears below the image) appear above the image.

Thanx in advance
0
Comment
Question by:SSAFECS
  • 5
  • 5
10 Comments
 
LVL 14

Expert Comment

by:profya
ID: 24740019
Try modifying #lbClose in the css
0
 
LVL 14

Expert Comment

by:profya
ID: 24740066
For example:
#lbClose { position:relative; width: 64px; height: 28px; float: left; top:-300; z-index: 999999 margin-bottom: 1px; }
position:relative; is important
0
 

Author Comment

by:SSAFECS
ID: 24740772
profya:

I tried that your suggestion as well as played with the top: property. Unfortunately it didn't work... In fact after doing it I was unable to see the close button at all.
0
 
LVL 14

Expert Comment

by:profya
ID: 24743987
I can position the close button top but the button does not work.
0
 

Author Comment

by:SSAFECS
ID: 24744003
Profya:

I need the button to work as well :-)
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

Author Comment

by:SSAFECS
ID: 24744017
Profya:

I need the button to work as well :-)
0
 
LVL 14

Expert Comment

by:profya
ID: 24745322
Ok. Finally worked. I was having problems running it on both IE8 and FireFox. Replace the css and the js file with the following:
CSS File:
 
 

#lbOverlay { position: fixed; top: 0; left: 0; z-index: 99998; width: 100%; height: 500px; }

	#lbOverlay.grey { background-color: #000000; }

	#lbOverlay.red { background-color: #330000; }

	#lbOverlay.green { background-color: #003300; }

	#lbOverlay.blue { background-color: #011D50; }

	#lbOverlay.gold { background-color: #666600; }
 

#lbMain { position: absolute; left: 0; width: 100%; z-index: 99999; text-align: center; line-height: 0;  }

#lbMain a img { border: none;}
 

#lbOuterContainer { position: relative; background-color: #fff; width: 200px; height: 200px; margin: 0 auto; }

	#lbOuterContainer.grey { border: 3px solid #888888; }

	#lbOuterContainer.red { border: 3px solid #DD0000; }

	#lbOuterContainer.green { border: 3px solid #00B000; }

	#lbOuterContainer.blue { border: 3px solid #5F89D8; }

	#lbOuterContainer.gold { border: 3px solid #B0B000; }
 

#lbDetailsContainer {	font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; width: 100%; line-height: 1.4em;	overflow: auto; margin: 0 auto; }

	#lbDetailsContainer.grey { border: 3px solid #888888; border-top: none; }

	#lbDetailsContainer.red { border: 3px solid #DD0000; border-top: none; }

	#lbDetailsContainer.green { border: 3px solid #00B000; border-top: none; }

	#lbDetailsContainer.blue { border: 3px solid #5F89D8; border-top: none; }

	#lbDetailsContainer.gold { border: 3px solid #B0B000; border-top: none; }

#lbIframeContainer,#lbImageContainer { padding: 10px; position:absolute; top:20px;left:-0.3%; }
 

#lbLoading {

	position: absolute; top: 20px; left: 0%; height: 32px; width: 100%; text-align: center; line-height: 0; background: url(images/loading.gif) center no-repeat;

}

#lbClosediv { cursor: pointer; position:absolute; left:-0.5%; width: 100%; margin:0 auto; height: 28px; float: right;  top:0;}

#lbHoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }

#lbImageContainer>#lbHoverNav { left: 0; }

#lbHoverNav a { outline: none; }
 

#lbPrev { width: 49%; height: 100%; background: transparent url(images/blank.gif) no-repeat; display: block; left: 0; float: left; }

	#lbPrev.grey:hover, #lbPrev.grey:visited:hover { background: url(images/prev_grey.gif) left 15% no-repeat; }

	#lbPrev.red:hover, #lbPrev.red:visited:hover { background: url(images/prev_red.gif) left 15% no-repeat; }

	#lbPrev.green:hover, #lbPrev.green:visited:hover { background: url(images/prev_green.gif) left 15% no-repeat; }

	#lbPrev.blue:hover, #lbPrev.blue:visited:hover { background: url(images/prev_blue.gif) left 15% no-repeat; }

	#lbPrev.gold:hover, #lbPrev.gold:visited:hover { background: url(images/prev_gold.gif) left 15% no-repeat; }

	

#lbNext { width: 49%; height: 100%; background: transparent url(images/blank.gif) no-repeat; display: block; right: 0; float: right; }

	#lbNext.grey:hover, #lbNext.grey:visited:hover { background: url(images/next_grey.gif) right 15% no-repeat; }

	#lbNext.red:hover, #lbNext.red:visited:hover { background: url(images/next_red.gif) right 15% no-repeat; }

	#lbNext.green:hover, #lbNext.green:visited:hover { background: url(images/next_green.gif) right 15% no-repeat; }

	#lbNext.blue:hover, #lbNext.blue:visited:hover { background: url(images/next_blue.gif) right 15% no-repeat; }

	#lbNext.gold:hover, #lbNext.gold:visited:hover { background: url(images/next_gold.gif) right 15% no-repeat; }
 

#lbPrev2, #lbNext2 { text-decoration: none; font-weight: bold; }

	#lbPrev2.grey, #lbNext2.grey, #lbSpacer.grey { color: #333333; }

	#lbPrev2.red, #lbNext2.red, #lbSpacer.red { color: #620000; }

	#lbPrev2.green, #lbNext2.green, #lbSpacer.green { color: #003300; }

	#lbPrev2.blue, #lbNext2.blue, #lbSpacer.blue { color: #01379E; }

	#lbPrev2.gold, #lbNext2.gold, #lbSpacer.gold { color: #666600; }

	

#lbPrev2_Off, #lbNext2_Off { font-weight: bold; }

	#lbPrev2_Off.grey, #lbNext2_Off.grey { color: #CCCCCC; }

	#lbPrev2_Off.red, #lbNext2_Off.red { color: #FFCCCC; }

	#lbPrev2_Off.green, #lbNext2_Off.green { color: #82FF82; }

	#lbPrev2_Off.blue, #lbNext2_Off.blue { color: #B7CAEE; }

	#lbPrev2_Off.gold, #lbNext2_Off.gold { color: #E1E100; }

	

#lbDetailsData { padding: 0 ; }

	#lbDetailsData.grey { color: #333333; }

	#lbDetailsData.red { color: #620000; }

	#lbDetailsData.green { color: #003300; }

	#lbDetailsData.blue { color: #01379E; }

	#lbDetailsData.gold { color: #666600; }
 

#lbDetails { width: 60%; float: left; text-align: left; }

#lbCaption { display: block; font-weight: bold; }

#lbNumberDisplay { float: left; display: block; padding-bottom: 1.0em; }

#lbNavDisplay { float: left; display: block; padding-bottom: 1.0em; }
 
 

#lbClose { width: 64px; height: 28px; float: right; top:0;  margin-bottom: 1px; }

	#lbClose.grey { background: url(images/close_grey.png) no-repeat; }

	#lbClose.red { background: url(images/close_red.png) no-repeat; }

	#lbClose.green { background: url(images/close_green.png) no-repeat; }

	#lbClose.blue { background: url(images/close_blue.png) no-repeat; }

	#lbClose.gold { background: url(images/close_gold.png) no-repeat; }
 

#lbPlay { width: 64px; height: 28px; float: right; margin-bottom: 1px; }

	#lbPlay.grey { background: url(images/play_grey.png) no-repeat; }

	#lbPlay.red { background: url(images/play_red.png) no-repeat; }

	#lbPlay.green { background: url(images/play_green.png) no-repeat; }

	#lbPlay.blue { background: url(images/play_blue.png) no-repeat; }

	#lbPlay.gold { background: url(images/play_gold.png) no-repeat; }

	

#lbPause { width: 64px; height: 28px; float: right; margin-bottom: 1px; }

	#lbPause.grey { background: url(images/pause_grey.png) no-repeat; }

	#lbPause.red { background: url(images/pause_red.png) no-repeat; }

	#lbPause.green { background: url(images/pause_green.png) no-repeat; }

	#lbPause.blue { background: url(images/pause_blue.png) no-repeat; }

	#lbPause.gold { background: url(images/pause_gold.png) no-repeat; }
 
 
 

JS File:
 
 

//***********************************************************************************************************************************/

//	LyteBox v3.22

//

//	 Author: Markus F. Hay

//  Website: http://www.dolem.com/lytebox

//	   Date: October 2, 2007

//	License: Creative Commons Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/)

// Browsers: Tested successfully on WinXP with the following browsers (using no DOCTYPE and Strict/Transitional/Loose DOCTYPES):

//				* Firefox: 2.0.0.7, 1.5.0.12

//				* Internet Explorer: 7.0, 6.0 SP2, 5.5 SP2

//				* Opera: 9.23

//

// Releases: For up-to-date and complete release information, visit http://www.dolem.com/forum/showthread.php?tid=62

//				* v3.22 (10/02/07)

//				* v3.21 (09/30/07)

//				* v3.20 (07/12/07)

//				* v3.10 (05/28/07)

//				* v3.00 (05/15/07)

//				* v2.02 (11/13/06)

//

//   Credit: LyteBox was originally derived from the Lightbox class (v2.02) that was written by Lokesh Dhakar. For more

//			 information please visit http://huddletogether.com/projects/lightbox2/

//***********************************************************************************************************************************/

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(); } }

String.prototype.trim = function () { return this.replace(/^\s+|\s+$/g, ''); }
 

function LyteBox() {

	/*** Start Global Configuration ***/

		this.theme				= 'grey';	// themes: grey (default), red, green, blue, gold

		this.hideFlash			= true;		// controls whether or not Flash objects should be hidden

		this.outerBorder		= true;		// controls whether to show the outer grey (or theme) border

		this.resizeSpeed		= 8;		// controls the speed of the image resizing (1=slowest and 10=fastest)

		this.maxOpacity			= 80;		// higher opacity = darker overlay, lower opacity = lighter overlay

		this.navType			= 1;		// 1 = "Prev/Next" buttons on top left and left (default), 2 = "<< prev | next >>" links next to image number

		this.autoResize			= true;		// controls whether or not images should be resized if larger than the browser window dimensions

		this.doAnimations		= true;		// controls whether or not "animate" Lytebox, i.e. resize transition between images, fade in/out effects, etc.

		

		this.borderSize			= 12;		// if you adjust the padding in the CSS, you will need to update this variable -- otherwise, leave this alone...

	/*** End Global Configuration ***/

	

	/*** Configure Slideshow Options ***/

		this.slideInterval		= 4000;		// Change value (milliseconds) to increase/decrease the time between "slides" (10000 = 10 seconds)

		this.showNavigation		= true;		// true to display Next/Prev buttons/text during slideshow, false to hide

		this.showClose			= true;		// true to display the Close button, false to hide

		this.showDetails		= true;		// true to display image details (caption, count), false to hide

		this.showPlayPause		= true;		// true to display pause/play buttons next to close button, false to hide

		this.autoEnd			= true;		// true to automatically close Lytebox after the last image is reached, false to keep open

		this.pauseOnNextClick	= false;	// true to pause the slideshow when the "Next" button is clicked

        this.pauseOnPrevClick 	= true;		// true to pause the slideshow when the "Prev" button is clicked

	/*** End Slideshow Configuration ***/

	

	if(this.resizeSpeed > 10) { this.resizeSpeed = 10; }

	if(this.resizeSpeed < 1) { resizeSpeed = 1; }

	this.resizeDuration = (11 - this.resizeSpeed) * 0.15;

	this.resizeWTimerArray		= new Array();

	this.resizeWTimerCount		= 0;

	this.resizeHTimerArray		= new Array();

	this.resizeHTimerCount		= 0;

	this.showContentTimerArray	= new Array();

	this.showContentTimerCount	= 0;

	this.overlayTimerArray		= new Array();

	this.overlayTimerCount		= 0;

	this.imageTimerArray		= new Array();

	this.imageTimerCount		= 0;

	this.timerIDArray			= new Array();

	this.timerIDCount			= 0;

	this.slideshowIDArray		= new Array();

	this.slideshowIDCount		= 0;

	this.imageArray	 = new Array();

	this.activeImage = null;

	this.slideArray	 = new Array();

	this.activeSlide = null;

	this.frameArray	 = new Array();

	this.activeFrame = null;

	this.checkFrame();

	this.isSlideshow = false;

	this.isLyteframe = false;

	/*@cc_on

		/*@if (@_jscript)

			this.ie = (document.all && !window.opera) ? true : false;

		/*@else @*/

			this.ie = false;

		/*@end

	@*/

	this.ie7 = (this.ie && window.XMLHttpRequest);	

	this.initialize();

}

LyteBox.prototype.initialize = function() {

	this.updateLyteboxItems();

	var objBody = this.doc.getElementsByTagName("body").item(0);	

	if (this.doc.getElementById('lbOverlay')) {

		objBody.removeChild(this.doc.getElementById("lbOverlay"));

		objBody.removeChild(this.doc.getElementById("lbMain"));

	}

	

	var objCloseDiv = this.doc.createElement("div");

		objCloseDiv.setAttribute('id','lbClosediv');

	var objClose = this.doc.createElement("a");

		objClose.setAttribute('id','lbClose');

		objClose.setAttribute((this.ie ? 'className' : 'class'), this.theme);

		objClose.setAttribute('href','#');

		objCloseDiv.appendChild(objClose);
 

	

	var objOverlay = this.doc.createElement("div");

		objOverlay.setAttribute('id','lbOverlay');

		objOverlay.setAttribute((this.ie ? 'className' : 'class'), this.theme);

		if ((this.ie && !this.ie7) || (this.ie7 && this.doc.compatMode == 'BackCompat')) {

			objOverlay.style.position = 'absolute';

		}

		objOverlay.style.display = 'none';

		objBody.appendChild(objOverlay);

	var objLytebox = this.doc.createElement("div");

		objLytebox.setAttribute('id','lbMain');

		objLytebox.style.display = 'none';

		objBody.appendChild(objLytebox);

	var objOuterContainer = this.doc.createElement("div");

		objOuterContainer.setAttribute('id','lbOuterContainer');

		objOuterContainer.setAttribute((this.ie ? 'className' : 'class'), this.theme);

		objLytebox.appendChild(objOuterContainer);

		objOuterContainer.appendChild(objCloseDiv);

	var objLoading = this.doc.createElement("div");

		objLoading.setAttribute('id','lbLoading');

		objOuterContainer.appendChild(objLoading);

	var objIframeContainer = this.doc.createElement("div");

		objIframeContainer.setAttribute('id','lbIframeContainer');

		objIframeContainer.style.display = 'none';

		objOuterContainer.appendChild(objIframeContainer);

	var objIframe = this.doc.createElement("iframe");

		objIframe.setAttribute('id','lbIframe');

		objIframe.setAttribute('name','lbIframe');

		objIframe.style.display = 'none';

		objIframeContainer.appendChild(objIframe);

	var objImageContainer = this.doc.createElement("div");

		objImageContainer.setAttribute('id','lbImageContainer');

		objOuterContainer.appendChild(objImageContainer);

	var objLyteboxImage = this.doc.createElement("img");

		objLyteboxImage.setAttribute('id','lbImage');

		objImageContainer.appendChild(objLyteboxImage);

	var objDetailsContainer = this.doc.createElement("div");

		objDetailsContainer.setAttribute('id','lbDetailsContainer');

		objDetailsContainer.setAttribute((this.ie ? 'className' : 'class'), this.theme);

		objLytebox.appendChild(objDetailsContainer);

	var objDetailsData =this.doc.createElement("div");

		objDetailsData.setAttribute('id','lbDetailsData');

		objDetailsData.setAttribute((this.ie ? 'className' : 'class'), this.theme);

		objDetailsContainer.appendChild(objDetailsData);

	var objDetails = this.doc.createElement("div");

		objDetails.setAttribute('id','lbDetails');

		objDetailsData.appendChild(objDetails);

	var objCaption = this.doc.createElement("span");

		objCaption.setAttribute('id','lbCaption');

		objDetails.appendChild(objCaption);

	var objHoverNav = this.doc.createElement("div");

		objHoverNav.setAttribute('id','lbHoverNav');

		objImageContainer.appendChild(objHoverNav);

	var objBottomNav = this.doc.createElement("div");

		objBottomNav.setAttribute('id','lbBottomNav');

		objDetailsData.appendChild(objBottomNav);

	var objPrev = this.doc.createElement("a");

		objPrev.setAttribute('id','lbPrev');

		objPrev.setAttribute((this.ie ? 'className' : 'class'), this.theme);

		objPrev.setAttribute('href','#');

		objHoverNav.appendChild(objPrev);

	var objNext = this.doc.createElement("a");

		objNext.setAttribute('id','lbNext');

		objNext.setAttribute((this.ie ? 'className' : 'class'), this.theme);

		objNext.setAttribute('href','#');

		objHoverNav.appendChild(objNext);

	var objNumberDisplay = this.doc.createElement("span");

		objNumberDisplay.setAttribute('id','lbNumberDisplay');

		objDetails.appendChild(objNumberDisplay);

	var objNavDisplay = this.doc.createElement("span");

		objNavDisplay.setAttribute('id','lbNavDisplay');

		objNavDisplay.style.display = 'none';

		objDetails.appendChild(objNavDisplay);

	var objPause = this.doc.createElement("a");

		objPause.setAttribute('id','lbPause');

		objPause.setAttribute((this.ie ? 'className' : 'class'), this.theme);

		objPause.setAttribute('href','#');

		objPause.style.display = 'none';

		objBottomNav.appendChild(objPause);

	var objPlay = this.doc.createElement("a");

		objPlay.setAttribute('id','lbPlay');

		objPlay.setAttribute((this.ie ? 'className' : 'class'), this.theme);

		objPlay.setAttribute('href','#');

		objPlay.style.display = 'none';

		objBottomNav.appendChild(objPlay);

};

LyteBox.prototype.updateLyteboxItems = function() {	

	var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a');

	for (var i = 0; i < anchors.length; i++) {

		var anchor = anchors[i];

		var relAttribute = String(anchor.getAttribute('rel'));

		if (anchor.getAttribute('href')) {

			if (relAttribute.toLowerCase().match('lytebox')) {

				anchor.onclick = function () { myLytebox.start(this, false, false); return false; }

			} else if (relAttribute.toLowerCase().match('lyteshow')) {

				anchor.onclick = function () { myLytebox.start(this, true, false); return false; }

			} else if (relAttribute.toLowerCase().match('lyteframe')) {

				anchor.onclick = function () { myLytebox.start(this, false, true); return false; }

			}

		}

	}

};

LyteBox.prototype.start = function(imageLink, doSlide, doFrame) {

	if (this.ie && !this.ie7) {	this.toggleSelects('hide');	}

	if (this.hideFlash) { this.toggleFlash('hide'); }

	this.isLyteframe = (doFrame ? true : false);

	var pageSize	= this.getPageSize();

	var objOverlay	= this.doc.getElementById('lbOverlay');

	var objBody		= this.doc.getElementsByTagName("body").item(0);

	objOverlay.style.height = pageSize[1] + "px";

	objOverlay.style.display = '';

	this.appear('lbOverlay', (this.doAnimations ? 0 : this.maxOpacity));

	var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a');

	if (this.isLyteframe) {

		this.frameArray = [];

		this.frameNum = 0;

		if ((imageLink.getAttribute('rel') == 'lyteframe')) {

			var rev = imageLink.getAttribute('rev');

			this.frameArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title'), (rev == null || rev == '' ? 'width: 400px; height: 400px; scrolling: auto;' : rev)));

		} else {

			if (imageLink.getAttribute('rel').indexOf('lyteframe') != -1) {

				for (var i = 0; i < anchors.length; i++) {

					var anchor = anchors[i];

					if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) {

						var rev = anchor.getAttribute('rev');

						this.frameArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title'), (rev == null || rev == '' ? 'width: 400px; height: 400px; scrolling: auto;' : rev)));

					}

				}

				this.frameArray.removeDuplicates();

				while(this.frameArray[this.frameNum][0] != imageLink.getAttribute('href')) { this.frameNum++; }

			}

		}

	} else {

		this.imageArray = [];

		this.imageNum = 0;

		this.slideArray = [];

		this.slideNum = 0;

		if ((imageLink.getAttribute('rel') == 'lytebox')) {

			this.imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));

		} else {

			if (imageLink.getAttribute('rel').indexOf('lytebox') != -1) {

				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.removeDuplicates();

				while(this.imageArray[this.imageNum][0] != imageLink.getAttribute('href')) { this.imageNum++; }

			}

			if (imageLink.getAttribute('rel').indexOf('lyteshow') != -1) {

				for (var i = 0; i < anchors.length; i++) {

					var anchor = anchors[i];

					if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) {

						this.slideArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));

					}

				}

				this.slideArray.removeDuplicates();

				while(this.slideArray[this.slideNum][0] != imageLink.getAttribute('href')) { this.slideNum++; }

			}

		}

	}

	var object = this.doc.getElementById('lbMain');

		object.style.top = (this.getPageScroll() + (pageSize[3] / 15)) + "px";

		object.style.display = '';

	if (!this.outerBorder) {

		this.doc.getElementById('lbOuterContainer').style.border = 'none';

		this.doc.getElementById('lbDetailsContainer').style.border = 'none';

	} else {

		this.doc.getElementById('lbOuterContainer').style.borderBottom = '';

		this.doc.getElementById('lbOuterContainer').setAttribute((this.ie ? 'className' : 'class'), this.theme);

	}

	this.doc.getElementById('lbOverlay').onclick = function() { myLytebox.end(); return false; }

	this.doc.getElementById('lbMain').onclick = function(e) {

		var e = e;

		if (!e) {

			if (window.parent.frames[window.name] && (parent.document.getElementsByTagName('frameset').length <= 0)) {

				e = window.parent.window.event;

			} else {

				e = window.event;

			}

		}

		var id = (e.target ? e.target.id : e.srcElement.id);

		if (id == 'lbMain') { myLytebox.end(); return false; }

	}

	this.doc.getElementById('lbClose').onclick = function() { myLytebox.end(); return false; }

	this.doc.getElementById('lbPause').onclick = function() { myLytebox.togglePlayPause("lbPause", "lbPlay"); return false; }

	this.doc.getElementById('lbPlay').onclick = function() { myLytebox.togglePlayPause("lbPlay", "lbPause"); return false; }	

	this.isSlideshow = doSlide;

	this.isPaused = (this.slideNum != 0 ? true : false);

	if (this.isSlideshow && this.showPlayPause && this.isPaused) {

		this.doc.getElementById('lbPlay').style.display = '';

		this.doc.getElementById('lbPause').style.display = 'none';

	}

	if (this.isLyteframe) {

		this.changeContent(this.frameNum);

	} else {

		if (this.isSlideshow) {

			this.changeContent(this.slideNum);

		} else {

			this.changeContent(this.imageNum);

		}

	}

};

LyteBox.prototype.changeContent = function(imageNum) {

	if (this.isSlideshow) {

		for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }

	}

	this.activeImage = this.activeSlide = this.activeFrame = imageNum;

	if (!this.outerBorder) {

		this.doc.getElementById('lbOuterContainer').style.border = 'none';

		this.doc.getElementById('lbDetailsContainer').style.border = 'none';

	} else {

		this.doc.getElementById('lbOuterContainer').style.borderBottom = '';

		this.doc.getElementById('lbOuterContainer').setAttribute((this.ie ? 'className' : 'class'), this.theme);

	}

	this.doc.getElementById('lbLoading').style.display = '';

	this.doc.getElementById('lbImage').style.display = 'none';

	this.doc.getElementById('lbIframe').style.display = 'none';

	this.doc.getElementById('lbPrev').style.display = 'none';

	this.doc.getElementById('lbNext').style.display = 'none';

	this.doc.getElementById('lbIframeContainer').style.display = 'none';

	this.doc.getElementById('lbDetailsContainer').style.display = 'none';

	this.doc.getElementById('lbNumberDisplay').style.display = 'none';

	if (this.navType == 2 || this.isLyteframe) {

		object = this.doc.getElementById('lbNavDisplay');

		object.innerHTML = '&nbsp;&nbsp;&nbsp;<span id="lbPrev2_Off" style="display: none;" class="' + this.theme + '">&laquo; prev</span><a href="#" id="lbPrev2" class="' + this.theme + '" style="display: none;">&laquo; prev</a> <b id="lbSpacer" class="' + this.theme + '">||</b> <span id="lbNext2_Off" style="display: none;" class="' + this.theme + '">next &raquo;</span><a href="#" id="lbNext2" class="' + this.theme + '" style="display: none;">next &raquo;</a>';

		object.style.display = 'none';

	}

	if (this.isLyteframe) {

		var iframe = myLytebox.doc.getElementById('lbIframe');

		var styles = this.frameArray[this.activeFrame][2];

		var aStyles = styles.split(';');

		for (var i = 0; i < aStyles.length; i++) {

			if (aStyles[i].indexOf('width:') >= 0) {

				var w = aStyles[i].replace('width:', '');

				iframe.width = w.trim();

			} else if (aStyles[i].indexOf('height:') >= 0) {

				var h = aStyles[i].replace('height:', '');

				iframe.height = h.trim();

			} else if (aStyles[i].indexOf('scrolling:') >= 0) {

				var s = aStyles[i].replace('scrolling:', '');

				iframe.scrolling = s.trim();

			} else if (aStyles[i].indexOf('border:') >= 0) {

				// Not implemented yet, as there are cross-platform issues with setting the border (from a GUI standpoint)

				//var b = aStyles[i].replace('border:', '');

				//iframe.style.border = b.trim();

			}

		}

		this.resizeContainer(parseInt(iframe.width), parseInt(iframe.height));

	} else {

		imgPreloader = new Image();

		imgPreloader.onload = function() {

			var imageWidth = imgPreloader.width;

			var imageHeight = imgPreloader.height;

			if (myLytebox.autoResize) {

				var pagesize = myLytebox.getPageSize();

				var x = pagesize[2] - 150;

				var y = pagesize[3] - 150;

				if (imageWidth > x) {

					imageHeight = Math.round(imageHeight * (x / imageWidth));

					imageWidth = x; 

					if (imageHeight > y) { 

						imageWidth = Math.round(imageWidth * (y / imageHeight));

						imageHeight = y; 

					}

				} else if (imageHeight > y) { 

					imageWidth = Math.round(imageWidth * (y / imageHeight));

					imageHeight = y; 

					if (imageWidth > x) {

						imageHeight = Math.round(imageHeight * (x / imageWidth));

						imageWidth = x;

					}

				}

			}

			var lbImage = myLytebox.doc.getElementById('lbImage')

			lbImage.src = (myLytebox.isSlideshow ? myLytebox.slideArray[myLytebox.activeSlide][0] : myLytebox.imageArray[myLytebox.activeImage][0]);

			lbImage.width = imageWidth;

			lbImage.height = imageHeight;

			myLytebox.resizeContainer(imageWidth, imageHeight+10);

			imgPreloader.onload = function() {};

		}

		imgPreloader.src = (this.isSlideshow ? this.slideArray[this.activeSlide][0] : this.imageArray[this.activeImage][0]);

	}

};

LyteBox.prototype.resizeContainer = function(imgWidth, imgHeight) {

	this.wCur = this.doc.getElementById('lbOuterContainer').offsetWidth;

	this.hCur = this.doc.getElementById('lbOuterContainer').offsetHeight;

	this.xScale = ((imgWidth  + (this.borderSize * 2)) / this.wCur) * 100;

	this.yScale = ((imgHeight  + (this.borderSize * 2)) / this.hCur) * 100;

	var wDiff = (this.wCur - this.borderSize * 2) - imgWidth;

	var hDiff = (this.hCur - this.borderSize * 2) - imgHeight;

	if (!(hDiff == 0)) {

		this.hDone = false;

		this.resizeH('lbOuterContainer', this.hCur, imgHeight + this.borderSize*2, this.getPixelRate(this.hCur, imgHeight));

	} else {

		this.hDone = true;

	}

	if (!(wDiff == 0)) {

		this.wDone = false;

		this.resizeW('lbOuterContainer', this.wCur, imgWidth + this.borderSize*2, this.getPixelRate(this.wCur, imgWidth));

	} else {

		this.wDone = true;

	}

	if ((hDiff == 0) && (wDiff == 0)) {

		if (this.ie){ this.pause(250); } else { this.pause(100); } 

	}

	this.doc.getElementById('lbPrev').style.height = imgHeight + "px";

	this.doc.getElementById('lbNext').style.height = imgHeight + "px";

	this.doc.getElementById('lbDetailsContainer').style.width = (imgWidth + (this.borderSize * 2) + (this.ie && this.doc.compatMode == "BackCompat" && this.outerBorder ? 2 : 0)) + "px";

	this.showContent();

};

LyteBox.prototype.showContent = function() {

	if (this.wDone && this.hDone) {

		for (var i = 0; i < this.showContentTimerCount; i++) { window.clearTimeout(this.showContentTimerArray[i]); }

		if (this.outerBorder) {

			this.doc.getElementById('lbOuterContainer').style.borderBottom = 'none';

		}

		this.doc.getElementById('lbLoading').style.display = 'none';

		if (this.isLyteframe) {

			this.doc.getElementById('lbIframe').style.display = '';

			this.appear('lbIframe', (this.doAnimations ? 0 : 100));

		} else {

			this.doc.getElementById('lbImage').style.display = '';

			this.appear('lbImage', (this.doAnimations ? 0 : 100));

			this.preloadNeighborImages();

		}

		if (this.isSlideshow) {

			if(this.activeSlide == (this.slideArray.length - 1)) {

				if (this.autoEnd) {

					this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.end('slideshow')", this.slideInterval);

				}

			} else {

				if (!this.isPaused) {

					this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.changeContent("+(this.activeSlide+1)+")", this.slideInterval);

				}

			}

			this.doc.getElementById('lbHoverNav').style.display = (this.showNavigation && this.navType == 1 ? '' : 'none');

			this.doc.getElementById('lbClose').style.display = (this.showClose ? '' : 'none');

			this.doc.getElementById('lbDetails').style.display = (this.showDetails ? '' : 'none');

			this.doc.getElementById('lbPause').style.display = (this.showPlayPause && !this.isPaused ? '' : 'none');

			this.doc.getElementById('lbPlay').style.display = (this.showPlayPause && !this.isPaused ? 'none' : '');

			this.doc.getElementById('lbNavDisplay').style.display = (this.showNavigation && this.navType == 2 ? '' : 'none');

		} else {

			this.doc.getElementById('lbHoverNav').style.display = (this.navType == 1 && !this.isLyteframe ? '' : 'none');

			if ((this.navType == 2 && !this.isLyteframe && this.imageArray.length > 1) || (this.frameArray.length > 1 && this.isLyteframe)) {

				this.doc.getElementById('lbNavDisplay').style.display = '';

			} else {

				this.doc.getElementById('lbNavDisplay').style.display = 'none';

			}

			this.doc.getElementById('lbClose').style.display = '';

			this.doc.getElementById('lbDetails').style.display = '';

			this.doc.getElementById('lbPause').style.display = 'none';

			this.doc.getElementById('lbPlay').style.display = 'none';

		}

		this.doc.getElementById('lbImageContainer').style.display = (this.isLyteframe ? 'none' : '');

		this.doc.getElementById('lbIframeContainer').style.display = (this.isLyteframe ? '' : 'none');

		try {

			this.doc.getElementById('lbIframe').src = this.frameArray[this.activeFrame][0];

		} catch(e) { }

	} else {

		this.showContentTimerArray[this.showContentTimerCount++] = setTimeout("myLytebox.showContent()", 200);

	}

};

LyteBox.prototype.updateDetails = function() {

	var object = this.doc.getElementById('lbCaption');

	var sTitle = (this.isSlideshow ? this.slideArray[this.activeSlide][1] : (this.isLyteframe ? this.frameArray[this.activeFrame][1] : this.imageArray[this.activeImage][1]));

	object.style.display = '';

	object.innerHTML = (sTitle == null ? '' : sTitle);

	this.updateNav();

	this.doc.getElementById('lbDetailsContainer').style.display = '';

	object = this.doc.getElementById('lbNumberDisplay');

	if (this.isSlideshow && this.slideArray.length > 1) {

		object.style.display = '';

		object.innerHTML = "Image " + eval(this.activeSlide + 1) + " of " + this.slideArray.length;

		this.doc.getElementById('lbNavDisplay').style.display = (this.navType == 2 && this.showNavigation ? '' : 'none');

	} else if (this.imageArray.length > 1 && !this.isLyteframe) {

		object.style.display = '';

		object.innerHTML = "Image " + eval(this.activeImage + 1) + " of " + this.imageArray.length;

		this.doc.getElementById('lbNavDisplay').style.display = (this.navType == 2 ? '' : 'none');

	} else if (this.frameArray.length > 1 && this.isLyteframe) {

		object.style.display = '';

		object.innerHTML = "Page " + eval(this.activeFrame + 1) + " of " + this.frameArray.length;

		this.doc.getElementById('lbNavDisplay').style.display = '';

	} else {

		this.doc.getElementById('lbNavDisplay').style.display = 'none';

	}

	this.appear('lbDetailsContainer', (this.doAnimations ? 0 : 100));

};

LyteBox.prototype.updateNav = function() {

	if (this.isSlideshow) {

		if (this.activeSlide != 0) {

			var object = (this.navType == 2 ? this.doc.getElementById('lbPrev2') : this.doc.getElementById('lbPrev'));

				object.style.display = '';

				object.onclick = function() {

					if (myLytebox.pauseOnPrevClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); }

					myLytebox.changeContent(myLytebox.activeSlide - 1); return false;

				}

		} else {

			if (this.navType == 2) { this.doc.getElementById('lbPrev2_Off').style.display = ''; }

		}

		if (this.activeSlide != (this.slideArray.length - 1)) {

			var object = (this.navType == 2 ? this.doc.getElementById('lbNext2') : this.doc.getElementById('lbNext'));

				object.style.display = '';

				object.onclick = function() {

					if (myLytebox.pauseOnNextClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); }

					myLytebox.changeContent(myLytebox.activeSlide + 1); return false;

				}

		} else {

			if (this.navType == 2) { this.doc.getElementById('lbNext2_Off').style.display = ''; }

		}

	} else if (this.isLyteframe) {

		if(this.activeFrame != 0) {

			var object = this.doc.getElementById('lbPrev2');

				object.style.display = '';

				object.onclick = function() {

					myLytebox.changeContent(myLytebox.activeFrame - 1); return false;

				}

		} else {

			this.doc.getElementById('lbPrev2_Off').style.display = '';

		}

		if(this.activeFrame != (this.frameArray.length - 1)) {

			var object = this.doc.getElementById('lbNext2');

				object.style.display = '';

				object.onclick = function() {

					myLytebox.changeContent(myLytebox.activeFrame + 1); return false;

				}

		} else {

			this.doc.getElementById('lbNext2_Off').style.display = '';

		}		

	} else {

		if(this.activeImage != 0) {

			var object = (this.navType == 2 ? this.doc.getElementById('lbPrev2') : this.doc.getElementById('lbPrev'));

				object.style.display = '';

				object.onclick = function() {

					myLytebox.changeContent(myLytebox.activeImage - 1); return false;

				}

		} else {

			if (this.navType == 2) { this.doc.getElementById('lbPrev2_Off').style.display = ''; }

		}

		if(this.activeImage != (this.imageArray.length - 1)) {

			var object = (this.navType == 2 ? this.doc.getElementById('lbNext2') : this.doc.getElementById('lbNext'));

				object.style.display = '';

				object.onclick = function() {

					myLytebox.changeContent(myLytebox.activeImage + 1); return false;

				}

		} else {

			if (this.navType == 2) { this.doc.getElementById('lbNext2_Off').style.display = ''; }

		}

	}

	this.enableKeyboardNav();

};

LyteBox.prototype.enableKeyboardNav = function() { document.onkeydown = this.keyboardAction; };

LyteBox.prototype.disableKeyboardNav = function() { document.onkeydown = ''; };

LyteBox.prototype.keyboardAction = function(e) {

	var keycode = key = escape = null;

	keycode	= (e == null) ? event.keyCode : e.which;

	key		= String.fromCharCode(keycode).toLowerCase();

	escape  = (e == null) ? 27 : e.DOM_VK_ESCAPE;

	if ((key == 'x') || (key == 'c') || (keycode == escape)) {

		myLytebox.end();

	} else if ((key == 'p') || (keycode == 37)) {

		if (myLytebox.isSlideshow) {

			if(myLytebox.activeSlide != 0) {

				myLytebox.disableKeyboardNav();

				myLytebox.changeContent(myLytebox.activeSlide - 1);

			}

		} else if (myLytebox.isLyteframe) {

			if(myLytebox.activeFrame != 0) {

				myLytebox.disableKeyboardNav();

				myLytebox.changeContent(myLytebox.activeFrame - 1);

			}

		} else {

			if(myLytebox.activeImage != 0) {

				myLytebox.disableKeyboardNav();

				myLytebox.changeContent(myLytebox.activeImage - 1);

			}

		}

	} else if ((key == 'n') || (keycode == 39)) {

		if (myLytebox.isSlideshow) {

			if(myLytebox.activeSlide != (myLytebox.slideArray.length - 1)) {

				myLytebox.disableKeyboardNav();

				myLytebox.changeContent(myLytebox.activeSlide + 1);

			}

		} else if (myLytebox.isLyteframe) {

			if(myLytebox.activeFrame != (myLytebox.frameArray.length - 1)) {

				myLytebox.disableKeyboardNav();

				myLytebox.changeContent(myLytebox.activeFrame + 1);

			}

		} else {

			if(myLytebox.activeImage != (myLytebox.imageArray.length - 1)) {

				myLytebox.disableKeyboardNav();

				myLytebox.changeContent(myLytebox.activeImage + 1);

			}

		}

	}

};

LyteBox.prototype.preloadNeighborImages = function() {

	if (this.isSlideshow) {

		if ((this.slideArray.length - 1) > this.activeSlide) {

			preloadNextImage = new Image();

			preloadNextImage.src = this.slideArray[this.activeSlide + 1][0];

		}

		if(this.activeSlide > 0) {

			preloadPrevImage = new Image();

			preloadPrevImage.src = this.slideArray[this.activeSlide - 1][0];

		}

	} else {

		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];

		}

	}

};

LyteBox.prototype.togglePlayPause = function(hideID, showID) {

	if (this.isSlideshow && hideID == "lbPause") {

		for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }

	}

	this.doc.getElementById(hideID).style.display = 'none';

	this.doc.getElementById(showID).style.display = '';

	if (hideID == "lbPlay") {

		this.isPaused = false;

		if (this.activeSlide == (this.slideArray.length - 1)) {

			this.end();

		} else {

			this.changeContent(this.activeSlide + 1);

		}

	} else {

		this.isPaused = true;

	}

};

LyteBox.prototype.end = function(caller) {

	var closeClick = (caller == 'slideshow' ? false : true);

	if (this.isSlideshow && this.isPaused && !closeClick) { return; }

	this.disableKeyboardNav();

	this.doc.getElementById('lbMain').style.display = 'none';

	this.fade('lbOverlay', (this.doAnimations ? this.maxOpacity : 0));

	this.toggleSelects('visible');

	if (this.hideFlash) { this.toggleFlash('visible'); }

	if (this.isSlideshow) {

		for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }

	}

	if (this.isLyteframe) {

		 this.initialize();

	}

};

LyteBox.prototype.checkFrame = function() {

	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;

	}

};

LyteBox.prototype.getPixelRate = function(cur, img) {

	var diff = (img > cur) ? img - cur : cur - img;

	if (diff >= 0 && diff <= 100) { return 10; }

	if (diff > 100 && diff <= 200) { return 15; }

	if (diff > 200 && diff <= 300) { return 20; }

	if (diff > 300 && diff <= 400) { return 25; }

	if (diff > 400 && diff <= 500) { return 30; }

	if (diff > 500 && diff <= 600) { return 35; }

	if (diff > 600 && diff <= 700) { return 40; }

	if (diff > 700) { return 45; }

};

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 == 'lbImage' || id == 'lbIframe')) {

		try { object.removeAttribute("filter"); } catch(e) {}	/* Fix added for IE Alpha Opacity Filter bug. */

		this.updateDetails();

	} else if (opacity >= this.maxOpacity && id == 'lbOverlay') {

		for (var i = 0; i < this.overlayTimerCount; i++) { window.clearTimeout(this.overlayTimerArray[i]); }

		return;

	} else if (opacity >= 100 && id == 'lbDetailsContainer') {

		try { object.removeAttribute("filter"); } catch(e) {}	/* Fix added for IE Alpha Opacity Filter bug. */

		for (var i = 0; i < this.imageTimerCount; i++) { window.clearTimeout(this.imageTimerArray[i]); }

		this.doc.getElementById('lbOverlay').style.height = this.getPageSize()[1] + "px";

	} else {

		if (id == 'lbOverlay') {

			this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.appear('" + id + "', " + (opacity+20) + ")", 1);

		} else {

			this.imageTimerArray[this.imageTimerCount++] = setTimeout("myLytebox.appear('" + id + "', " + (opacity+10) + ")", 1);

		}

	}

};

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 == 'lbOverlay') {

		this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.fade('" + id + "', " + (opacity-20) + ")", 1);

	} else {

		this.timerIDArray[this.timerIDCount++] = setTimeout("myLytebox.fade('" + id + "', " + (opacity-10) + ")", 1);

	}

};

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);

	var newW = (this.doAnimations ? curW : maxW);

	object.style.width = (newW) + "px";

	if (newW < maxW) {

		newW += (newW + pixelrate >= maxW) ? (maxW - newW) : pixelrate;

	} else if (newW > maxW) {

		newW -= (newW - pixelrate <= maxW) ? (newW - maxW) : pixelrate;

	}

	this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW('" + id + "', " + newW + ", " + maxW + ", " + pixelrate + ", " + (timer+0.02) + ")", timer+0.02);

	if (parseInt(object.style.width) == maxW) {

		this.wDone = true;

		for (var i = 0; i < this.resizeWTimerCount; i++) { window.clearTimeout(this.resizeWTimerArray[i]); }

	}

};

LyteBox.prototype.resizeH = function(id, curH, maxH, pixelrate, speed) {

	var timer = speed ? speed : (this.resizeDuration/2);

	var object = this.doc.getElementById(id);

	var newH = (this.doAnimations ? curH : maxH);

	object.style.height = (newH) + "px";

	if (newH < maxH) {

		newH += (newH + pixelrate >= maxH) ? (maxH - newH) : pixelrate;

	} else if (newH > maxH) {

		newH -= (newH - pixelrate <= maxH) ? (newH - maxH) : pixelrate;

	}

	this.resizeHTimerArray[this.resizeHTimerCount++] = setTimeout("myLytebox.resizeH('" + id + "', " + newH + ", " + maxH + ", " + pixelrate + ", " + (timer+.02) + ")", timer+.02);

	if (parseInt(object.style.height) == maxH) {

		this.hDone = true;

		for (var i = 0; i < this.resizeHTimerCount; i++) { window.clearTimeout(this.resizeHTimerArray[i]); }

	}

};

LyteBox.prototype.getPageScroll = function() {

	if (self.pageYOffset) {

		return this.isFrame ? parent.pageYOffset : self.pageYOffset;

	} else if (this.doc.documentElement && this.doc.documentElement.scrollTop){

		return this.doc.documentElement.scrollTop;

	} else if (document.body) {

		return this.doc.body.scrollTop;

	}

};

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){

		xScroll = this.doc.body.scrollWidth;

		yScroll = this.doc.body.scrollHeight;

	} else {

		xScroll = this.doc.getElementsByTagName("html").item(0).offsetWidth;

		yScroll = this.doc.getElementsByTagName("html").item(0).offsetHeight;

		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) {

		windowWidth = (this.isFrame) ? parent.innerWidth : self.innerWidth;

		windowHeight = (this.isFrame) ? parent.innerHeight : self.innerHeight;

	} else if (document.documentElement && document.documentElement.clientHeight) {

		windowWidth = this.doc.documentElement.clientWidth;

		windowHeight = this.doc.documentElement.clientHeight;

	} else if (document.body) {

		windowWidth = this.doc.getElementsByTagName("html").item(0).clientWidth;

		windowHeight = this.doc.getElementsByTagName("html").item(0).clientHeight;

		windowWidth = (windowWidth == 0) ? this.doc.body.clientWidth : windowWidth;

		windowHeight = (windowHeight == 0) ? this.doc.body.clientHeight : windowHeight;

	}

	var pageHeight = (yScroll < windowHeight) ? windowHeight : yScroll;

	var pageWidth = (xScroll < windowWidth) ? windowWidth : xScroll;

	return new Array(pageWidth, pageHeight, windowWidth, windowHeight);

};

LyteBox.prototype.toggleFlash = function(state) {

	var objects = this.doc.getElementsByTagName("object");

	for (var i = 0; i < objects.length; i++) {

		objects[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';

	}

	var embeds = this.doc.getElementsByTagName("embed");

	for (var i = 0; i < embeds.length; i++) {

		embeds[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';

	}

	if (this.isFrame) {

		for (var i = 0; i < parent.frames.length; i++) {

			try {

				objects = parent.frames[i].window.document.getElementsByTagName("object");

				for (var j = 0; j < objects.length; j++) {

					objects[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';

				}

			} catch(e) { }

			try {

				embeds = parent.frames[i].window.document.getElementsByTagName("embed");

				for (var j = 0; j < embeds.length; j++) {

					embeds[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';

				}

			} catch(e) { }

		}

	}

};

LyteBox.prototype.toggleSelects = function(state) {

	var selects = this.doc.getElementsByTagName("select");

	for (var i = 0; i < selects.length; i++ ) {

		selects[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';

	}

	if (this.isFrame) {

		for (var i = 0; i < parent.frames.length; i++) {

			try {

				selects = parent.frames[i].window.document.getElementsByTagName("select");

				for (var j = 0; j < selects.length; j++) {

					selects[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';

				}

			} catch(e) { }

		}

	}

};

LyteBox.prototype.pause = function(numberMillis) {

	var now = new Date();

	var exitTime = now.getTime() + numberMillis;

	while (true) {

		now = new Date();

		if (now.getTime() > exitTime) { return; }

	}

};

if (window.addEventListener) {

	window.addEventListener("load",initLytebox,false);

} else if (window.attachEvent) {

	window.attachEvent("onload",initLytebox);

} else {

	window.onload = function() {initLytebox();}

}

function initLytebox() { myLytebox = new LyteBox(); }

Open in new window

cap4.PNG
0
 

Author Comment

by:SSAFECS
ID: 24745730
profya: To say you are the man would be a massive understatement. I can't thank you enough and I will certainly give you the points I just had one more quick question. I've attached an image of what the popup looks like and the image description is getting cut off. is there an easy way to fix that?

Thanx
image.png
0
 
LVL 14

Accepted Solution

by:
profya earned 500 total points
ID: 24745876
No thanks man, I enjoy working on challenges. Regarding your question, try adding:
padding-bottom:10px; margin-top:20px;

to #lbDetails in the css, you can adjust these values to fit the margins you like. I hope this helps.
0
 

Author Closing Comment

by:SSAFECS
ID: 31598052
I can't thank you enough!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to dynamically set the form action using jQuery.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now