4,001 Reply by Steven @ Juicebox

(5 replies, posted in Juicebox-Pro Support)

It sounds like the problem may be with your browser timing out whilst loading the page (which may be due to a temporary glitch with either your web server or internet connection).

I have just viewed your gallery in Firefox 27.0.1, Chrome 33, Safari 5.1.7, IE11 and Opera 19.0 and it displays and functions OK in all browsers on my PC.

If you continue to experience this issue, try one of the following (although it really should not make a difference as Juicebox should take care of this internally).

(1) Try putting the JavaScript embedding code after the <div id="juicebox-container"></div> line in your web page.

(2) Try enclosing the JavaScript embedding code in a jQuery $(document).ready() function:

$(document).ready(function() {
    new juicebox({
        backgroundColor: "rgba(51, 51, 51, 1.0)",
        configUrl: "config.xml",
        containerId: "juicebox-container",
        galleryHeight: "100%",
        galleryWidth: "100%",
        themeUrl: "res/juicebox/jbcore/classic/theme.css"
    });
});

Neither of the above should be necessary but if the page is not timing out (which may be the most likely explanation for the problem), then they would certainly be things to try to resolve the Juicebox Error: Cannot find div with id: "juicebox-container".

Go to forum: Juicebox-Pro Support

4,002 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

I'd like to have some empty space above my pictures and in that empty space / bar I like to see my homebutton top left and my     full-screen and thumbnail button up right (not next to the picture but in the bar / space).

This could be achieved using the following settings.

backButtonPosition="TOP"
backButtonHAlign="LEFT"
buttonBarPosition="TOP"
buttonBarHAlign="RIGHT"

When any element is positioned TOP, a top area (above and separate from the main images) will be used.
You can adjust the height of the top area using the topAreaHeight configuration option.

And will it look the same on tablets?

Due to the limited screen space on mobile devices, the TOP area is used only in Large Screen Mode (and Juicebox uses Small Screen Mode by default to display the gallery on mobile devices).
However, you can force Juicebox to display the gallery in Large Screen Mode on all devices and in all browsers by setting screenMode="LARGE".
For more information about Juicebox and Screen Modes, please see here.
Short descriptions of all the configuration options mentioned above can be found on the Config Options page.

Go to forum: Juicebox-Pro Support

4,003 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

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.

Go to forum: Juicebox-Pro Support

4,004 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

If your download link has expired, then please fill in this Download Link Request Form.
I do not personally have the ability to search through transaction records or generate new download links but filling in the form will ensure that the required information is passed on to the correct department who will be able to supply you with a new download link.
Make sure that you have JavaScript enabled in your browser before opening the download link and if you have trouble downloading the 1.64MB zip file, then please try a different browser.

Go to forum: Juicebox-Pro Support

4,005 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Lite Support)

I will ensure that this is made more clear in the next site update.

Go to forum: Juicebox-Lite Support

4,006 Reply by Steven @ Juicebox

(2 replies, posted in Juicebox-Lite Support)

You could introduce space around the entire stage or just the image by using the stagePadding or imagePadding configuration options. However, these options are available to Juicebox-Pro only (and are not available to Juicebox-Lite, the free version).
With Juicebox-Pro you could also set galleryTitlePosition="TOP" and then set galleryTitle="" (empty). You could then adjust the height of the top area using the topAreaHeight configuration option.

Unfortunately, all these suggestions are Pro only and there is nothing that can be done to achieve your goal using the available Lite options.

Go to forum: Juicebox-Lite Support

4,007 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

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.

Go to forum: Juicebox-Pro Support

4,008 Reply by Steven @ Juicebox

(2 replies, posted in Juicebox-Pro Support)

Juicebox is very much still being developed.
We are currently working on fixing bugs and adding new features and hope to release the next version sooner rather than later (although I cannot say with any certainty when this will be).
Juicebox version numbers follow the Major.Minor.Revision convention (e.g. v1.3.3) and the next release is planned as a minor release.
You can expect much more that just a revision (have a look at v1.2.0 or v1.3.0 in the Version History for an idea of how many entries there might be in the changelog) but it will still be in the major v1.x.x line so upgrades for existing customers will be free.

If you would like to be notified when a new version is released, please join our mailing list at the foot of our homepage, follow us on Twitter @JuiceboxGallery or subscribe to our blog RSS feed.

Go to forum: Juicebox-Pro Support

4,009 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

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.

Go to forum: Juicebox-Pro Support

4,010 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Lite Support)

The default value for the flickrTagMode configuration option (used by Juicebox-Lite) is ALL. Images must have all tags listed in flickrTags to be displayed.

Juicebox-Pro is required to change the value of flickrTagMode to ANY so that images with any (one or more) of the listed tags are displayed.

For reference, a complete list of Flickr Pro Options can be found here.

Go to forum: Juicebox-Lite Support

4,011 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

In the <head> section of your web page, add the following code:

<script type="text/javascript" src="gallery1/jbcore/juicebox.js"></script>
<script type="text/javascript">

    // Function to resize gallery
    function doLayout() {
        var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
        var headerHeight = $('#header').outerHeight();
        var galleryHeight = parseInt(windowHeight) - parseInt(headerHeight);
        $('#wrap').height(galleryHeight);
    }

    // Function to load selected gallery on demand using baseUrl
    function loadGallery(base) {
        new juicebox({
            containerId: 'juicebox-container',
            baseUrl: base
        });
    }

    // Run following code when page is initially loaded
    $(document).ready(function () {

         // Run function to resize gallery
        doLayout();

        // Ensure function to resize gallery is run when browser window size changes
        $(window).bind('resize', doLayout);

        // Run function to load Gallery #1
        loadGallery('gallery1/');
    });
</script>

In your 'Gallery' container in the <body> section of your web page (where you want the Juicebox gallery to appear), add the following code:

<div id="juicebox-container"></div>

Now, each link to a gallery on your web page will look something like this (although you could change the text for an image or a button instead).

<a href="#" onclick="javascript: loadGallery('gallery1/'); return false;">Gallery 1</a>

Go to forum: Juicebox-Pro Support

4,012 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

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; }.)

Go to forum: Juicebox-Pro Support

4,013 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

Unfortunately, this is a known bug (Facebook sharing does not currently work on mobile devices).
However, it has already been addressed and will be fixed in the next version of Juicebox-Pro.
If you would like to be notified when a new version is released, please join our mailing list at the foot of our homepage, follow us on Twitter @JuiceboxGallery or subscribe to our blog RSS feed.

Go to forum: Juicebox-Pro Support

4,014 Reply by Steven @ Juicebox

(5 replies, posted in Juicebox-Pro Support)

Here are a few things to try:

(1) Try scaling your web page for mobile devices by including the following <meta> 'viewport' tag in the <head> section of your page:

<meta id="sv-meta" name="viewport" content="width=device-width, initial-scale=1.0"/>

(2) Try setting expandInNewPage="TRUE"(in JuiceboxBuilder-Pro's 'Customize -> General' section) to see if this helps.
Using expandInNewPage="TRUE", the expanded gallery should be displayed on a new page (the 'full.html' page within the 'jbcore' folder) which already includes a <meta> tag similar to #1 above.

(3) The Button Bar icons can be sized manually using the buttonBarIconSize configuration option (in JuiceboxBuilder-Pro's 'Customize -> Button Bar' section) although this applies to both Small Screen Mode and Large Screen Mode.

Go to forum: Juicebox-Pro Support

4,015 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

I would recommend keeping each gallery in its own separate folder.
This helps keep things organized and you can then upload the complete gallery folders to your web server and embed the galleries in your web pages using the baseUrl method of embedding as documented here.

Go to forum: Juicebox-Pro Support

4,016 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

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; }

Go to forum: Juicebox-Pro Support

4,017 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Lite Support)

i would like when i click on expand button and enter full screen mode, to exit from gallery not just by clicking on expand button, but also if i click anywhere else  on stage, except on image.

Juicebox-Pro was not designed with such functionality in mind and there are no configuration options which you could set which would allow this behavior.

If you really wanted to try to achieve this, you would need to:
(1) Check with browser developer tools which Juicebox classes and/or ids within your gallery you would like to become clickable.
(2) Write some JavaScript code to run a function when these elements are clicked (perhaps using jQuery).
(3) Use the toggleExpand() Juicebox-Pro API method within your function to close the gallery.
(4) Use a JavaScript variable to keep track of whether or not the gallery is currently expanded (as you only want your function to fire toggleExpand() when the gallery is expanded).

Essentially, it might be possible to do but it would likely be complex to achieve and you may come across unforeseen issues which would need to be tackled whilst coding a solution.

Also than next and prev button should work only when i click on left or right side of image.

