4,001 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,002 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,003 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,004 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,005 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,006 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,007 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,008 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,009 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,010 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,011 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,012 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,013 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,014 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,015 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,016 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,017 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

4,018 Reply by Steven @ Juicebox

(4 replies, posted in Juicebox-Pro Support)

As far as I am aware, there is theoretically no maximum file size for the 'config.xml' file.
I have just created a sample gallery with a 'config.xml' file of over 2MB (equating to 8,500 images) and the gallery loads and functions fine, both locally and on a web server.

Try opening your gallery's 'config.xml' file directly in a browser to see if there is a syntax error which is causing the problem.
Otherwise, please post the URL to your gallery so that I can take a look for myself and hopefully help further.

Go to forum: Juicebox-Pro Support

4,019 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Pro Support)

@Harry@Layercake

Please see my reply to your query here in this forum thread.

Go to forum: Juicebox-Pro Support

4,020 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

You should not use the Lightroom Plug-in Manager. The Juicebox module is actually a web-engine plug-in (rather than a traditional Lightroom plug-in)
Instructions for installing the Juicebox module for Lightroom can be found here.
Essentially, you would just download the 'juicebox_lightroom_plugin.zip' package and unzip it into the folder specified in the instructions.
The procedure outlined in the link above works for both Lightroom 4 and Lightroom 5.
Instructions for upgrading the plugin from Juicebox-Lite (which it comes bundled with) to Juicebox-Pro can be found on the same page (link above).

Go to forum: Juicebox-Pro Support

4,021 Reply by Steven @ Juicebox

(6 replies, posted in Juicebox-Lite Support)

@AR22

Your code is fine.
It looks like the problem is that your version of Shadowbox will open images only (not web pages).
When downloading Shadowbox, make sure you select the checkbox for 'External sites and pages'.

Is there a way to put the contend in a shadowbox without the limitation of an iframe, which hides the 'Expand Gallery' button?

No. A Juicebox gallery must be embedded into a web page and when this web page is loaded into any other container (whether it is an iframe or Shadowbox), the Expand Button will automatically be disabled. This cannot be changed.
(It is not possible to 'embed' a Juicebox gallery directly into a Shadowbox modal window like you can embed a Juicebox gallery into a web page.)

Go to forum: Juicebox-Lite Support

4,022 Reply by Steven @ Juicebox

(2 replies, posted in Juicebox-Pro Support)

We plan to introduce a dedicated 'Email' button (for the gallery's Button Bar) in a future version of Juicebox but until this is implemented, one of the solutions below should work fine.

You could embed a mailto link in the Gallery Title or an image's title or caption by using HTML formatting as documented in these FAQs:
How do I add HTML formatting to image captions and titles?
How do I add HTML formatting to the Gallery Title or Back Button?

The code you would enter for the galleryTitle or an image's title or caption would be something like the following:

<a href="mailto:email@address.com">Click to email</a>

Alternatively, you could use the Back Button for your email link.
You would enter the following for the backButtonUrl:

mailto:email@address.com

.. and then enter "Click to email" for the backButtonText.

A further possible solution would be to convert the 'Open Image' button (displayed on the Button Bar) into a custom 'Email' button so if you currently use the 'Open Image' button for its intended purpose, you will not be able to implement the following.

  • Set every image's linkURL to 'mailto:email@address.com'.

  • Set every image's linkTarget to '_self'.

  • Set showOpenButton="TRUE" in your gallery's XML file.

  • Change the icon for the 'Open Image' button using the technique in the Using Custom Icons support section.

  • Change the toolip text for the 'Open Image' button using the languageList configuration option (so as not to confuse users).

Go to forum: Juicebox-Pro Support

4,023 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

Facebook have recently changed their pop-up sharing window and you may find that on your Facebook timeline, the image displayed may be the first image in the gallery rather than the selected image (or, as in your case, there may be no image displayed at all) but the link will still point towards the correct image in the gallery.
Unfortunately, there is nothing that you can do to resolve this at the moment.

In the next version of Juicebox-Pro, although it will still be possible to share individual images within a gallery, only one thumbnail (which can be specified by the user via an Open Graph 'Image' META Tag) will be used per gallery. This is due to new limitations imposed by Facebook on what data can be passed via their share URL.

The 'Juicebox Gallery' text you refer to is the taken from the following line in your '1928 Ford Model A Sedan.htm' page:

<meta property="og:title" content="Juicebox Gallery" />

When creating or editing a gallery in JuiceboxBuilder-Pro, the content of this meta tag is populated by the Gallery Title (from the 'Customize -> Lite' section). If the Gallery Title is completely empty, Juicebox uses the default text 'Juicebox Gallery'.
Possible solutions would be to:
(1) Give your gallery a Gallery Title but choose not to display it in the gallery by setting galleryTitlePosition="NONE".
(2) Just type in a single space for the Gallery Title (so that it is not completely empty).
(3) Edit your '1928 Ford Model A Sedan.htm' page in a plain text editor and change the content of the meta tag to whatever you like.

Go to forum: Juicebox-Pro Support

4,024 Reply by Steven @ Juicebox

(4 replies, posted in Juicebox-Pro Support)

Many thanks for the additional information.
It certainly sounds like the known bug that has already been logged and should be fixed in the next version.
Thank you for reporting the issue.

Go to forum: Juicebox-Pro Support

4,025 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

Though I select 10 images, only 3 will be shown.

(1) Are 3 or 10 images displayed in the 'Uploaded to this post' section when you edit the post containing the gallery and click on the 'Add Media' button?
(2) Are 3 or 10 images listed as being attached to the post containing the gallery in the Media Library itself?

If you are unable to attach more that 3 images to your post, then this is a core WordPress issue (and not directly related to Juicebox).
The process of uploading images and attaching them to posts is done purely by WordPress itself. Juicebox simply displays whatever images are attached to the post.

You should be able to attach an image to a post with the following process.

  • Edit the post containing the gallery.

  • Click the 'Add Media' button.

  • Select 'Insert Media' from the menu on the left (selected by default).

  • Select the 'Media Library' tab (also selected by default).

  • Drag and drop an image (or images) into the media window.

  • Close the media window.

If this does not work, then you should be able to go directly to the Media Library, upload an image (using the 'Add New' button) and then attach it to the post containing your gallery (via the 'Attach' link in the 'Uploaded to' column).

If neither of these processes work, then you might need to search through (or post in) the WordPress support forum for the problem "unable to attach images to post".

Go to forum: Juicebox-Pro Support