Lightbox - change colour/opacity of background?

**seabird** · 11-25-2009, 12:18 PM

1) Script Title: Lightbox 2.04a

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

3) Describe problem:
Apologies if this is the wrong url - I got my version of Lightbox by following a link in a thread where someone else was advised to use a newer version and I'm not sure where it was.

I would like to be able to change the colour and/or opacity of the background to the enlarged images in Lightbox. The black is a bit heavy, for my site.
Thank you.

**aborg** · 11-25-2009, 03:46 PM

opacitity is this line :

In lightbox.js

Code:

overlayOpacity: 0.8,   // controls transparency of shadow overlay

Lower the 0.8 to what you feel comfortable with. Color I have no clue where and if it can be changed.

**jscheuer1** · 11-25-2009, 03:53 PM

Doing that is relatively simple but varies depending upon which version you are actually using. If you are using v2.03a as linked to in your above post, you can open up the lightbox.css file in a plain text editor like NotePad and change the value for the background-color property of the overlay:

Code:

#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}

Like for red:

Code:

#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: red;
	}

Also, though not required, you can change the opacity by finding this line in the lightbox.js file:

Code:

		new Effect.Appear('overlay', { duration: overlayDuration, from: 0.0, to: 0.8 });

and changing the highlighted value. Once again, use an plain text editor like NotePad for this. Valid values are 0.1 (really light, hardly noticeable) to 1.0 (completely opaque).

Note: If you are using a different version, some or all of this may be different.