You can disable keyboard controls (arrow keys to navigate to previous/next images) by setting enableKeyboardControls="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> General' section).
You can also ensure that navigation buttons are not included in the Button Bar by setting showNavButtons="FALSE" ('Customize -> Button Bar').

Go to forum: Juicebox-Lite Support

4,018 Reply by Steven @ Juicebox

(2 replies, posted in Juicebox-Pro Support)

That's great! I'm glad that your problem has been resolved.
Thank you for posting back to let me know.

Go to forum: Juicebox-Pro Support

4,019 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

To open an existing gallery in JuiceboxBuilder-Pro, you should navigate towards and select the gallery folder itself (not the gallery's XML file).
Also, the gallery's XML file must be named 'config.xml' and be located directly inside the gallery folder.
If you have renamed or moved the XML file (using a configUrl), then JuiceboxBuilder-Pro will not be able to open the gallery.

Go to forum: Juicebox-Pro Support

4,020 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

Using:

flickrUserId="70797999@N03"

... instead of:

flickrUserName="Jessica Jennings"

... should work fine (and it did when I tried it in a test gallery).
However, I am glad that you can now successfully display your Flickr images in your Juicebox-Pro gallery.

Go to forum: Juicebox-Pro Support

4,021 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

Please check your email. I have sent you a message.
Thank you.

Go to forum: Juicebox-Pro Support

4,022 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

The Embedding Multiple Galleries examples rely on duplicating a template page for each gallery (and embedding a different gallery on each page).

An alternative solution would be to embed each gallery on demand within a single web page.
Try the following.
Create two galleries and name the gallery folders 'gallery1' and 'gallery2'.
Create a HTML file with the code below, put the file in the same directory as your two gallery folders and open it in a browser.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <style type="text/css">
            html, body {
                height: 100%;
                overflow: hidden;
            }
            body {            
                margin: 0px;
            }
            #header {
                background-color: #222222;
                color: #666666;
                font-family: sans-serif;
                font-size: 20px;        
                height: 50px;
                padding-top: 10px;
                text-align: center;
                width: 100%;
            }
            #header a {
                color: #666666;
                text-decoration: none;
            }
            #wrap {
                width: 100%;
            }    
        </style>
        <script type="text/javascript" src="gallery1/jbcore/juicebox.js"></script>
        <script type="text/javascript">

            // Function to resize gallery
            function doLayout() {
                var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
                var headerHeight = $('#header').outerHeight();
                var galleryHeight = parseInt(windowHeight) - parseInt(headerHeight);
                $('#wrap').height(galleryHeight);
            }

            // Function to load selected gallery on demand using baseUrl
            function loadGallery(base) {
                new juicebox({
                    containerId: 'juicebox-container',
                    baseUrl: base
                });
            }

            // Run following code when page is initially loaded
            $(document).ready(function () {

                 // Run function to resize gallery
                doLayout();

                // Ensure function to resize gallery is run when browser window size changes
                $(window).bind('resize', doLayout);

                // Run function to load Gallery #1
                loadGallery('gallery1/');
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="header">
            <a href="#" onclick="javascript: loadGallery('gallery1/'); return false;">Gallery 1</a>
            <span>&nbsp;</span>
            <a href="#" onclick="javascript: loadGallery('gallery2/'); return false;">Gallery 2</a>
        </div>
        <div id="wrap">
            <div id="juicebox-container"></div>
        </div>
    </body>
</html>

You could hopefully adapt the code above to work within your own scenario.
You could add as many galleries as you like and replace the header container with your own top menu.

Go to forum: Juicebox-Pro Support

4,023 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

There is a distinction between inserting images within a post and attaching them to a post.
Images need to be included in the Media Library and attached to a post to be displayed in your Juicebox gallery.

I have been unable to replicate the problem you are experiencing but if you allow me access to your WordPress installation, then I would be happy to take a look (and create a test gallery) to see if I can determine the cause of your problem.
If you are agreeable to this, please post back to let me know and I will send you a message with an email address which you can use to send me your WordPress installation login details.

Go to forum: Juicebox-Pro Support

4,024 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

It looks like your Flickr User Name is "Jessica Jennings" rather than "jessicajenningsphotography".
Try either:

flickrUserName="Jessica Jennings"

... or:

flickrUserId="70797999@N03"

Go to forum: Juicebox-Pro Support

4,025 Reply by Steven @ Juicebox

(4 replies, posted in Juicebox-Pro Support)

No problem.
I'm glad you have been able to resolve your problem.
Thank you for posting back to let me know.

Go to forum: Juicebox-Pro Support