The page gets grayed out as expected but pull-down menus don't and they overlay the jquery ui image gallery

Q: I just downloaded the free version of VLB to test it out and I'm having a minor problem with display. I'm using Windows XP and Firefox 7.01 and I get the same problem in Safari 5.1.2.
Here's what happens. I have incorporated the VLB code into an existing HTML file to display the gallery. I tweaked the VLB to point to an image folder on my website rather than the VLB /data folders and I know I've done the tweaking properly because all the images load as expected. However, I have a suite of pull-down menus which use CSS and JS files to build the menus and allow hovering and clicking and there seems to be a conflict between the VLB CSS/JS and mine.
Whenever I click on a thumbnail to start the slideshow, the thumbnails page
gets grayed out as expected but my pull-down menus don't and they overlay
the slideshow. Is there some way the the VLB code can make my menus go in the background as well as the rest of the thumbs page. In the current version of the file, I
moved the VLB <head> code out of the head to see if it makes a difference
but it's the same effect within the <head> and outside it. I thought about merging your CSS/JS and mine but I'd prefer to keep them separate if possible.

A: You should find the following code in engine/css/visuallightbox.css file:

#overlay{
        position:absolute;
        top:0;
        left:0;
        z-index:90;
        width:100%;
        height:auto;
        background-color:#151410;
}

#lightbox{
        position:absolute;
        top:20px;
        left:0;
        width:100%;
        z-index:100;
        text-align:center;
        color:#151410;
        line-height:0;
}



and change it to:

#overlay{
        position:absolute;
        top:0;
        left:0;
        z-index:900;
        width:100%;
        height:auto;
        background-color:#151410;
}

#lightbox{
        position:absolute;
        top:20px;
        left:0;
        width:100%;
        z-index:1000;
        text-align:center;
        color:#151410;
        line-height:0;
}

Recent Questions »

Related