WordPress.org

Ready to get started?Download WordPress

Forums

WP jQuery Lightbox
Overlay opacity (5 posts)

  1. john@j-f-r.com
    Member
    Posted 1 year ago #

    The opacity of my overlay's stuck at 1. I can't for the life of me see where to change it - inspecting the element in Chrome it looks like it's being set at an element.style level.

    I've probably changed something somewhere but am clueless as to how to debug.

    The page is at;

    http://www.koslanda.com/wordpress/resort

    Any help would be much appreciated.

    http://wordpress.org/extend/plugins/wp-jquery-lightbox/

  2. brchok
    Member
    Posted 1 year ago #

    same problem here.how to solve it without touching the plugin files?

  3. Chris Borgman
    Member
    Posted 1 year ago #

    This should work, it's in use on my dev website: http://site01.profoliolive.com/wp-gallery/ Just cut and paste into your custom CSS file.

    /******************* BASIC LIGHTBOX SETTINGS ********************/
    
    /* Overlay sets the color and opacity of background behind the image. */
    #overlay {
    background-color: #fff !important;
    opacity: .95 !important; /* You can also add an opacity effect by setting the opacity anywhere from .1 to 1 */
    }
    
    /* Set the color for the animated background behind the image which results in an 8px border. */
    #outerImageContainer {
    background-color: rgba(0, 0, 0, .1) !important; /* Use 'rgba(0, 0, 0, .0)' if you don't want a border, otherwise use any rgba or #color. */
    }
  4. Chris Borgman
    Member
    Posted 1 year ago #

    I just realized that my code won't give you the same look if your #overlay is "stuck" at 1.

    Go to you plugin folder and open wp-jquery-lightbox then styles. Open lightbox.css and go to line 115 or search the page for #overlay. Check the code, it should be:

    #overlay{
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 10090;
    	width: 100%;
    	height: 500px;
    	background-color: #000;
    	filter:alpha(opacity=60);
    	-moz-opacity: 0.6;
    	opacity: 0.6;
    	display: none;
    	}

    Make sure your default is what's above. Then add the code I provided in last post to your custom CSS file. If you have to make a change, make sure you make the same change in lightbox.min.css file.

  5. brchok
    Member
    Posted 1 year ago #

    Thank you Chris.
    However, your solution doesn't work for me even though the #overlay CSS is at 0.6.

    The plugin javascript is adding some inline styles (that I couldn't override via CSS) that is setting opacity to 1... :-/

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic