Please see this FAQ:
When I view my gallery I see the message 'Config XML file not found'. How do I fix this?

Currently, your paths (the path to the 'juicebox.js' file and the baseUrl) are relative to the web page containing the embedding code.
I do not know the structure of your web site so I do not know if these paths are correct.
However, knowing that your 'Gallery' folder is in your root directory ('public_html'), you could use leading slashes in your paths to make the paths are relative to your root directory (rather than the current directory).

<!--START JUICEBOX EMBED-->
<script src="/Gallery/jbcore/juicebox.js"></script>
<script>
  new juicebox({
    baseUrl : '/Gallery/',
    containerId : 'juicebox-container',
    galleryWidth : '800',
    galleryHeight : '600',
    backgroundColor: '#222222'
  });
  </script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Also, please check the following:
(1) Make sure that the gallery's XML file is named 'config.xml'. (If you rename the file, you will need to use the configUrl configuration option to point towards it.)
(2) Make sure that the gallery's XML file is directly inside the 'Gallery' gallery folder (and not in a subfolder or elsewhere).
(3) Make sure that the permissions of the gallery's XML file on your web server are not too restrictive. Default permissions of 644 should be fine. You can check and change file permissions using an FTP program (such as Filezilla) or via the File Manager in your web hosting account's online cPanel.

I hope these tips help. However, if you continue to experience difficulties, then please post the URL to your gallery's web page so that I can see the problem for myself and hopefully help further. Thank you.

I would recommend that you save each gallery to a separate folder.
This helps to keep things organized and prevents files and folders from one gallery being overwritten by those of another.
It also makes editing a gallery much easier in the future as all the files for each gallery will be in their own folders.

You can even upload the complete gallery folders to your web server (rather than just the contents) and then embed the galleries in your web pages using the baseUrl method of embedding documented here. (The baseUrl configuration option points towards a complete gallery folder.)

Thank you for reporting this problem.
I have been able to replicate the problem in a test case and have logged a bug report with the developers.

Until the bug is fixed, the only workaround I have discovered so far is to stagger the start of each gallery's AutoPlay by using the Juicebox-Pro API toggleAutoPlay() method instead of setting autoPlayOnLoad="TRUE" and then delaying the firing of this method for each gallery with setTimeout functions of increasing values.
Here is what the embedding code might look like for three galleries on the same page:

<script>
    var jb1 = new juicebox({
        baseUrl: 'g1/',
        showAutoPlayButton: 'TRUE',
        containerId: 'juicebox-container-1',
        galleryWidth: '400',
        galleryHeight: '600',
        backgroundColor: '#222222'
    });
    jb1.onInitComplete = function() {
        window.setTimeout(function() {
            jb1.toggleAutoPlay();
        }, 200);
    };
</script>
<div id="juicebox-container-1"></div>

<script>
    var jb2 = new juicebox({
        baseUrl: 'g2/',
        showAutoPlayButton: 'TRUE',
        containerId: 'juicebox-container-2',
        galleryWidth: '400',
        galleryHeight: '600',
        backgroundColor: '#222222'
    });
    jb2.onInitComplete = function() {
        window.setTimeout(function() {
            jb2.toggleAutoPlay();
        }, 400);
    };
</script>
<div id="juicebox-container-2"></div>

<script>
    var jb3 = new juicebox({
        baseUrl: 'g3/',
        showAutoPlayButton: 'TRUE',
        containerId: 'juicebox-container-3',
        galleryWidth: '400',
        galleryHeight: '600',
        backgroundColor: '#222222'
    });
    jb3.onInitComplete = function() {
        window.setTimeout(function() {
            jb3.toggleAutoPlay();
        }, 800);
    };
</script>
<div id="juicebox-container-3"></div>

If you created the 'config.php' file in a text editor, please make sure that it is named 'config.php' and that it does not have a different file extension such as 'config.php.txt'.

Also, please check that your web server has PHP installed on it. (Most web servers have PHP installed by default but it would be worth checking to be sure.)

If you continue to experience difficulties, please post the URL to your gallery's web page so that I can see the problem for myself and hopefully help further.
It might also help if you could zip your complete gallery folder and upload it somewhere (and provide a download link) so that I can take a look at all your files together and figure out what the problem is. Thank you.

If you want to be able to upload images to a designated folder and have them displayed in your gallery without the need to modify any gallery files, then please see the example in this forum post.

Yes. Using the method in the forum post, when the gallery is viewed, the 'config.xml' file will be built dynamically (on the web server by the PHP script) using the image data from the designated folder.

@marathonmax

The bugfix you quoted ensures that images are scaled to fill the thumbnail dimensions. (Images were previously only cropped.)

For example, prior to the bugfix, if you had a thumbURL image which had dimensions of 1024 x 768 and your thumbWidth and thumbHeight were both 85 (default values), then the actual thumbnail displayed in the gallery would be just the centre 85 x 85 of the original image.
However, now (post-bugfix), the 1024 x 768 image will be scaled to fill the thumbnail dimensions so the height of the original image will be scaled down (from 768 to 85) to fill the thumbnail height and the width will be cropped (losing 256 pixels).

Basically, pre-bugfix, the images used for the thumbnails really had to be the same dimensions as the thumbWidth and thumbHeight (although this would not have been a problem when using JuiceboxBuilder-Pro to build a gallery). Now though, it is possible to use images of any dimensions for the thumbnails (although cropping will occur if the aspect ratios of the source images and thumbnail dimensions do not match exactly). This would be useful if someone wanted to use a single folder of images for both the main images and the thumbnails in a gallery.

Thumbnails do not need to be square (you can set thumbWidth and thumbHeight independently of each other) but all thumbnails in a gallery will have the same dimensions.

Please note that thumbWidth and thumbHeight are Pro-only options which are not available in Juicebox-Lite, the free version.

You're welcome.

A Juicebox gallery container is essentially just a <div> on a web page and a Juicebox gallery will resize in exactly the same way as any other <div> with similar dimensions would.
If you want a gallery container to retain a constant aspect ratio at all times, then please see the example in this forum post.

Here's an example of how you can find the actual height of the current image being displayed in the gallery (using JavaScript and the Juicebox-Pro API).
Just create a sample gallery with JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var jb = new juicebox({
                containerId: "juicebox-container"
            });
            jb.onImageChange = function(e) {
                var index = e.id;
                var info = jb.getImageInfo(index);
                var url = info.imageURL;
                var image = new Image();
                image.src = url;
                var height = image.height;
                alert('Actual height of current image is ' + height + 'px.');
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

Please note that this will provide the actual height of the file in the 'images' folder (not the height at which the image is displayed in the gallery which will depend on factors such as the gallery dimensions, the browser window size and whether or not gallery elements reserve space in the gallery reducing the available image area).

If you wanted to act upon the actual height of the current image and change the gallery's height to suit the current image's height you could do something like the following:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="minimal-ui" />
        <style type="text/css">
            body {
                margin: 0px;
            }
            #wrap {
                width: 100%;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var widthInteger = 600;
            var widthString = widthInteger.toString();
            var jb = new juicebox({
                containerId: "juicebox-container",
                galleryHeight: "400",
                galleryWidth: widthString,
                imageScaleMode: "SCALE"
            });
            jb.onImageChange = function(e) {
                var index = e.id;
                var info = jb.getImageInfo(index);
                var url = info.imageURL;
                var image = new Image();
                image.src = url;
                var height = image.height;
                var width = image.width;
                var newHeight = Math.floor((widthInteger/width)*height) + 105;
                jb.setGallerySize(widthString, newHeight);
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="wrap">
            <div id="juicebox-container"></div>
        </div>
    </body>
</html>

The gallery would have a constant width (600px in the example) and its height would be dependent on the height of the current image. The '105' value adds enough height to the gallery to accommodate the thumbnails and the thumbnail padding at their default values of '85' and '10' (top and bottom).

Thank you for reporting this issue.
I have logged a bug report with the developers and hopefully it will be fixed in a future version of Juicebox.
In the meantime, you could perhaps tweak the position of the Button Bar using code such as the following in the <head> section of your gallery's web page:

<style type="text/css">
    .jb-bb-bar {
        margin-left: -2px !important;
    }
</style>

It worked for me (with your menu covering both the gallery's Button Bar and caption area) when I dynamically added the code to your web page locally using the developer tools in Firefox.

Please try changing lines 2704-2712 in your bootstrap.min.css file from:

.collapse {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height .35s ease;
    -moz-transition: height .35s ease;
    -o-transition: height .35s ease;
    transition: height .35s ease
}

... to:

.collapse {
    z-index: 9999;
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height .35s ease;
    -moz-transition: height .35s ease;
    -o-transition: height .35s ease;
    transition: height .35s ease;
}

... and clear your browser's cache before reloading your web page to ensure that your browser is using the new version of the CSS file.

If this still does not work, then please let me know and I'll take another look.

Also, the link I posted above (regarding UberMenu and 'z-index' values) should help.
http://sevenspark.com/diagnosis/z-index … rm_ref=877

As the new Lightoom plugin no longer has a Pro Option text area, you would need to use one of the available configuration options to enter your custom data.
I would recommend using an input field which accepts text and will not actually be used in your own gallery. For example, if you are not using audio in your gallery, you could use the audioUrlMp3 field.

Add the following to the plugin's 'config.xml' file (on line 48 which is currently blank):

<% local dir = ""
if mode ~= "preview" then
    dir = model.juicebox.audioUrlMp3
end %>

... and change line 54 from:

<image imageURL="images/<%= getImage(index).exportFilename %>.jpg" thumbURL="thumbs/<%= getImage(index).exportFilename %>.jpg" linkURL="<%= getImage(index).metadata.linkURL %>" linkTarget="_blank">

... to:

<image imageURL="<%= dir %>images/<%= getImage(index).exportFilename %>.jpg" thumbURL="thumbs/<%= getImage(index).exportFilename %>.jpg" linkURL="<%= getImage(index).metadata.linkURL %>" linkTarget="_blank">

You can then enter something like the following into the audioUrlMp3 field:

http://www.example.com/juicebox/gallery/

... and the imageURL entries will look like this:

imageURL="http://www.example.com/juicebox/gallery/images/image.jpg"

Please note that the line numbers refer to the current version of the plugin (v1.4.4.0).