6 Replies Latest reply on May 23, 2010 4:36 PM by johngordon12

    Lightbox script conflicting with image rotator script

    johngordon12 Level 1

      Hope someone can help with this....

       

      Basically I have added a Lightbox gallery, which is all working as it should here -

       

      http://www.goodsafariguide.com/new/gallery.php

       

      However, the large photos can render underneath the two sets of rotating images - the ones near the top of various resorts, and the one on the left hand side showing sponsor's logos. It only seems to do it sometimes with the set at the top, but always with the Award Sponsors one.

       

      If it doesn't show with the page as it loads, you can see what I mean by scrolling down until the Awards Sponsors graphic is about halfway down the screen.

       

      So my question is really just to ask if there's a way of ensuring that the Lightbox photos do appear over everything else on the page?

       

      Thanks.

        • 1. Re: Lightbox script conflicting with image rotator script
          jxlusa Level 2

          Did you get this fixed?

          I am not seeing the problem in either IE7 or FierFox. If it's still a problem let us know in which browser you are seeing it.

           

          If it's not fixed, thre first thhing that comes to mind is to try raising the z-index of #lightbox another decimal place.

          right now you have

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

          so, without spending a lot of time looking through your stylsheets, I would try:

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

          or even:

          #lightbox{    position: absolute;    left: 0; width: 100%; z-index: 10000; text-align: center; line-height: 0;}

          • 2. Re: Lightbox script conflicting with image rotator script
            johngordon12 Level 1

            Thanks for that - I was a total doofus last night (addled brain!), and so as a temporary measure removed the Awards Sponsors logos from the page.

             

            I made the change you suggested above, which did fix it in part - the lightbox images do now appear at the front, but the Awards Sponsors graphic is not fading, so its still not quite ideal :

             

            http://www.goodsafariguide.com/new/gallery.php

            • 3. Re: Lightbox script conflicting with image rotator script
              johngordon12 Level 1

              Just to say I've taken the Awards Sponsors graphic out of the page above again, but have a copy with it still there here :

               

              http://www.goodsafariguide.com/new/gallery2.php

              • 4. Re: Lightbox script conflicting with image rotator script
                hans-g. Adobe Community Professional & MVP

                Hi lain,

                 

                you don't want that we can see the sponsor images, rigt? If that's true, my proposal would be to make darker the background of the projectioned images. These would mean a change in the prototype.js here:

                 

                      'alpha(opacity=' + (value * 100) + ')';

                 

                I tried it with this:

                 

                      'alpha(opacity=' + (value * 500) + ')';

                 

                and it was very, very dark there.Hans-G.

                • 5. Re: Lightbox script conflicting with image rotator script
                  jxlusa Level 2

                  HI Ian, It looks right to me now in both FireFox and IE7. I haven't checked in IE8, which does have some Javascript interpretation problems. Hopefully you are not running into those here.

                   

                  Not specifically for this problem, but, for general css managablity and neatness, I usually try to group my z-index levels by either tens or hundreds, according to application. That is, If I have layers,

                   

                  I will use z-index: 10 for the first layer then anything inside that layer that might need a z-index will get 11, 12, etc.

                  and z-index 0 for the second layer with anything inside it using 21, 22, etc.

                  After that, I'll use 100 for javascript layers, and anything controlled by them that need indexing will get z-inde: 110, 120, etc.

                  Then use 200 for the next JS layer, and so on.

                  A lightbox that covers the whole page will get z-index: 1000, with nesteed elements getting 1100, 1200, etc.

                   

                  This allows me to keep it straight in my mind how everything overlaps, as well as make finer adjustments where needed, without interfering with any layers above or below the one I'm concerned with.

                   

                  Of course, it's rare that it gets very complicated, but I like to keep this as a good habit for myself since clients (even if I'm the client) have a way of surprising you with extra functionality requests after you've gotten something built.

                  • 6. Re: Lightbox script conflicting with image rotator script
                    johngordon12 Level 1

                    Thanks for that - I don't really run into layers too often, so never really know what the z-index values are doing.

                     

                    I got it all working by upping a couple of other z-index values in the lightbox CSS.

                     

                    Appreciate you taking the time to look, and the above about the z-index property.