Today I’ve spent over an hour searching how the background opacity with the lightbox JS 2 has been implemented. I wanted to change the opacity from 80% to 40% or less since one of our clients requested so.
What does one do first when one wants to change some layout elements? Check out the CSS stylesheets, and yes. There are three lines defined in the #overlay declaration:
filter:alpha(opacity=80);
-moz-opacity:.80;
opacity:.80;
How convenient, lets just cut all values in half and the opacity of the background overlay should turn more transparent, no? Wrong!
Apparently these CSS styles are only defined to support the script degrading gracefully, in javascript enabled browsers it doesn’t serve any active use, you could leave the styles out and the script would still be fully functional. But how do we change the opacity then? Well after some digging through the javascript code it ends up being fairly straightforward. Just open lightbox.js and search for the following line (it’s around line 320 depending on which version of lightbox JS 2 you are using)
new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });
The red value is the value you wanna change to manipulate the transparency or opacity of the page overlay. Pretty easy to change if you know where to look.
I hope I saved some of you some time with this. It could prove usefull if Lokesh Dhakar, the creator of this fabulous script, would include some configuration directives in the top of the script controlling the behaviour and style of the lightbox.
