Results 1 to 5 of 5

Thread: Lightbox - change colour/opacity of background?

  1. #1
    Join Date
    Nov 2009
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Lightbox - change colour/opacity of background?

    1) Script Title: Lightbox 2.04a

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...box2/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.

  2. #2
    Join Date
    Nov 2009
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    opacitity is this line :

    In lightbox.js

    Code:
    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.

  3. The Following User Says Thank You to aborg For This Useful Post:

    seabird (11-26-2009)

  4. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

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

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

    Code:
    		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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    seabird (11-26-2009)

  6. #4
    Join Date
    Nov 2009
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Many thanks. I'm out today but will try that soonest.
    Mary

  7. #5
    Join Date
    Nov 2009
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    It worked perfectly and looks great. Thanks again.
    (I just changed the colour)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •