More in this section

Forums / Developing with Sitefinity / Lightbox overlay only covers top part of browser background

Lightbox overlay only covers top part of browser background

5 posts, 0 answered
  1. Elmi
    Elmi avatar
    3 posts
    Registered:
    19 May 2008
    10 Sep 2008
    Link to this post
    When using the Lightbox display for an image gallery, the larger image pops up 'on top of' a dark overlay that covers the bottom page. But this overlay only covers the area that is visible in the browser when the scrollbar is at the very top, but not below that. Thus, if you scroll down and then click on a thumbnail, the Lightbox overlay will stop halfway across the screen instead of covering the entire bottom page.

    What can I do to make it cover the entire page, no matter how far it scrolls down?

    (I have also opened a support ticket for this problem)
  2. Pepi
    Pepi avatar
    981 posts
    Registered:
    31 Jan 2017
    11 Sep 2008
    Link to this post
    Hi Elmi,

    We are closing this thread as we have already replied to your inquiry in the support ticket you opened on the same topic.

    Kind regards,
    Pepi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. EuclidLibrary
    EuclidLibrary avatar
    18 posts
    Registered:
    28 Aug 2008
    10 Dec 2008
    Link to this post
    Can you (Sitefinity Devs) please provide the solution as I am having the same problem and obviously can not access the origanal poster's support tickets.
  4. EuclidLibrary
    EuclidLibrary avatar
    18 posts
    Registered:
    28 Aug 2008
    10 Dec 2008
    Link to this post

    After searching the web, here is the solution

    1.) Setup a conditional comment to initiate a unique variable in IE in GalleryLightboxListTemplate.ascx.

    <!--[if IE]>
    <script type="text/javascript">
    var blah='bleh';
    </script>
    <![endif]-->

    2.)  Where the lightbox script goes to get the height for the overlay insert a conditional statement to obtain the height.

    // stretch overlay to fill page and fade in  
    var arrayPageSize = getPageSize();  
    if(typeof blah=='undefined')  
    Element.setHeight('overlay', arrayPageSize[1]);  
    else 
    overlay.style.height=document.documentElement.scrollHeight+'px'

    and

    updateDetails: function() {  
          
            Element.show('caption');  
            Element.setInnerHTML( 'caption', imageArray[activeImage][1]);  
              
            // if image is part of set display 'Image x of x'   
            if(imageArray.length > 1){  
                Element.show('numberDisplay');  
                Element.setInnerHTML( 'numberDisplay'"Image " + eval(activeImage + 1) + " of " + imageArray.length);  
            }  
     
            new Effect.Parallel(  
                [ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }),   
                  new Effect.Appear('imageDataContainer', { sync: true, duration: resizeDuration }) ],   
                { duration: resizeDuration, afterFinish: function() {  
                    // update overlay size and update nav  
                    var arrayPageSize = getPageSize();  
    if(typeof blah=='undefined')  
            Element.setHeight('overlay', arrayPageSize[1]);  
    else 
    overlay.style.height=document.documentElement.scrollHeight+'px';  
                    myLightbox.updateNav();  
                    }  
     





     

  5. Pepi
    Pepi avatar
    981 posts
    Registered:
    31 Jan 2017
    11 Dec 2008
    Link to this post
    Hello Jeremy,

    The solution we have provided to Elmi was to remove the fixed height from the css style applying to the wrapper HTML element in the template. For example:

    1. The master page looks as follows:

    <form id="form1" runat="server"
        <asp:ScriptManager ID="ScriptManager" runat="server" /> 
           
        <div id="container"
            ... 
        </div> 
    </form> 

    2. The css style applying to the wrapper div looks like this:

    #container { 
        margin:0 auto
        position:relative/* puts container in front of distance */ 
        text-align:left
        height:700px
        width:803px
        margin:0 auto
        clear:left

    The marked row should be removed in order to resolve the issue.

    Kind regards,
    Pepi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Register for webinar
5 posts, 0 answered