PDA

View Full Version : Lightbox II: Modifying "shadow" color



Nyetah
06-09-2008, 05:46 AM
1) Script Title: Lightbox image viewer 2.03a

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

3) Describe problem: I'm hoping to change the color and/or opacity of the "shadow" that fills the page around the white "lightbox" but I can't figure out where to make such modifications. Can someone get me there? What I'm wanting to try out is making the shadow a solid black.

Cheers for your time...

demo page:
http://arts.ucsc.edu/faculty/watts/pages/noalbum1c.html

rangana
06-09-2008, 06:25 AM
Apparently, it's already black:


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


What makes it pale black, is because of the transparency being applied in effect.js.

If you really want to make it black, then remove the opacity. Find this in effect.js:


Element.setOpacity = function(element, value){
element= $(element);
if (value == 1){
Element.setStyle(element, { opacity:
(/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ?
0.999999 : null });
if(/MSIE/.test(navigator.userAgent))
Element.setStyle(element, {filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')});
} else {
if(value < 0.00001) value = 0;
Element.setStyle(element, {opacity: value});
if(/MSIE/.test(navigator.userAgent))
Element.setStyle(element,
{ filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'') +
'alpha(opacity='+value*100+')' });
}
}


Replace the highlighted with '1' and 100 respectively. (Note of the quote)

Hope it helps.

jscheuer1
06-09-2008, 08:10 PM
That will probably mess up other things, and/or might not achieve the desired change. It will prevent effects.js from doing any other opacity stuff using that function. However, this line in lightbox.js is where the precise change we are discussing is set in motion:


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

If you change it to:


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

That will take care of it. Using 0.9999 instead of 1 will prevent a 'flashing' bug in some browsers, and is indistinguishable from 1 to the human eye.

rangana
06-10-2008, 12:43 AM
That was my bad John. I did'nt quiet test the code.

Nyetah
06-11-2008, 04:52 AM
thanks for your time guys. i appreciate it! i made jscheuer1's suggested change and it works perfectly...Voila! :-) cheers!