Text menu on top of lightbox images

[pcondit]

My gallery displays correctly in Lightbox, but when I click on a thumbnail to enlarge it the images appears under the text menu. I tried bringing Lightbox to the front, but that didn't solve the problem. Check it out on empressvampire.com.

Thanks,
-Phil

[Vasili]

Re: Text menu on top of lightbox images

1. Have the page open in BV, and create a new blank page alongside your already published page.
2. Click once on the Lightbox to "select" it, then click the COPY icon in the Toolbar (it is critically important to use the icon shown in the top Toolbar itself and not the text command seen in the Toolbar menu).
3. Move to the new blank page and use the PASTE icon to paste it onto this new (temporary) page.
4. Go back to the original page, and delete the Lightbox.
5. Return to the "blank" page, click once on the Lightbox to 'select' and click on the COPY icon in the Toolbar.
6. Back on your original page, click on the PASTE icon to re-inset your Lightbox in the overall proper "Order" on the page.
7. Re-Save, Re-Publish.

[navaldesign]

Re: Text menu on top of lightbox images

Is it a Lightbox or a Photogallery ?

From your page code I see Photogallery.

If so, please try to place the following code in Page HTML, Between Head tag:


<style type="text/css">
div#bv_PhotoGallery1 {position: absolute;

z-index: 2015;
}
</style>



The problem is not due to the Gallery (or Lightbox) but to the fact that the menu (menu bar) is assigned by default a z-index equal to 2000 + the actual value, so it will appear on top of all other obect when it expands. Unfortunately there can't be two items on top, its either one or the other. However, with your layout, the fix I suggested should work.

[Vasili]

Re: Text menu on top of lightbox images

I would suggest that assigning such a default positioning (although well-intentioned) is actually an assumptive mistake in coding .... although it seems clever and assumes each User should appreciate such "convenience" of such a defaulted heirarchy of elements, clearly it is not universal and in many instances quite a bother to have to specially insert over-riding code to "correct" just to get layouts to behave as ought.

Since there apparently is not a "universal fix code" to circulate (as it seems the code offered must be individually "sized" according to specific layouts), how then is this issue to be resolved for every User effectively?

Just saying ...

[navaldesign]

Re: Text menu on top of lightbox images

There is no way, as this is the way HTML works. If you believe this is a bug or wrong coding, please post on the "BV Bugs" thread.

Browsers will display items "on top" of others, based on their z-index. Normally the lightbox / photogallery SHOULD be on top of everything else, and this is usually done using the Move to Front method. However, in that case, the (expanded) menubar will appear UNDER the gallery thumbnails. So, to keep menu bar (the only one that has the issue, because it expands in submenus) on top of thumbs, it is assigned a high (2000+) z-index.

In other words, it is a compromise.

As you understand you can't have two different items holding the same "space" in the page and both being "on top".

[pcondit]

Re: Text menu on top of lightbox images

Wow - Vasili and Navaldesign - I'm blown away by the extremely knowledgeable and detailed responses. Thank you both for your words of wisdom.
I tried inserting the code:

"<style type="text/css">
div#bv_PhotoGallery1 {position: absolute;

z-index: 2015;
}
</style>"

on the "Between Head Tag" tab in the page HTML, but it doesn't seem to have an effect in preview, or published mode. Did I do something wrong?

Thanks,
-Phil

[navaldesign]

Re: Text menu on top of lightbox images

Ok, please folow these steps:

Remove the code you added.
Publish the page
Download the file GALLERY.html FROM the site and open it in Notepad.
Change this line:

<div id="bv_Text2" style="margin:0;padding:0;position:absolute;left:6 1px;top:1451px;width:947px;height:30px;text-align:left;z-index:0;">

to

to<div id="bv_Text2" style="margin:0;padding:0;position:absolute;left:6 1px;top:1451px;width:947px;height:30px;text-align:left;z-index :2010;">

Save it and Upload the file again on the site. Refresh your browser to test.

[pcondit]

Re: Text menu on top of lightbox images

OK. I'm with you as far as replacing the line of code in the text document and saving it (as a text document - is this what you meant?), but I'm unclear on "Uploading the file again on the site."

[Vasili]

Re: Text menu on top of lightbox images

Accessed via your Control Panel, in your public-html/ directory (root directory) of your hosting account on the server you will find the GALLERY.html file which is what you need to modify itself using Notepad to open it with and make changes (so no text formatting is applied) after copying the file to your local system. Once you modify the file properly, you will re-Save it as a ".html" file (that you can open and edit using Notepad) and copy it back up to the server to the same place where you originally found and copied it down from, thus replacing it with the new updated coding.

[navaldesign]

Re: Text menu on top of lightbox images

Please also note that you can also try different valus for the z-index, both for the PhotoGallery and for the MenuBar.

<div id="bv_MenuBar2" style="margin:0;padding:0;position:absolute;left:7 8px;top:46px;width:882px;height:38px;text-align:left;z-index:2001;">

You can assign the menu bar (by manually editing the file as mentioned) to z-index:50 and the PhotoGallery to z-index:51

Some times very big, discontinoued values may "confuse" the browser.

[pcondit]

Re: Text menu on top of lightbox images

I followed all the steps (I think), but see no change on the website. I have screen grabs of what I did. If you have an email address I can send them to you. Thanks.

[navaldesign]

Re: Text menu on top of lightbox images

If you wish you can use my site contact form, but, to fix it for you, I will need your account Login details so I can fix it directly on the server.

[pcondit]

Re: Text menu on top of lightbox images

Thank you for fixing my website. One problem - it didn't last!?! When I checked the site today for other issues I found the text on top of the images again. How does that happen? Can anything be done?

Thanks!

[navaldesign]

Re: Text menu on top of lightbox images

Maybe you have republished the page ? As the code I see is the original one, not the one I fixed.
It is obvious that if you republish the page, the code is replaced by the original (faulty) one.

[pcondit]

Re: Text menu on top of lightbox images

Oh s**t!

I put a background color behind my background image because it was showing a white screen with text until the images loaded - and then I ... re-published.

Next time I'll point the gun at my head instead of my foot!

I guess I need to sort out my other problems before I revisit this.

Thanks for all your help. Sorry to screw things up.