Results 1 to 4 of 4

Thread: Javascript menu showing through Lightbox...

  1. #1
    Join Date
    Jan 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Javascript menu showing through Lightbox...

    I have used a javascript horizontal menu along the top of page, and have the lightbox script running for viewing pictures in a gallery. Only problem is when the picture is clicked on and opens via the lightbox script, i can still see the javascript menu through the picture... any ideas how to override javascript menu when lightbox image is enlarged?

    thanks!

    Shona
    p.s. i am VERY new to javascript menus!!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    In most cases, increasing all z-index values in the lightbox.css file by a factor of 100 will take care of this.

    If you want more help:

    Please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

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

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

    smoo1604 (01-29-2009)

  4. #3
    Join Date
    Jan 2009
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    ah yes would make sense!!

    to resolve problem at the moment i have removed the menu script for the gallery pages and put a simple link back to main page at bottom of pictures.

    have put a dummy page up though so problem can be seen! its

    http://www.frasersauctionroom.co.uk/javamenu.htm

    thanks!

    Shona

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    That's an older version of Lightbox (still listed in the library here, as it is the original version and simpler in some ways) with no z-index styles in the stylesheet. Use this as your lightbox.css file:

    Code:
    #lightbox{
    	background-color:#eee;
    	padding: 10px;
    	border-bottom: 2px solid #666;
    	border-right: 2px solid #666;
    	z-index: 10000!important;
    	}
    #lightboxDetails{
    	font-size: 0.8em;
    	padding-top: 0.4em;
    	z-index: 10000!important;
    	}	
    #lightboxCaption{ float: left;	z-index: 10000!important;
     }
    #keyboardMsg{ float: right; }
    #closeButton{ top: 5px; right: 5px; }
    
    #lightbox img{ border: none; clear: both;} 
    #overlay img{ border: none; }
    
    #overlay{ background-image: url(overlay.png); 	z-index: 9000!important;
    }
    
    * html #overlay{
    	background-color: #333;
    	back\ground-color: transparent;
    	background-image: url(blank.gif);
    	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
    	}
    And since these are both Dynamic Drive scripts, you should have posted in the Dynamic Drive Scripts Help section. But don't worry about that now, next time though . . .
    - John
    ________________________

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

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
  •