When making a new Gallery, open this one;
insert a different name and then, in "Publish", choose a new location in which to save it;
and hit SAVE.

Now open the new file; go to IMAGES and delete all of the existing inhabitants.
Then drag and drop replacement images into their place and, in "Publish", hit SAVE again.

Refine the gallery names in the resulting new Gallery and insert an updated Splash page etc.,
and Save again.

I find that by doing this, the new images insert themselves at great speed instead of the glacial pace that is normally experienced.

Hope that this idea will prove useful!

If necessary, you can rotate an image in JuiceboxBuilder by selecting its corresponding thumbnail on the Images panel and then clicking the Rotate Button near the bottom-right corner of the panel.

If an image displays in an unexpected orientation in JuiceboxBuilder, then the best thing to do is to remove the EXIF data from the image (in an imaging program such as Photoshop) and then rotate the image until it is visibly correct.

When JuiceboxBuilder resizes images for a gallery, it strips out all metadata, so if an image looks OK in JuiceboxBuilder (where metadata is not used), then it should also look OK in the gallery (where metadata is not present).

(1) Download the XAMPP installer from here: https://www.apachefriends.org/download.html

(2) Run the installer file to install XAMPP. Default settings are fine but you only need Apache and PHP (which are selected by default and cannot be deselected).

(3) Run XAMPP Control Panel.

(4) Start the Apache module (click the 'Start' button next to 'Apache' under 'Actions').

(5) Copy your Juicebox gallery folder to the C:\xampp\htdocs\ directory.

(6) Preview your gallery by opening your browser of choice and entering the following into the browser's address bar: localhost/gallery_folder_name/index.html

Tips:

(1) You can install the Apache module as a Windows service if you like (via the checkbox under the Service heading in the XAMPP Contol Panel) so that it automatically starts on boot (to save you from having to manually start the service each time you boot your computer).

