• Registered: 2014-01-22
  • Posts: 14

Topic: Page w/ embedded JB code: Top or bottom cut off [SOLVED]

Hello:
I've been struggling with a very simple site that uses embedded JB scripts to display photos on pages that each include an html banner.  Depending on the browser and how a page is accessed, something always gets cut off in the full-size image pages:  either the top of the page, which includes the banner, or the bottom, which includes the filenames and captions. 

See:  http://www.imagetree.org/family_friends … index.html

I tried a couple things, like resizing the JB gallery to something under 100% (that didn't work--for some reason, it causes the "no-script" version of the gallery to come up). 

I also followed the instructions under the Juicebox Embedding Guide and added code described under "Using a Resizable Gallery with a Header."   My page includes the javascript "function doLayout()".  But I was not able to resolve the problem. 

Any help or suggestions would be much appreciated!

Thanks!
Patrick

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Page w/ embedded JB code: Top or bottom cut off [SOLVED]

Your Juicebox gallery's height is currently defined as the difference between the height of the browser window and the height of the #header container but the #header container has not been given a height via CSS.
Give your gallery's #header container a fixed height in your CSS and your Juicebox gallery should take up the remainder height of the browser window.
Add something like the following to the CSS style section in your web page and your gallery should no longer be cropped at the bottom.

#header { height: 100px; }
  • Registered: 2014-01-22
  • Posts: 14

Re: Page w/ embedded JB code: Top or bottom cut off [SOLVED]

Hi Steven:
Thanks very much for the incredibly quick response.  Your team is amazing. 

I tried what you suggested.  With

#header { height: 40px; }

the banner displayed properly, but -- unfortunately -- the captions still don't show. 

Perhaps predictably, if I set

#header { height: 1px; }

the header gets squeezed out and the captions do show. 

Any thoughts?  Should I try to resize another element on the page?  Or reformat my banner, getting rid of the obsolete attributes and using CSS instead?

Thanks again,
Patrick

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Page w/ embedded JB code: Top or bottom cut off [SOLVED]

It looks like the problem may be with the position of the following line on your web page:

<script src="jbcore/juicebox.js"></script>

Some of the resizing code relies on jQuery (which is bundled within the 'juicebox.js' file) and the code is run before the 'juicebox.js' file is loaded.
Move the line to the top of the <head> section of your web page and this should hopefully solve your problem.

(You may also need to set a height for your web page's footer with code such as #footer { height:40px; }.)

  • Registered: 2014-01-22
  • Posts: 14

Re: Page w/ embedded JB code: Top or bottom cut off [SOLVED]

Hi Steven:
Thanks again for the follow-up.  Again, I tried what you suggested.  I put the code that loads the juicebox.js script

    <script src="jbcore/juicebox.js"></script>

at the top of the page.  But I found that this code needs to come after the script that creates the function "doLayout"--otherwise, the page does not load properly. 

Some good news and bad:

Good news:  This code does seem to resize the JB section of the pages properly.

Bad news:  My banner and the captions seem to load intermittently, depending on the browser used:
- IE11 only shows the banner on the thumbs pages.  On the full-size image pages, the banner is missing, but the captions are displayed.
- Safari 7.0.1 at first fails to load the banner, but it does load the photo captions.  However, if I navigate to the thumbs and then back to the full-size images, Safari displays the banner but does not show the captions.
- Firefox 27.0.1 always shows the banner, but it only displays captions for a few images.  For most of the photos, the captions are missing, and I cannot figure out what the pattern is (when captions appear and when they don't).

I tried many permutations, and I'd be happy to create new versions if you'd like to see what different tweaks produce. 

Again, I'd be grateful for any suggestions!

Thanks again,
Patrick

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Page w/ embedded JB code: Top or bottom cut off [SOLVED]

But I found that this code needs to come after the script that creates the function "doLayout"--otherwise, the page does not load properly.

The <script src="jbcore/juicebox.js"></script> line should come before the doLayout function.

If your page looks or loads differently in different browsers, then this can often be attributed to HTML errors on your page.
You can check your web page for HTML errors with the W3C Markup Validation Service and then fix any errors reported.
Once the code on your web page validates correctly, it should be rendered with greater predictability and consistently across different browsers.

Also, I notice that you essentially have two lots of embedding code in your web page.
The code within $(document).ready(function () { embeds the gallery in your web page so there is no need for the following code:

<script>
    new juicebox({
        containerId : 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: '#000000'
    });
</script>

Try something like the following:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bob & Dorothy's 50th Anniversary Celebration</title>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="description" content="Bob & Dorothy's 50th Anniversary Celebration">
        <!-- START OPEN GRAPH TAGS--> 
        <meta property="og:title" content="Bob & Dorothy's 50th Anniversary Celebration" /> 
        <meta property="og:type" content="website" />
        <meta property="og:url" content="" /> 
        <meta property="og:image" content="" /> 
        <meta property="og:description" content="Bob & Dorothy's 50th Anniversary Celebration" /> 
        <!-- END OPEN GRAPH TAGS--> 
        <style type="text/css">
            body {
                margin: 0px;
                background: #000000;
            }
            #header {
                height: 40px;
            }
            #footer {
                height: 40px;
            }
            .menu8 {
                font-family: Times New Roman;
                font-size: 14px; 
                font-weight: bold; 
                color: #AAAAAA; 
                background: #770000;
            }
            .menu8 A:link {
                font-family: Times New Roman;
                font-size: 14px; 
                font-weight: bold; 
                text-decoration: none; 
                color: #AAAAAA;
            }
            .menu8 A:visited {
                font-family: Times New Roman;
                font-size: 14px; 
                font-weight: bold; 
                text-decoration: none; 
                color: #AAAAAA; 
            }
            .menu8 A:hover {
                font-family: Times New Roman;
                font-size: 14px; 
                font-weight: bold; 
                color: #000000; 
                background: #FF7F7F;
            }
        </style>
        <!--<link href="/include/ImageTree1.css" rel="stylesheet" type="text/css">-->
        <script src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
        function doLayout() {
            var winHeight, headerHeight, footerHeight;
            winHeight = window.innerHeight ? window.innerHeight : $(window).height();
            headerHeight = $('#header').outerHeight();
            footerHeight = $('#footer').outerHeight();
            var newH = parseInt(winHeight) - parseInt(headerHeight) - parseInt(footerHeight);
            $('#juicebox-content').height(newH);
        }
        $(document).ready(function () {
            doLayout();
            $(window).bind('resize', doLayout);
            new juicebox({
                containerid : 'juicebox-container',
                backgroundColor: '#000000'
            });
        });
        </script>
    </head>
    <body>
        <div id="header">    
            <br>
            <table style="width: 95%; border: 0px; text-align: center;">
                <tr>
                    <td style="width: 25%; text-align: center;" class="menu8"><a href="/index.html"><b>&nbsp;Home: www.imagetree.org&nbsp;</b></a></td>
                    <td style="text-align: center;" class="menu8"><a href="/family_friends.html"><b>&nbsp;Family &amp; Friends&nbsp;</b></a>&nbsp;&nbsp;&nbsp;</td>
                    <td style="text-align: center;" class="menu8"><a href="/photo_links.html"><b>&nbsp;Links&nbsp;</b></a>&nbsp;</td>
                    <td style="text-align: center;" class="menu8"><a href="/sounds.html"><b>&nbsp;Sounds&nbsp;</b></a>&nbsp;</td>
                    <td style="text-align: center;" class="menu8"><a href="/Contact.html"><b>&nbsp;Contact&nbsp;</b></a>&nbsp;</td>
                </tr>
            </table>
        </div>
        <div id="juicebox-content">    
            <!--START JUICEBOX EMBED-->
            <div id="juicebox-container">
                <noscript>
                    <!-- Image gallery content for non-javascript devices -->
                    <h1>Bob & Dorothy's 50th Anniversary Celebration</h1>
                    <p>Bob & Dorothy's 50th Anniversary Celebration</p>
                    <p><img src="images/2013c5312d.jpg" title="2013c5312d" alt=""/><br>2013c5312d </p>
                    <p><img src="images/2013c5301d.jpg" title="2013c5301d" alt="Timothy!"/><br>2013c5301d Timothy!</p>
                    <p><img src="images/2013c5308d.jpg" title="2013c5308d" alt=""/><br>2013c5308d </p>
                    <p><img src="images/2013c5316d.jpg" title="2013c5316d" alt=""/><br>2013c5316d </p>
                    <p><img src="images/2013c5317d.jpg" title="2013c5317d" alt=""/><br>2013c5317d </p>
                    <p><img src="images/2013c5321d.jpg" title="2013c5321d" alt=""/><br>2013c5321d </p>
                    <p><img src="images/2013c5336d.jpg" title="2013c5336d" alt=""/><br>2013c5336d </p>
                    <p><img src="images/2013c5343d.jpg" title="2013c5343d" alt=""/><br>2013c5343d </p>
                    <p><img src="images/2013c5348d.jpg" title="2013c5348d" alt=""/><br>2013c5348d </p>
                    <p><img src="images/2013c5351d.jpg" title="2013c5351d" alt=""/><br>2013c5351d </p>
                    <p><img src="images/2013c5356d.jpg" title="2013c5356d" alt=""/><br>2013c5356d </p>
                    <p><img src="images/2013c5363d.jpg" title="2013c5363d" alt=""/><br>2013c5363d </p>
                    <p><img src="images/2013c5366d.jpg" title="2013c5366d" alt=""/><br>2013c5366d </p>
                    <p><img src="images/2013c5371d.jpg" title="2013c5371d" alt=""/><br>2013c5371d </p>
                    <p><img src="images/2013c5377d.jpg" title="2013c5377d" alt=""/><br>2013c5377d </p>
                    <p><img src="images/2013c5379d.jpg" title="2013c5379d" alt=""/><br>2013c5379d </p>
                    <p><img src="images/2013c5389d.jpg" title="2013c5389d" alt=""/><br>2013c5389d </p>
                    <p><img src="images/2013c5400d.jpg" title="2013c5400d" alt=""/><br>2013c5400d </p>
                    <p><img src="images/2013c5410d.jpg" title="2013c5410d" alt=""/><br>2013c5410d </p>
                    <p><img src="images/2013c5414d.jpg" title="2013c5414d" alt=""/><br>2013c5414d </p>
                    <p><img src="images/2013c5416d.jpg" title="2013c5416d" alt=""/><br>2013c5416d </p>
                    <p><img src="images/2013c5424d.jpg" title="2013c5424d" alt=""/><br>2013c5424d </p>
                    <p><img src="images/2013c5437.jpg" title="2013c5437" alt="Everyone"/><br>2013c5437 Everyone</p>
                    <p><img src="images/2013c5445d.jpg" title="2013c5445d" alt="The wedding attendees!"/><br>2013c5445d The wedding attendees!</p>
                    <p><img src="images/2013c5450d.jpg" title="2013c5450d" alt="The GE Crowd"/><br>2013c5450d The GE Crowd</p>
                    <p><img src="images/2013c5457d.jpg" title="2013c5457d" alt=""/><br>2013c5457d </p>
                    <p><img src="images/2013c5463d.jpg" title="2013c5463d" alt=""/><br>2013c5463d </p>
                    <p><img src="images/2013c5468d.jpg" title="2013c5468d" alt=""/><br>2013c5468d </p>
                    <p><img src="images/2013c5472d.jpg" title="2013c5472d" alt=""/><br>2013c5472d </p>
                    <p><img src="images/2013c5473d.jpg" title="2013c5473d" alt=""/><br>2013c5473d </p>
                    <p><img src="images/2013c5474d.jpg" title="2013c5474d" alt=""/><br>2013c5474d </p>
                    <p><img src="images/2013c5480d.jpg" title="2013c5480d" alt=""/><br>2013c5480d </p>
                    <p><img src="images/2013c5484d.jpg" title="2013c5484d" alt=""/><br>2013c5484d </p>
                    <p><img src="images/2013c5487d.jpg" title="2013c5487d" alt=""/><br>2013c5487d </p>
                    <p><img src="images/2013c5493d.jpg" title="2013c5493d" alt=""/><br>2013c5493d </p>
                    <p><img src="images/2013c5505d.jpg" title="2013c5505d" alt=""/><br>2013c5505d </p>
                    <p><img src="images/2013c5506d.jpg" title="2013c5506d" alt=""/><br>2013c5506d </p>
                    <p><img src="images/2013c5509d.jpg" title="2013c5509d" alt=""/><br>2013c5509d </p>
                    <p><img src="images/2013c5510d.jpg" title="2013c5510d" alt=""/><br>2013c5510d </p>
                    <p><img src="images/2013c5514d.jpg" title="2013c5514d" alt=""/><br>2013c5514d </p>
                    <p><img src="images/2013c5522d.jpg" title="2013c5522d" alt=""/><br>2013c5522d </p>
                    <p><img src="images/2013c5523d.jpg" title="2013c5523d" alt=""/><br>2013c5523d </p>
                    <p><img src="images/2013c5526d.jpg" title="2013c5526d" alt=""/><br>2013c5526d </p>
                    <p><img src="images/2013c5533d.jpg" title="2013c5533d" alt=""/><br>2013c5533d </p>
                    <p><img src="images/2013c5535d.jpg" title="2013c5535d" alt=""/><br>2013c5535d </p>
                    <p><img src="images/2013c5539d.jpg" title="2013c5539d" alt=""/><br>2013c5539d </p>
                    <p><img src="images/2013c5552d.jpg" title="2013c5552d" alt=""/><br>2013c5552d </p>
                    <p><img src="images/2013c5556d.jpg" title="2013c5556d" alt=""/><br>2013c5556d </p>
                    <p><img src="images/2013c5562d.jpg" title="2013c5562d" alt="We attempted that trip 3 times..."/><br>2013c5562d We attempted that trip 3 times...</p>
                    <p><img src="images/2013c5565d.jpg" title="2013c5565d" alt=""/><br>2013c5565d </p>
                    <p><img src="images/2013c5566d.jpg" title="2013c5566d" alt=""/><br>2013c5566d </p>
                    <p><img src="images/2013c5568d.jpg" title="2013c5568d" alt=""/><br>2013c5568d </p>
                    <p><img src="images/2013c5570d.jpg" title="2013c5570d" alt=""/><br>2013c5570d </p>
                    <p><img src="images/2013c5575d.jpg" title="2013c5575d" alt=""/><br>2013c5575d </p>
                    <p><img src="images/2013c5579d.jpg" title="2013c5579d" alt=""/><br>2013c5579d </p>
                    <p><img src="images/2013c5581d.jpg" title="2013c5581d" alt=""/><br>2013c5581d </p>
                    <p><img src="images/2013c5584d.jpg" title="2013c5584d" alt=""/><br>2013c5584d </p>
                    <p><img src="images/2013c5589d.jpg" title="2013c5589d" alt=""/><br>2013c5589d </p>
                    <p><img src="images/2013c5592d.jpg" title="2013c5592d" alt=""/><br>2013c5592d </p>
                    <p><img src="images/2013c5598d.jpg" title="2013c5598d" alt=""/><br>2013c5598d </p>
                    <p><img src="images/2013c5599d.jpg" title="2013c5599d" alt=""/><br>2013c5599d </p>
                    <p><img src="images/2013c5602d.jpg" title="2013c5602d" alt=""/><br>2013c5602d </p>
                    <p><img src="images/2013c5604d.jpg" title="2013c5604d" alt=""/><br>2013c5604d </p>
                    <p><img src="images/2013c5608d.jpg" title="2013c5608d" alt=""/><br>2013c5608d </p>
                    <p><img src="images/2013c5613d.jpg" title="2013c5613d" alt=""/><br>2013c5613d </p>
                    <p><img src="images/2013c5615d.jpg" title="2013c5615d" alt=""/><br>2013c5615d </p>
                    <p><img src="images/2013c5622d.jpg" title="2013c5622d" alt=""/><br>2013c5622d </p>
                    <p><img src="images/2013c5623d.jpg" title="2013c5623d" alt=""/><br>2013c5623d </p>
                    <p><img src="images/2013c5626d.jpg" title="2013c5626d" alt=""/><br>2013c5626d </p>
                    <p><img src="images/2013c5629d.jpg" title="2013c5629d" alt=""/><br>2013c5629d </p>
                    <p><img src="images/2013c5640d.jpg" title="2013c5640d" alt=""/><br>2013c5640d </p>
                    <p><img src="images/2013c5651d.jpg" title="2013c5651d" alt=""/><br>2013c5651d </p>
                    <p><img src="images/2013c5662d.jpg" title="2013c5662d" alt=""/><br>2013c5662d </p>
                    <p><img src="images/2013c5667d.jpg" title="2013c5667d" alt=""/><br>2013c5667d </p>
                    <p><img src="images/2013c5686d.jpg" title="2013c5686d" alt=""/><br>2013c5686d </p>
                    <p><img src="images/2013c5690d.jpg" title="2013c5690d" alt=""/><br>2013c5690d </p>
                    <p><img src="images/2013c5699d.jpg" title="2013c5699d" alt=""/><br>2013c5699d </p>
                    <p><img src="images/2013c5701d.jpg" title="2013c5701d" alt=""/><br>2013c5701d </p>
                    <p><img src="images/2013c5706d.jpg" title="2013c5706d" alt=""/><br>2013c5706d </p>
                    <p><img src="images/2013c5707d.jpg" title="2013c5707d" alt=""/><br>2013c5707d </p>
                    <p><img src="images/2013c5710d.jpg" title="2013c5710d" alt=""/><br>2013c5710d </p>
                    <p><img src="images/2013c5714d.jpg" title="2013c5714d" alt=""/><br>2013c5714d </p>
                    <p><img src="images/2013c5717d.jpg" title="2013c5717d" alt=""/><br>2013c5717d </p>
                    <p><img src="images/2013c5724d.jpg" title="2013c5724d" alt=""/><br>2013c5724d </p>
                    <p><img src="images/2013c5729d.jpg" title="2013c5729d" alt=""/><br>2013c5729d </p>
                    <p><img src="images/2013c5733d.jpg" title="2013c5733d" alt=""/><br>2013c5733d </p>
                    <p><img src="images/2013c5740d.jpg" title="2013c5740d" alt=""/><br>2013c5740d </p>
                    <p><img src="images/2013c5745d.jpg" title="2013c5745d" alt=""/><br>2013c5745d </p>
                    <p><img src="images/2013c5748d.jpg" title="2013c5748d" alt=""/><br>2013c5748d </p>
                    <p><img src="images/2013c5752d.jpg" title="2013c5752d" alt=""/><br>2013c5752d </p>
                    <p><img src="images/2013c5753d.jpg" title="2013c5753d" alt=""/><br>2013c5753d </p>
                    <p><img src="images/2013c5756d.jpg" title="2013c5756d" alt=""/><br>2013c5756d </p>
                    <p><img src="images/2013c5759d.jpg" title="2013c5759d" alt=""/><br>2013c5759d </p>
                    <p><img src="images/2013c5761d.jpg" title="2013c5761d" alt=""/><br>2013c5761d </p>
                    <p><img src="images/2013c5766d.jpg" title="2013c5766d" alt=""/><br>2013c5766d </p>
                    <p><img src="images/2013c5769d.jpg" title="2013c5769d" alt=""/><br>2013c5769d </p>
                    <p><img src="images/2013c5780d.jpg" title="2013c5780d" alt=""/><br>2013c5780d </p>
                    <p><img src="images/2013c5789d.jpg" title="2013c5789d" alt=""/><br>2013c5789d </p>
                    <p><img src="images/2013c5796d.jpg" title="2013c5796d" alt=""/><br>2013c5796d </p>
                    <p><img src="images/2013c5798d.jpg" title="2013c5798d" alt=""/><br>2013c5798d </p>
                    <p><img src="images/2013c5812d.jpg" title="2013c5812d" alt=""/><br>2013c5812d </p>
                    <p><img src="images/2013c5814d.jpg" title="2013c5814d" alt=""/><br>2013c5814d </p>
                    <p><img src="images/2013c5817d.jpg" title="2013c5817d" alt=""/><br>2013c5817d </p>
                    <p><img src="images/2013c5830d.jpg" title="2013c5830d" alt=""/><br>2013c5830d </p>
                    <p><img src="images/2013c5844d.jpg" title="2013c5844d" alt=""/><br>2013c5844d </p>
                    <p><img src="images/2013c5850d.jpg" title="2013c5850d" alt=""/><br>2013c5850d </p>
                    <p><img src="images/2013c5855d.jpg" title="2013c5855d" alt=""/><br>2013c5855d </p>
                    <p><img src="images/2013c5871d.jpg" title="2013c5871d" alt=""/><br>2013c5871d </p>
                    <p><img src="images/2013c5878d.jpg" title="2013c5878d" alt=""/><br>2013c5878d </p>
                    <p><img src="images/2013c5877d.jpg" title="2013c5877d" alt=""/><br>2013c5877d </p>
                    <p><img src="images/2013c5879d.jpg" title="2013c5879d" alt=""/><br>2013c5879d </p>
                    <p><img src="images/2013c5880d.jpg" title="2013c5880d" alt=""/><br>2013c5880d </p>
                    <p><img src="images/2013c5881d.jpg" title="2013c5881d" alt=""/><br>2013c5881d </p>
                    <p><img src="images/2013c5887d.jpg" title="2013c5887d" alt=""/><br>2013c5887d </p>
                    <p><img src="images/2013c5894d.jpg" title="2013c5894d" alt=""/><br>2013c5894d </p>
                    <p><img src="images/2013c5903d.jpg" title="2013c5903d" alt=""/><br>2013c5903d </p>
                    <p><img src="images/2013c5912d.jpg" title="2013c5912d" alt=""/><br>2013c5912d </p>
                    <p><img src="images/2013c5916d.jpg" title="2013c5916d" alt=""/><br>2013c5916d </p>
                    <p><img src="images/2013c5925d.jpg" title="2013c5925d" alt=""/><br>2013c5925d </p>
                    <p><img src="images/2013c5928d.jpg" title="2013c5928d" alt=""/><br>2013c5928d </p>
                    <p><img src="images/2013c5944d.jpg" title="2013c5944d" alt=""/><br>2013c5944d </p>
                    <p><img src="images/2013c5935d.jpg" title="2013c5935d" alt=""/><br>2013c5935d </p>
                </noscript>
            </div>
            <!--END JUICEBOX EMBED-->
        </div>  <!--end of juicebox-content-->
        <div id="footer">A footer (just for testing).</div>        
    </body>
</html>

For most of the photos, the captions are missing, and I cannot figure out what the pattern is (when captions appear and when they don't).

All your images have titles but only 5 of your gallery's 122 images have captions.
You can check this by opening your gallery in JuiceboxBuilder-Pro.

  • Registered: 2014-01-22
  • Posts: 14

Re: Page w/ embedded JB code: Top or bottom cut off [SOLVED]

Steven:

Thanks very much.  I tried using the code that you suggested, but it doesn't work.  It's here:

http://www.imagetree.org/family_friends/family/test4/

(It opens to a clunky-looking no-script version of the page, and my banner is missing.)

At your suggestion, I checked the index page for errors at the W3C Markup Validation Service, and I also checked the CSS code using their service.  Some of the attributes for my banner were obsolete, so I deleted them.  That leaves me with clean HTML5 code with a very simple banner at the top of the page, see:

http://www.imagetree.org/family_friends/family/test6/

But it still doesn't work.  The image files names, file count, and captions (for those photos that have captions) are missing from most images. 

[In response to one of your points, I should clarify that when I mentioned "captions" in my previous messages, I meant all of the info -- filenames, image count, and captions -- that should appear below each photo.  Many of my photos do not have captions, but filenames and image counts should appear for all of the pix.]

What I'm trying to do seems very straightforward: embed JB code into a simple HTML5 page with a bare-bones banner.  I even tried rebuilding everything with the JuiceboxBuilder app, but that didn't work either.  At this point, I'm beginning to wonder about the functionality of embedded Juicebox code.  Am I missing something?

Again, I'd be grateful for any suggestions!

Thanks again,
Patrick

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Page w/ embedded JB code: Top or bottom cut off [SOLVED]

The code I posted above validates correctly as HTML 5 code (I changed a few attributes in your table elements to CSS styles instead) and I tested the code before I posted it with a sample gallery of my own. The resizing seemed to work fine for me and the sample gallery displayed OK without any cropping. (The only things I woukld change would be to increase the #header height from 40px to 70px and to increase the top navigation menu table width from 95% to 100%.)
Your problem seems to be related to the gallery itself (rather than the embedding or the resizing script).

(It opens to a clunky-looking no-script version of the page, and my banner is missing.)

Your gallery currently displays the Splash Page, which, when clicked, opens the gallery on a page of its own. When the gallery is expanded (to fill the browser window) any custom elements on the original page (such as your top navigation menu) will no longer be visible until the fullscreen gallery is closed by clicking on the Expand Button on the Button Bar.
Change screenMode="SMALL" to screenMode="AUTO" and you should see the regular gallery display instead of the Splash Page. Also, the image titles and captions should be displayed in full like they are in the fullscreen version of your gallery at the moment (after the Splash Page is clicked).
For more information about Screen Modes and the use of the Splash Page, please see here.

  • Registered: 2014-01-22
  • Posts: 14

Re: Page w/ embedded JB code: Top or bottom cut off [SOLVED]

Steven:

Thanks.  I did finally manage to get what I was looking for.  Here’s the page:

http://www.imagetree.org/family_friends/family/test9/

The three primary things I did to get the result I was looking for were:

1. Include this line in the juicebox call:

galleryHeight: '93%',

My guess is that this clunky “solution” may be of limited usefulness for others.  However, because I display the same banner on most of my pages, it seems to work for me.

2. Drop the code that is supposed to dynamically reset the page size, that is 

function doLayout()
        var winHeight, headerHeight, footerHeight;
        winHeight = window.innerHeight ? window.innerHeight : $(window).height();
etc., etc.

It never worked for me.

3. Turn off the splash page (set “showSplashPage” to “NEVER”).  The splash page was coming up automatically when I reset the gallery height.  (I’m not a fan of the splash page.)

In response to your message, I should clarify that I strongly prefer the "SMALL" screenMode, so this suggestion was not an option for me:

Change screenMode="SMALL" to screenMode="AUTO" and you should see the regular gallery display instead of the Splash Page.

Thanks again for your help,
Patrick

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Page w/ embedded JB code: Top or bottom cut off [SOLVED]

My solution seemed to work fine when I tested it with a sample gallery of my own but as long as you have a solution that works and that you are happy with, that's great!
Thank you for taking the time to post back with details of how you achieved your solution.