Text menu on top of lightbox images

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts
  • pcondit
    Sergeant

    • Jan 2012
    • 21

    Text menu on top of lightbox images

    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
    Moderator

    • Mar 2006
    • 14683

    #2
    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.
    . VodaWebs....Luxury Group
    * Success Is Potential Realized *

    Comment

    • navaldesign
      General & Forum Moderator

      • Oct 2005
      • 12080

      #3
      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.
      Navaldesign
      Logger Lite: Low Cost, Customizable, multifeatured Login script
      Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
      DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
      Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!

      Comment

      • Vasili
        Moderator

        • Mar 2006
        • 14683

        #4
        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 ...
        . VodaWebs....Luxury Group
        * Success Is Potential Realized *

        Comment

        • navaldesign
          General & Forum Moderator

          • Oct 2005
          • 12080

          #5
          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".
          Navaldesign
          Logger Lite: Low Cost, Customizable, multifeatured Login script
          Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
          DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
          Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!

          Comment

          • pcondit
            Sergeant

            • Jan 2012
            • 21

            #6
            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

            Comment

            • navaldesign
              General & Forum Moderator

              • Oct 2005
              • 12080

              #7
              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.
              Navaldesign
              Logger Lite: Low Cost, Customizable, multifeatured Login script
              Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
              DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
              Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!

              Comment

              • pcondit
                Sergeant

                • Jan 2012
                • 21

                #8
                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."

                Comment

                • Vasili
                  Moderator

                  • Mar 2006
                  • 14683

                  #9
                  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.
                  . VodaWebs....Luxury Group
                  * Success Is Potential Realized *

                  Comment

                  • navaldesign
                    General & Forum Moderator

                    • Oct 2005
                    • 12080

                    #10
                    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.

                    Navaldesign
                    Logger Lite: Low Cost, Customizable, multifeatured Login script
                    Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
                    DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
                    Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!

                    Comment

                    • pcondit
                      Sergeant

                      • Jan 2012
                      • 21

                      #11
                      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.

                      Comment

                      • navaldesign
                        General & Forum Moderator

                        • Oct 2005
                        • 12080

                        #12
                        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.
                        Navaldesign
                        Logger Lite: Low Cost, Customizable, multifeatured Login script
                        Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
                        DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
                        Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!

                        Comment

                        • pcondit
                          Sergeant

                          • Jan 2012
                          • 21

                          #13
                          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!

                          Comment

                          • navaldesign
                            General & Forum Moderator

                            • Oct 2005
                            • 12080

                            #14
                            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.
                            Navaldesign
                            Logger Lite: Low Cost, Customizable, multifeatured Login script
                            Instant Download Cart: a Powerfull, Customized, in site, DB driven, e-products Cart
                            DBTechnosystems.com Forms, Databases, Shopping Carts, Instant Download Carts, Loggin Systems and more....
                            Advanced BlueVoda Form Processor : No coding form processor! Just install and use! Now with built in CAPTCHA!

                            Comment

                            • pcondit
                              Sergeant

                              • Jan 2012
                              • 21

                              #15
                              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.

                              Comment

                              Working...
                              X