(2) You can save your gallery folders directly to the C:\xampp\htdocs\ directory (on JuiceboxBuilder's 'Publish' tab) to save you from having to copy them there manually.

Suggestion #1:

The most likely cause of unresponsive 'New Gallery...' and 'Open Gallery...' buttons is a persistent '.tempGallery' folder.
JuiceboxBuilder-Pro creates a temporary folder (named '.tempGallery') whilst a gallery is being created or edited. This folder is automatically deleted on closing JuiceboxBuilder-Pro.
However, if for any reason JuiceboxBuilder-Pro is unable to delete the '.tempGallery' folder on closing the application, then the 'New Gallery...' and 'Open Gallery...' buttons may become unresponsive the next time the program is used.

The most likely cause of a persistent '.tempGallery' folder is the use of an online synced file-sharing folder so we do not recommend saving a gallery to (or opening a gallery from) a folder being synced to an online file-sharing service (e.g. Box, Dropbox, Google Drive, iCloud, OneDrive).

Even if you do not save or open a gallery from a synced location, JuiceboxBuilder-Pro stores files in the Documents folder and if your Documents folder is being synced, this could potentially cause problems, too. If your entire Documents folder is being synced, then, if possible, exclude the 'JuiceboxBuilder-Pro' inside the Documents folder from being synced.

On a Windows system, the '.tempGallery' folder is located here:

• C:\Users\Username\Documents\JuiceboxBuilder-Pro\.tempGallery

I'm not sure of the location of this folder on a Mac but if you search for '.tempGallery', you should hopefully find it.

With JuiceboxBuilder-Pro closed, please check to see if your own system has a '.tempGallery' folder in this location and, if so, manually delete it before re-opening JuiceboxBuilder-Pro.

If you do use a file-sharing sync service, try temporarily disabling it (turning off its active sync) to see if this helps.

Suggestion #2:

If you have any third-party anti-virus or security software installed, then please try temporarily disabling it (including real-time protection and ransomware detection) in case it is somehow interfering with JuiceboxBuilder-Pro's functionality.
(Please do so at your own risk and be sure to disconnect from the internet first.)
If you find that your security software is interfering with JuiceboxBuilder-Pro's functionality, then hopefully you'll be able to make an exception for JuiceboxBuilder-Pro in your security software's whitelist.

Suggestion #3:

The problem could be caused by corrupt data in the Encrypted Local Store (ELS) folder. Clearing this data may help.
With JuiceboxBuilder-Pro closed, please delete the following folder manually before restarting JuiceboxBulder-Pro.
Mac: /Users/Username/Library/Application Support/Adobe/AIR/ELS/JuiceboxBuilder-Pro
Windows: C:\Users\Username\AppData\Roaming\Adobe\AIR\ELS\JuiceboxBuilder-Pro

You may need to show hidden files to find some of the above locations in Windows File Explorer. Open File Explorer from the taskbar. Select 'View > Show', then select 'Hidden items' to view hidden files and folders.

Suggestion #4:
The problem could be caused by an administrative rights issue.
Make sure that you are using an administrator user account and, when installing AIR on Windows, right-click the AIR installation file and select 'Run as administrator' (rather than just double-clicking the file). (This is not an option with JuiceboxBuilder-Pro itself so don't worry when you don't see this option on the JuiceboxBuilder-Pro installation file.)

Suggestion #5:

The problem could be caused by a corrupt user profile.
Try creating a new administrator user account on your computer and installing both AIR and JuiceboxBuilder-Pro under this new user account.

Suggestion #6:

If none of the suggestions above help, then I'd recommend completely uninstalling and and then reinstalling both AIR and JuiceboxBuilder-Pro (taking the opportunity to ensure that both programs are up to date).
The full uninstall/reinstall procedure is documented as #11 in this forum post.
You can download the latest version of AIR from Harman's website here.

Note for Juicebox-Lite users:

The notes above refer to Juicebox-Pro/JuiceboxBuilder-Pro but apply equally to Juicebox-Lite/JuiceboxBuilder-Lite.
If you are having problems with JuiceboxBuilder-Lite, then just follow the suggestions above but replace any instances of 'Juicebox-Pro' and 'JuiceboxBuilder-Pro' in any paths with 'Juicebox-Lite' and 'JuiceboxBuilder-Lite' respectively.

[Edit: Link updated 7 February 2025.]

When one tries to launch JB Pro on a Mac M, you may get a message that you do not have "Permission" to access the file but no helpful suggestion for overcoming that situation is provided.

The answer is actually that you must run JB on an M Mac in Rosetta mode.

Select the JBPro icon in Applications;
Get Info for the JB Pro software;
in the panel that opens, check the box to use Rosetta.

JB Pro will then launch in the normal way.

Hope this helps someone else!

Ann

Scenario #1:
A Juicebox gallery will be responsive (and will dynamically scale with the size of the user's browser window) if the gallery's own dimensions and the dimensions of all parent containers are expressed as percentages. If there is a fixed value anywhere up the chain, then the gallery's size will become fixed (e.g. 100% x 100% x 800px = 800px).
Please note that when using percentage heights, you may need to implement the suggestion noted here.

Scenario #2:
You could use JavaScript to listen for a change in the size of the user's browser window and assign new dimensions to the Juicebox gallery if and when this happens.
An example of this can be found in the resizable galleries support section here.
Take a look at the source of this sample gallery in your browser to see how this might be achieved.

This is quite a long post, so get a drink, sit down and enjoy.

What does it do?

This solution allows you to load multiple galleries into the same page, but inside tabs. I am using bootstrap 5,1, but is should work with any tab implementation.

Doesn't sound hard.

That's what I thought. Simply load the galleries inside the tab contents when the page loads.
Job done, right?
Wrong!
What happens is Juicebox loads the gallery responsively into the available space, but a tab that isn't active is tiny. So the gallery loads into a tiny space and looks terrible. If you specify the size of the gallery it is no longer responsive, and this was not an acceptable compromise.

So what next?

Search the forums for a solution. There are a couple of posts, with solutions, that helped. But I wanted something simpler, easier to implement, and to understand (I'm not a great javascript developer, so simple is my goal). Plus I might have to support it in future, so make my future job as easy as possible!

So how did you do it?

Basically I don't load the gallery until the tab is activated - in this case when the tab button is clicked. This means the availabe space to load the gallery into is responsive to the browser/screen size.

OK, but how did you do that?

Firstly I used a function to load the gallery when it is called, I got this from another forum post, and repurposed it to my needs. I put it in the <head> of the page, so it is available as soon as it is needed.

    <script>
    function loadGallery(base, container) {
        new juicebox({
            baseUrl : base,
            containerId: container,
            galleryWidth: "100%",
            galleryHeight: "100%",
            backgroundColor: "Transparent"
        });
    }
    </script>

When the loadGallery function is called it will load a juicebox gallery from the given location into the specified container. This is default juicebox way of loading a gallery, and is well documented in the juicebox support documentation.
Additionally I set width and height to 100%, maximising the size the gallery is displayed at based on the container size, screen size, and browser size.
Finally I set the background colour to transparent, I do this so there is no coloured box seen before the gallery loads. This is personal choice, so you can set whatever colour you like.

No, there's more.

I am using Bootstrap 5.1 in this project, so all layout and class names are specific to a default bootstrap implementation. If you want to do the same, there is lots of information and examples on the bootstrap website. Please have a look at that before using it.
I am using the default bootstrap CSS and javavscript from their CDN in this example.

Oh, so I need to understand bootstrap 5.1 as well.

A little, yes. But it is not essential, as the example web page (below) is well laid out and pretty basic, as well as having some comments in it.

OK, get on with it.

Alright, here we go.

First you set up the tabs. In bootstrap this can be done in many ways, but my preferred method is to use HTML buttons in an unordered list.

Here is the HTML, the important parts for juicebox are the button id names, as we will use these later to decide when to load the galleries. The HTML layout and classes are bootstrap defaults, and are important for functionality and styling.

<!-- List of 3 tabs as buttons, as per bootstrap examples, make sure the label names are consistent, eg gallery1 -->

            <ul class="nav nav-tabs mt-3 pt-3" id="myTab" role="tablist">

                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="gallery1-tab" data-bs-toggle="tab" data-bs-target="#gallery1" type="button" role="tab" aria-controls="gallery1" aria-selected="true">Gallery 1</button>
                </li>

                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="gallery2-tab" data-bs-toggle="tab" data-bs-target="#gallery2" type="button" role="tab" aria-controls="gallery2" aria-selected="false">Gallery 2</button>
                </li>

                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="gallery3-tab" data-bs-toggle="tab" data-bs-target="#gallery3" type="button" role="tab" aria-controls="gallery3" aria-selected="false">Gallery 3</button>
                </li>

            </ul>
<!-- End of tab list -->

The aria stuff you see is related to accessibility, and is also part of the default bootstrap examples - in addition to being very important for many users. It is easy to design this in from the start, and I always recommend it.

Great, looks pretty straightforward. What next?

Next we define the content areas to be displayed in each tab. Again we use the default bootstrap HTML and CSS.

As you can see there are 3 tab panes, each in their own div. The first one is the one that is active when the page loads. For this reason it is treated it differently from the other two tabs.

Each tab has a title and description, but these are optional.

After that, in the first tab we load the juicebox javascript. Change the path to wherever you have installed it, without this none of the galleries will work.
Then the loadGallery function (which you see earlier in this post) is called - like this

 loadGallery('/images/gallery1/', 'juicebox-container1'); 

The first argument '/images/gallery1/'  is the location of the config.xml file relating to that gallery. It is also where I put all the images for that gallery, but how you configure your site is up to you.
The second argument 'juicebox-container1' is the id of the div into which the gallery will be loaded. This is very important, get this wrong and the gallery will not be displayed.

The two other tab panes have much less content. The optional title and description, obviously, and the div with the id for loading a gallery into.

I have been very creative and set the div id's to id="juicebox-container1", id="juicebox-container2", and id="juicebox-container3" - it make it easy to read, track and extend.

<!-- Tab content -->

            <div class="tab-content" id="myTabContent">

                <!-- default tab, all scripts run when the page loads -->
                <div class="tab-pane fade show active" id="gallery1" role="tabpanel" aria-labelledby="gallery1-tab">

                    <h2>Gallery 1 title</h2>
                    <p>Gallery description</p>

                    <!-- The id of this div is how juicebox knows where to display the gallery -->
                    <div class="border-top mt-3 pt-3" id="juicebox-container1"></div>

                        <!-- load the juicebox javascript before you call it -->
                        <script src="/scripts/juicebox_lite_1.5.1/web/jbcore/juicebox.js"></script>

                        <!-- call the funtion (defined in the page head) to load the gallery -->
                        <!-- into the specified div id, which is the one we are inside right now -->
                        <script>
                            loadGallery('/images/gallery1/', 'juicebox-container1');
                        </script>
                </div>

                <!-- Tab 2, no content until the tab button is clicked -->
                <div class="tab-pane fade" id="gallery2" role="tabpanel" aria-labelledby="gallery2-tab">

                    <h2>Gallery 2 title</h2>
                    <p>Gallery description</p>

                    <!-- empty div, where the gallery will be loaded when the tab button is clicked-->
                    <div class="border-top mt-3 pt-3" id="juicebox-container2"></div>
                </div>

                <!-- Tab 3, no content until the tab button is clicked -->
                <div class="tab-pane fade" id="gallery3" role="tabpanel" aria-labelledby="gallery3-tab">

                    <h2>Gallery 3 title</h2>
                    <p>Gallery description</p>

                    <!-- empty div, where the gallery will be loaded when the tab button is clicked-->
                    <div class="border-top mt-3 pt-3" id="juicebox-container3"></div>             
                </div>

            </div>

<!-- End of tab content -->

Again, pretty basic HTML. But how do you load the galleries into the tabs?

With a little bit of javascript. Don't worry, it is really easy to follow.

First I "listen" for anyone clicking one of the tab buttons (based on their id eg gallery2-tab ), and call a simple function when it is. It is not necessary to listen for tab 1 to be clicked as it is always loaded when the page is loaded.
Each function calls the previously defined loadGallery function, using the location of the gallery and the id of the div to display the gallery in.

 
           <script>
                document.getElementById("gallery2-tab").onclick = function() {showGallery2()};
                document.getElementById("gallery3-tab").onclick = function() {showGallery3()};

                function showGallery2() {
                  loadGallery('/images/gallery2/', 'juicebox-container2');
                }
                function showGallery3() {
                  loadGallery('/images/gallery3/', 'juicebox-container3');
                }
            </script>

As you can see, the id of the buttons that were defined earlier are now used. Told you they were important.

Yeah, simple, even I can understand that. But why use functions with only 1 line in them?

You're right, I could have called the loadGallery function as part of the onclick listener. However, I prefer to use a function here because it is easy to add functionality and customisations if needed in the future.

Thanks, is that it then?

Yes, that's all there is to it. Below is a whole, fully functional web page, so you can see it all in one place. I find this useful, so others may feel the same.
If you copy this and want to test it, you will have to either put your images, config files and juicebox.js in the same places I have used or change the locations in the file.
Gallery1 config file and images are in /images/gallery1/
Gallery2 config file and images are in /images/gallery2/
Gallery3 config file and images are in /images/gallery3/
juicebox.js is in /scripts/juicebox_lite_1.5.1/web/jbcore/juicebox.js

I hope this helps others to implement a multiple gallery solution in tabs.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<!-- gallery javascript -->
<!-- Use this function to load the gallery into the available space in the container-->
<!-- This is useful when using tabs, as you can load it after the tab is clicked -->
<!-- When calling this function pass in the folder name where the juicebox config file is loacated -->
<!-- and the id of the div you want the gallery to be shown in -->
    <script>
    function loadGallery(base, container) {
        new juicebox({
            baseUrl : base,
            containerId: container,
            galleryWidth: "100%",
            galleryHeight: "100%",
            backgroundColor: "Transparent"
        });
    }
    </script>
<!-- end gallery javascript -->

    <title>Tabbed Gallery Example</title>
    </head>
    <body>

<!-- start of the page container, essential for bootstrap responsive design -->
        <div class="container">
            <header>
                <!-- Put your menu here -->
            </header>

            <h1>Gallery with tabs</h1>

<!-- List of 3 tabs as buttons, as per bootstrap examples, make sure the label names are consistent, eg gallery1 -->

            <ul class="nav nav-tabs mt-3 pt-3" id="myTab" role="tablist">

                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="gallery1-tab" data-bs-toggle="tab" data-bs-target="#gallery1" type="button" role="tab" aria-controls="gallery1" aria-selected="true">Gallery 1</button>
                </li>

                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="gallery2-tab" data-bs-toggle="tab" data-bs-target="#gallery2" type="button" role="tab" aria-controls="gallery2" aria-selected="false">Gallery 2</button>
                </li>

                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="gallery3-tab" data-bs-toggle="tab" data-bs-target="#gallery3" type="button" role="tab" aria-controls="gallery3" aria-selected="false">Gallery 3</button>
                </li>

            </ul>
<!-- End of tab list -->

<!-- Tab content -->

            <div class="tab-content" id="myTabContent">

                <!-- default tab, all scripts run when the page loads -->
                <div class="tab-pane fade show active" id="gallery1" role="tabpanel" aria-labelledby="gallery1-tab">

                    <h2>Gallery 1 title</h2>
                    <p>Gallery description</p>

                    <!-- The id of this div is how juicebox knows where to display the gallery -->
                    <div class="border-top mt-3 pt-3" id="juicebox-container1"></div>

                        <!-- load the juicebox javascript before you call it -->
                        <script src="/scripts/juicebox_lite_1.5.1/web/jbcore/juicebox.js"></script>

                        <!-- call the funtion (defined in the page head) to load the gallery -->
                        <!-- into the specified div id, which is the one we are inside right now -->
                        <script>
                            loadGallery('/images/gallery1/', 'juicebox-container1');
                        </script>
                </div>

                <!-- Tab 2, no content until the tab button is clicked -->
                <div class="tab-pane fade" id="gallery2" role="tabpanel" aria-labelledby="gallery2-tab">

                    <h2>Gallery 2 title</h2>
                    <p>Gallery description</p>

                    <!-- empty div, where the gallery will be loaded when the tab button is clicked-->
                    <div class="border-top mt-3 pt-3" id="juicebox-container2"></div>
                </div>

                <!-- Tab 2, no content until the tab button is clicked -->
                <div class="tab-pane fade" id="gallery3" role="tabpanel" aria-labelledby="gallery3-tab">

                    <h2>Gallery 3 title</h2>
                    <p>Gallery description</p>

                    <!-- empty div, where the gallery will be loaded when the tab button is clicked-->
                    <div class="border-top mt-3 pt-3" id="juicebox-container3"></div>             
                </div>

            </div>

<!-- End of tab content -->

<!-- Use JS to load the gallery after the tab is clicked, or they don't load properly -->
<!-- Runs the specified function only after the tab button with the given id is clicked -->
<!-- Each function loads the defined gallery into the specified div id-->
            <script>
                document.getElementById("gallery2-tab").onclick = function() {showGallery2()};
                document.getElementById("gallery3-tab").onclick = function() {showGallery3()};

                function showGallery2() {
                  loadGallery('/images/gallery2/', 'juicebox-container2');
                }
                function showGallery3() {
                  loadGallery('/images/gallery3/', 'juicebox-container3');
                }
            </script>

<!-- footer -->

            <footer>
                <!-- Put your footer here -->
            </footer>

<!-- end of footer -->

        </div>
<!-- end of page container -->

        <!-- Bootstrap Javascript Bundle with Popper -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

    </body>
</html>

(1) Click the 'Open Gallery...' button on the 'Start' tab (or select 'Gallery -> Open...' from the drop-down menu at the top of the application).

(2) In the pop-up 'Select Gallery Folder...' dialog window:
Mac - Navigate towards and then double-click the gallery folder.
Windows - Navigate towards and then select (with a single left-click) the gallery folder (not a file within the gallery folder) and click the 'Select Folder' button.

In the 'Select Gallery Folder...' dialog window, it is important that you select the gallery folder itself (and not a file within the gallery folder).
The gallery folder must contain the gallery's configuration file which must be named 'config.xml' (this is what JuiceboxBuilder-Pro looks for).
If you have changed the structure of your gallery since saving it (and use a configUrl or baseUrl to rename or move the configuration file), then JuiceboxBuilder-Pro will not be able to open the gallery.

NB
In the 'Select Gallery Folder...' dialog window, you'll just see folders (that you can navigate within to find the gallery folder, if necessary) but no files.

If you receive the "Config file not found." message whilst viewing a gallery locally (from your computer's hard drive rather than from a web server) in Firefox or Safari, then please read on.

Recently, both Firefox and Safari have introduced security restrictions which prevent the loading of local files, resulting in the inability to preview Juicebox galleries from your computer's hard drive.
Because these security restrictions were introduced after the current version of Juicebox was released, Juicebox is unaware of the problem and displays the "Config file not found." message (instead of a more descriptive message).

There are, however, workarounds for the problems in these browsers:

Firefox (68 to 94):

• Enter about:config in your Firefox browser's address bar.

• Click past the warning via the "I accept the risk!" button.

• Enter privacy.file_unique_origin in the search bar.

• Double-click the Preference Name to change the Value from 'true' to 'false'.

Firefox (95 or later):

• Enter about:config in your Firefox browser's address bar.

• Click past the warning via the "Accept the Risk and Continue" button.

• Enter security.fileuri.strict_origin_policy in the search bar.

• Single click the Toggle button or double-click the Preference Name or Value to change the Value from 'true' to 'false'.

Safari (11 to 15):

• Pull down the 'Safari' menu and choose 'Preferences'.

• Click on the 'Advanced' tab.

• Check the box next to 'Show Develop menu in menu bar'.

• Close 'Preferences'. The 'Develop' menu will now be visible between Bookmarks and Window menus.

• Pull down the 'Develop' menu and choose 'Disable Local File Restrictions'.

Safari (16 or later)

• Go to 'Safari -> Settings'.

• Click the 'Advanced' tab.

• Select the 'Show features for web developers' checkbox.

• Go to the 'Developer' tab.

• Select the 'Security: Disable local file restrictions' checkbox.

Screenshots for Safari 16 or later can be found in this forum thread.

Please note that relaxing browser security restrictions should be done at your own risk (but it should be no more of a risk than using the previous versions of the browsers before the security restrictions were introduced).

Incidentally, it is not possible to preview galleries locally in browsers which use the Chromium web engine (Chrome, Edge and Opera). Please use either Firefox or Safari (using the tweak above) to preview galleries locally.

Also, it is important to note that this problem applies only to previewing galleries locally (from your computer's hard drive).
There is no problem once the galleries have been uploaded to a web server where they can be viewed without issue in any modern browser.

An alternative would be to set up a local web server environment on your computer using a program such as MAMP or XAMPP.
This is not as simple as just changing a browser setting but it would allow you to view a gallery locally in any browser you like (without the need to change any browser settings).

I've written short instructions for using XAMPP here.

Right-clicking is disabled within a Juicebox gallery (so a visitor will not be able to save gallery images via the right-click context menu) and you can choose to not display the Open Image Button or the Download Button in a gallery by setting showOpenButton="FALSE" (in the 'Lite' options section) and showDownloadButton="FALSE" (in the 'Button Bar' options section) respectively, as noted in this FAQ:
How do I allow or prevent users from saving gallery images?

Unfortunately, there's nothing you can do to prevent users from taking screenshots of your galleries but, as a deterrent, you might like to watermark your images.
If you create a gallery with JuiceboxBuilder-Pro and use the Watermark functionality, then the chosen watermark image is actually embedded into the main images at the time the images are resized for the gallery, so if a user does find the URL to an image on your web server, the image will be watermarked.

I'd also recommend that you keep your image resolution as low as possible (high enough for web gallery use but too low for other uses such as printing).
This should hopefully discourage visitors from trying to download your images.

Anything more that you do to prevent a user from downloading an image from your web server will more than likely also prevent Juicebox-Pro from displaying it.

If you are entering IPTC data in an Adobe program (such as Lightroom or Photoshop), then the label you'll need to use for the image title is IPTC Document Title and the label you'll need to use for the image caption is IPTC Description.

Juicebox-Lite:

Name: juicebox_lite_1.5.1.2.zip
Filesize: 1,891,211 bytes
MD5: 7aea2fa3fe11019f0b0bd794c96ce85a
SHA1: 87b5da8cf23ef5b36a003468c8abc6037123166f
SHA256: 3a38333181f38806e18f45604e64fac067525f25c16fb836288160d145a5c7a9

Name: JuiceboxBuilder-Lite.air (v1.5.1.2)
Filesize: 1,386,533 bytes
MD5: c00e6323c08438f3fc069f10199e63f6
SHA1: 81f902352a1c077c653e61d9c46288723995c751
SHA256: 2ba340cbe7cc9824f5324bf6f238b194be17524e4a2cef71a9230d68578414ec

Juicebox-Pro:

Name: juicebox_pro_1.5.1.2.zip
Filesize: 1,907,008 bytes
MD5: 18dcb1666d93a4d24da1e7eff8138470
SHA1: 5b369b377a35293e9cd0055f622acb594eeddc2e
SHA256: 70cacb58d8d45fd347d599e4835d5dfec1c9ee9cf10786f5d7b2219e626acc4a

Name: JuiceboxBuilder-Pro.air (v1.5.1.2)
Filesize: 1,390,776 bytes
MD5: 6714ed9b9790beec4eb46dbe2000a656
SHA1: 0790b8df79efaf6f0b89624884252fd07001149e
SHA256: a26ff24c35c825e316ab7aa509d574dc6585d201da5260ab1df74a020315f591

[Edited 17 November 2023.]

backgroundColor: "rgba(0,0,0,0)"

(You can change the backgroundColor in JuiceboxBuilder-Pro's 'Customize -> Lite' section or by manually editing the gallery's embedding code.)

Incidentally, if the background image does not fill the gallery area (if backgroundScale="NONE") or if the background image is a PNG file with transparency, then the backgroundColor still needs to be active.