Thank you for reporting this problem.
Unfortunately, this is actually a known issue which the developers are aware of. As such, it should hopefully be fixed in a future version (although I do not know when this might be).

Essentially, the 'Gallery -> Open...' option from the drop-down menu at the top does not currently work from the 'Images' or 'Customize' tabs.
If you want to open a new gallery without closing and restarting JuiceboxBuilder, just click on the 'Start' tab first and you will then be able to open a new gallery via the 'Open Gallery...' button or the 'Gallery -> Open...' option from the drop-down menu at the top.

I hope this workaround is not too much of an inconvenience until the bug is fixed.
Thanks again for reporting the issue, though. We appreciate the feedback!

@meredithkleiber

If you are using the current version of WordPress (v5.2.3), then you will likely be using the new default editor, Gutenberg, which no longer features the 'Add Media' button.
You likely attached your images to your page or post using a Gutenberg 'Gallery' block and you can rearrange your images through this block type.
Here is the complete procedure for adding a WP-Juicebox gallery to a WordPress page or post using Gutenberg. (Steps #7 and #8 are for reordering your images.)

(1) Click the 'Add Juicebox Gallery' button to add a WP-Juicebox gallery to your page or post.
(2) Configure your gallery as required in the settings window and click the 'Add Gallery' button to add the WP-Juicebox shortcode to your page or post.
(3) Click the 'Add Block' button (top left) to add a new Gutenberg block to your page or post.
(4) Select a 'Gallery' block. (You'll find it in the 'Common Blocks' section.)
(5) Click the 'Media Library' button within the 'Gallery' block.
(6) Drag and drop the images that you want to attach to your page or post (i.e. the images that you would like to be displayed in your WP-Juicebox gallery) from your hard drive into the media window.
(7) Select 'Uploaded to this post' from the first drop-down menu (on the 'Create Gallery -> Media Library' tab).
(8) Drag and drop the thumbnail images into the order that you would like them to be displayed in your WP-Juicebox gallery.
(9) Close the media window via the cross at the top right. (Do not click the 'Create a new gallery' as this will create a native WordPress gallery in addition to your WP-Juicebox gallery.)

I hope this helps.

That's very strange. Even if your web host is incompatible with Safari (which in itself is rather odd), I'd think that they might want to make some changes to ensure that it is compatible, given the number of Safari users out there. (Safari is currently second only to Chrome in the number of users, according to StatCounter, August 2019.)

In any case, looking at the results of an ICANN lookup for 'juicebox.net', I see that the nameservers are ServInt which looks to be an enterprise solution rather than a 'regular' web host. (As you have probably gathered, I personally have no direct dealings with our web host.)

Having said that, I've never heard of a web host that claims to be incompatible with Safari so yours appears to be the exception to the rule and I expect that the majority of web hosts will support both Safari and Juicebox-Pro's Download Button (as long as PHP 5.2.0 or later is installed).

I wish you well in your search for a compatible web host but I really don't think that you should have to look too far.
I'm very surprised by your web host's admission and refusal to try to fix the problem (which could just be a tweak to their Mod_Security settings which they seem to be unwilling to change).

I would hesitate to recommend a web host, though, as one person's experiences may differ greatly to another's.
However, I have free accounts with a few web hosts and I have uploaded a test Juicebox-Pro gallery (featuring the Download Button) to each of them so that you can check out the Download Button's functionality in your Safari browser.

AwardSpace: [Link removed.]
ByetHost: [Link removed.]
x10hosting: [Link removed.]

Please be aware that all the galleries above are on free accounts and you usually get what you pay for.
Paid accounts usually offer more features, greater stability and speed and better support.

Also, please note that I'm not actually recommending any of these web hosts.
This is really just a test to (hopefully) demonstrate that most web hosts will support Safari and Juicebox-Pro's Download Button.

Please let me know how you get on.

You can certainly create and embed multiple Juicebox-Lite galleries into your website.
Please see the Embedding Multiple Galleries support section which deals with 'Multiple Galleries on One HTML Page' and 'Multiple Galleries on Separate HTML Pages'.
(Embedding techniques are exactly the same for both Juicebox-Lite and Juicebox-Pro.)

There's nothing wrong with using an iframe but there are some drawbacks to doing so (which are noted here... scroll down to "2) Using an iframe") so I'd always recommend embedding directly into a web page (following either the regular embedding instructions or the baseUrl embedding instructions) where possible.

If you run into any difficulties, then perhaps you could let me know a little more about how you are trying to embed your gallery (maybe an example would help me to understand your scenario better) and I'll try to help further.

@adec

You're welcome! I'm glad this thread has helped you out.

I hope all goes well. Just let me know if you run into any difficulties and I'll do my best to help you out.
For reference, the Embedding Guide is here.

What you are seeing in Firefox is the gallery being displayed in Small Screen Mode (where thumbnails and main images are displayed on separate pages).
Small Screen Mode is usually used only on mobile devices (or when Small Screen Mode is forced by setting screenMode="SMALL").
(More information on Screen Modes can be found in the Gallery Tour here.)

If all three screenshots are from the same gallery, then screenMode must be set to AUTO, otherwise a certain Screen Mode (either Large or Small) would always be used on all devices and in all browsers, so something must be triggering Small Screen Mode to be used in your Firefox browser.

Here are a few things to check:

• Check that your Firefox browser is not in 'Tools -> Web Developer -> Responsive Design Mode'.

• Check that your 'View -> Zoom' is set to 100% and not zoomed in or out.

• Check that you do not have any browser extension installed and active which is currently changing the User-Agent string (for example, to mimic a mobile device).

I hope that this helps or at least points you in the right direction.

@mrp

Yes. You can set most configuration options in either the 'config.xml' file or the embedding code.
( I usually recommend setting options in JuiceboxBuilder-Pro as it seems to be the most popular method of creating and editing galleries and it does not involve any manual code editing.)
Please see the Setting Config Options support section for further details.

The only configuration options that must be set in the embedding code rather than the 'config.xml' file are listed in the Embed Options.
All other options can be set in either the 'config.xml' file or the embedding code.
(If an option is set in both the 'config.xml' file and the embedding code, then the value in the embedding code takes precedence over the value in the 'config.xml' file.)

Still no joy with the URL I'm afraid...

I hope that Ryan (or another Drupal Juicebox Module user) can help you out over in the Drupal forum but I suspect that trying to integrate my solution into the module will not be an easy task.

Maybe there's a different solution that a user of the bootstrap tab system that you use can recommend (perhaps they have experienced a similar issue with other HTML elements embedded into the tabs ).

Being that the problem resolves itself when the browser is resized, you could perhaps manually trigger a resize when your tab is clicked. (Such a solution would be independent of Juicebox and the module's code.)
Try adding the following code to your web page:

<script>
    $(document).ready(function() {
        $('#gallery_tab').click(function() {
            $(window).trigger('resize');
        });
    });
</script>

Again, this assumes that your 'Gallery' tab has an id="gallery_tab". (If not, then just change #gallery_tab in the code above to the correct 'id' for your 'Gallery' tab.)
It also assumes that jQuery is loaded into your web page. (Juicebox comes bundled with its own version of jQuery so as long as the code is run after the 'juicebox.js' file is loaded into your web page, then all should be fine.)
Please note that this proposed solution has not been tested so I do not know whether it will work or not, but it should be a fairly quick and easy thing to try (as long as you can get the JavaScript code into your web page).

I realise that in an ideal world, it would be great to have no '[Violation]' entries in the console but it is worth remembering that these entries are only present in Chrome and only when the debugging level is set to 'Verbose'. (They are not classed as 'Errors', 'Warnings' or even 'Info'.)

Just out of curiosity, I loaded a few popular web pages into Chrome (adobe.com, amazon.com, apple.com, microsoft.com, mozilla.org) and they all display '[Violation]' entries (of one type or another, some more than others) in 'Verbose' mode.

That's down to the way that the 'juicebox.js' file is packed which is a choice that the developers have taken.

The 'juicebox.js' file uses eval() and CSP does not allow the use of eval() ("Eval and related functions are disabled") so, unfortunately, Juicebox will not be fully compatible with CSP guidelines.
There really is nothing that can be done about this (at user level) at the moment, although I have notified the developers of this so it is in their hands now.

Unfortunately, the URL you provided does not work so I cannot see your gallery's web page.

If, for example, you are following the regular embedding instructions here, then you would just use the embedding code I provided (changing the gallery dimensions and background color as necessary) instead of the embedding code provided on the 'Publish' tab of JuiceboxBuilder. (It would just be a simple swap of code.)

Without being able to see your gallery's web page, I do not know how you are currently embedding your gallery.
If you are using the baseUrl method (which you might be using if you are following the Embedding in a Drupal Site instructions), then just amend the path to your 'juicebox.js' file and add the baseUrl entry (pointing towards the gallery folder) to the modified embedding code, for example:

<!--START JUICEBOX EMBED-->
<script src="/galleries/gallery1/jbcore/juicebox.js"></script>
<script>
    function loadGallery() {
        new juicebox({
            baseUrl: "/galleries/gallery1/",
            containerId: "juicebox-container",
            galleryWidth: "100%",
            galleryHeight: "600px",
            backgroundColor: "#222222"
        });
    }
    $(document).ready(function() {
        $('#gallery_tab').click(function() {
            loadGallery();
        });
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

However, if you are using the Juicebox Module for Drupal, then putting the embedding code into a JavaScript function and adding custom code to call the function when an element on your web page is clicked is not going to be easy. The module automatically embeds the gallery into your web page and you'd need to modify the module's source code to achieve this.

There are a couple of reasons why this may not be feasible, though.
(1) The Juicebox Module for Drupal was not written by ourselves and, as such, I am not overly familiar with the module's source code (and do not know how easy or difficult such a modification would be). Support for the module would be better directed towards the Drupal forum where the author of the module (Ryan Jacobs) might be able to help further.
(2) The Juicebox Module for Drupal uses a non-standard embedding method (it does not just drop the regular embedding code into the web page) so swapping the module's embedding code for my modified embedding code above is not going to be possible.

If you really need to get this working with your tabs, then I'd recommend following the Embedding in a Drupal Site instructions and using the modified baseUrl code that I posted above. Just make sure that both paths in the code (the path to the 'juicebox.js' file and the baseUrl entry, pointing towards the gallery folder) are correct.

It sounds like, when the Juicebox gallery is loaded into the gallery container, the gallery container may exist on the web page but with no dimensions (being that it is not visible until the 'Gallery' tab is clicked). If the gallery has a galleryWidth of '100%' but the gallery container has no dimensions, then the gallery's actual width will be 100% of zero.

One possible solution would be to put the Juicebox embedding code into a JavaScript function and then call the function when the 'Gallery' tab is clicked (after the gallery container has been assigned dimensions).

Another possible solution might be to give your gallery a fixed pixel galleryWidth (for example '800px'), although this will prevent the gallery from being responsive in the horizontal dimension (which may or may not be a problem depending on the design and layout of your web page).

I hope this points you in the right direction.