PDA

View Full Version : 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/dynamicindex4/lightbox2/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



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:


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

Like for red:


#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:


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.

seabird
11-26-2009, 10:08 AM
Many thanks. I'm out today but will try that soonest.
Mary

seabird
12-02-2009, 04:59 PM
It worked perfectly and looks great. Thanks again.
(I just changed the colour)