Light Box 2 -- Close on image click

[MugzMalone]

1) Script Title: LightBox 2

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem:

Does anyone know how to alter the lightbox.js script so that it will close when the image is clicked? LightBox 1, the first version, does this, but the second one is configured to close only on the close link at the bottom of the page and the shadow space. I think a nice improvement to this script would be to close it upon clicking the image.

Best Wishes,
James

[nexxosmedia]

It depends on whether you have a single image or multiple images, with one, it closes, with multiple it goes on to the next. If you click on the shaded area it also closes.

[jscheuer1]

I don't believe that's true, nexxosmedia. Try this (tested, works here), change:

		objLightbox.onclick = function(e) {	// close Lightbox is user clicks shadow overlay
			if (!e) var e = window.event;
			var clickObj = Event.element(e).id;
			if ( clickObj == 'lightbox') {
				myLightbox.end();
			}
		};

to:

		objLightbox.onclick = function(e) {	// close Lightbox is user clicks shadow overlay
			if (!e) var e = window.event;
			var clickObj = Event.element(e).id;
			if ( !/(prevLink)|(nextLink)/.test(clickObj) ) {
				myLightbox.end();
			}
		};

[MugzMalone]

Very cool. Thank you, John! I have another issue with this script that I will post in a new thread.

[Jessica445]

This is great! In my case the Close X buttom wasn't working on a server - it worked on a local computer just fine. I changed to the code above and now the visitor can click in any place and close the image.
BTW, doesn't anyone knows how to fix thie problem with the Close X button? It seems like the image is not found on a server, but everything is fine on a local computer.

[jscheuer1]

BTW, doesn't anyone knows how to fix thie problem with the Close X button? It seems like the image is not found on a server, but everything is fine on a local computer.

That just means exactly what it says. The image is not found on the server. So, either the image wasn't uploaded to the server, or if it was, it wasn't to the location expected by the script. Here (in lightbox.js) is where the location of the close image is set:

// -----------------------------------------------------------------------------------

//
//	Configuration
//
var fileLoadingImage = "images/loading.gif";		
var fileBottomNavCloseImage = "images/closelabel.gif";

var animate = true;	// toggles resizing animations
var resizeSpeed = 7;	// controls the speed of the image resizing animations (1=slowest and 10=fastest)

var borderSize = 10;	//if you adjust the padding in the CSS, you will need to update this variable

// -----------------------------------------------------------------------------------

That would be relative to the page using the script, but the path may be made absolute. In fact, if the script is used by more than one page(s) in different folders, an absolute path must be used. Example of an absolute path:

var fileBottomNavCloseImage = "http://www.mydomain.com/images/closelabel.gif";

If you need more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.