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:

Code:

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

Code:

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:

Code:

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

If you change it to:

Code:

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.