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.
Thanks mate,
Had been looking for the same thing but had come up with a blank,other than the CSS.
I don’t speak javascript too well
As per seek an ya can find some clever bugger that has solved the problem for you.
Am looking at using Lightbox for my galleries but just need to work out the ways to entice it to do things to my “visions”.
Sheesh it’s great “out of the box”,beats the hell out of 10 images,10 pages to present them.
And with far more style than popups.
One more thought solved.
Cheers,
Grahame.
Thanks, saved me some time.
Thanks a lot mate, really useful
Thanks!
Javascript is still a foreign language to me, so this really helped!
Thank you so much
I’ve been pulling my hair out for a while on this!
Thanks, that’s really useful!
Thanks! This was very helpful.
Thanks so much for sharing this tip. Definitely saved me some time. Cheers!
Just what I needed – Thanks. Been looking for that for flippin’ ages