You're welcome.
I'm glad you've been able to get it working. Thank you for letting me know.

It sounds like you might be using Safari 11 as your default browser.
Unfortunately, Safari 11 (released 19 September 2017) has introduced a new security restriction which now prevents the local viewing of Juicebox galleries by default.
Please see this forum post for a full explanation and a workaround.
Selecting 'Disable Local File Restrictions' from Safari 11's 'Develop' menu (full instructions in the link above) should, once again, allow you to view your galleries locally in Safari.

Unfortunately, it is not possible to customize Juicebox error messages or to hook into the error handling to intercept the error messages and redirect the site visitor to a custom page or run your own code.

As your gallery shows your own Flickr images, you know in advance what Flickr tags are in use so perhaps the best course of action would be to validate the tags entered by the site visitor (check what the user enters against a known array of valid tags) before loading the gallery (i.e. only load the gallery if the tags entered are valid).

I hope this suggestion helps.

Thank you very much for all the testing that you have done (with regard to changing configuration options) and additional information that you have provided (your Safari version number and the link to your own gallery).
I will pass all this on to the developers and I'm sure it will help greatly in their investigations.
Also, I'm very happy to hear that setting imageTransitionType to FADE seems to be a suitable workaround.
Thank you, once again, for reporting the problem and for helping us troubleshoot it.

When a gallery is expanded on an iOS device (for example, from the Splash Page), the gallery is expanded on a new page instead of on top of the embedding page (please see the Expand Gallery Behavior support section) and Juicebox uses the 'full.html' file inside the gallery's 'jbcore' folder to display the gallery.

First of all, please check that the 'full.html' file is actually present inside your gallery's 'jbcore' folder on your web server.
If the file is there, then please check that its permissions are not too restrictive. Default file permissions of 644 should be fine. You should be able to check and change file permissions using a FTP program or via your web hosting account's online file manager.

Also, please ensure that your gallery uses the current version of Juicebox-Pro (v1.5.1) to be sure that any bugs from previous versions (but which have since been fixed) are not contributing to your problem.
If necessary, full instructions for downloading the latest version and upgrading existing galleries can be found on the Upgrading Juicebox support page.

Hopefully this will help.
However, if you continue to experience difficulties, please post the URL to your gallery's web page so that I can take a look at the problem for myself and hopefully help further.
Thank you.

Thank you for reporting this problem and for providing the video and sample gallery.

It certainly seems to affect only Safari on MacOS as I cannot replicate the problem (using the gallery you provided) in Chrome 61, Edge, Firefox 56.0, IE11 or Opera 48.0 on a Windows 10 PC.

Please let me know exactly what version number of Safari you use (I expect it is likely to be 11.0 but I would like to be sure) and, if you have any browser extensions installed, then please try temporarily disabling them to see if this makes a difference.

I have notified the developers who will certainly investigate further.

Unfortunately, I do not have access to a Mac and cannot replicate the problem myself so I am unable to try out different workarounds but maybe the following suggestions will help.
(1) Try changing the imageTransitionTime from the current value you use (0.55) to something else (maybe try the default value of 0.3 or something larger like 0.1).
(2) Try changing imageTransitionType from SLIDE to a different value (FADE, CROSS_FADE or NONE).
(3) Try changing the captionPosition from BELOW_IMAGE to something different, such as OVERLAY, OVERLAY_IMAGE, BOTTOM or BELOW_THUMBS (at least for testing purposes), to see if this makes a difference.

If you find any combination of configuration options that helps to workaround the problem, please let me know so that I can pass the information on to the developers. Thank you.

Thank you for providing the video.

Unfortunately, this is not something that Juicebox was designed to do (to allow custom functional icons to be positioned on top of the main image, relative to a corner) and it would appear to be very difficult to achieve.
As you have discovered, there seems to be some kind of stacking context preventing you from appending a custom icon to the .jb-dt-main-image class and then just assigning a high z-index value to it.

I've tried to achieve what you are looking to do myself but have not found a nice clean solution.
It looks like you would have to append the custom icon to a different container (one already stacked above the main image) but then you'd need to calculate the correct position for it (using the display dimensions of the current image) as it would no longer be relative to the main image and you would likely run into complications (i.e. the need to reposition the custom icon) if the main image changes its size (e.g. if the browser window is resized or the thumbnails are toggled on or off) which would require additional listeners (perhaps using jQuery's .resize() and the Juicebox-Pro API's onToggleThumbs()). (Your current scenario might already be affected by such resizing issues.)

I really cannot think of a quick and easy solution (although maybe my notes here will point you in the right direction).

Not even with auto-hide (setting showImageOverlay="AUTO" and an inactivityTimeout value)? It would certainly be an easier option.
Could you maybe position your custom icon somewhere else on your web page? It looks like the top-right corner of the main image in the gallery is going to be a problem.

Here's the best I've been able to come up with at the moment.
It's overly complicated, imperfect (to say the least) and only works under certain conditions.
Still, it might be useful as a starting point (or give you some ideas).

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>

    var jb = new juicebox({
        containerId: 'juicebox-container',
        imageClickMode: 'NONE'
    });

    function set_icon() {
        $('#custom-icon').remove();
        window.setTimeout(function() {
            var index = jb.getImageIndex()
            var image = index - 1;
            var image_width = $('.jb-dt-main-image-' + image + ' .jb-dt-main-image').width();
            var image_height = $('.jb-dt-main-image-' + image + ' .jb-dt-main-image').height();
            var image_area_height = $('.jb-panel-detail').height();
            var top_position = Math.floor((image_area_height - image_height) / 2) ;
            var left_position = (Math.floor(image_width / 2)) - 50; // Subtract width of custom icon
            $('.jbn-nav-right-touch-area').append('<img id="custom-icon" style="cursor: pointer; display: block; left: ' + left_position +  'px; opacity: 1; position: absolute; top: ' + top_position + 'px; z-index: 9999;" src="custom_icon.png" width="50" height="50" alt="custom icon" />');
        }, 750);
    }

    jb.onImageChange = function() {
        set_icon();
    };
    jb.onShowThumbs = function() {
        set_icon();
    };
    $(window).resize(function() {
        set_icon();
    });

    $(document).ready(function() {
        $('body').on('click', '#custom-icon', function() {
            jb.toggleExpand();
        });
    });

</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Notes:
(1) The custom icon is appended to the right navigation hit area (rather than the main image itself) to avoid z-index issues.
(2) The setTimeout() delay is required for the repositioning of the custom icon when the thumbnails are toggled on and off and when the gallery is closed from its expanded state.
(3) The code above works only when imageClickMode="NONE". If using imageClickMode="NAVIGATE", then you'll need to add onclick="jb.toggleExpand()" as an attribute to the dynamically added <img> tag due to click handler binding issues (not ideal but the only workaround I've found so far.).
(4) Hooking into the onShowThumbs() and onImageChange() Juicebox-Pro API methods, the custom icon does not disappear as quickly as it should before being repositioned (but this may not be a problem if all your images are the same shape and size and you do not allow the thumbnails to be toggled on and off).

I realise that this is far from ideal but it's the only functional solution I've been able to come up with so far.
(I'd still recommend working with the available configuration options within the design parameters to ensure a problem-free solution.)

It sounds like your own custom elements may somehow be overlapping the navigation buttons (and that you might need to raise the z-index of the navigation buttons). However, one problem seems to be leading to another and things seem to be escalating quite quickly.

It might not be your ideal solution but it would be much easier to compromise and use the gallery's own Expand Button (on the Button Bar). You can have the Button Bar be positioned in the top-right of the main image (rather than the top-right of the gallery) by setting buttonBarPosition="OVERLAY_IMAGE" (in JuiceboxBuilder-Pro's 'Customize -> Button Bar' section).

Rather than apply z-index values to many elements (both your own custom elements and gallery elements), you might like to try changing the value of imageClickMode ('Customize -> Main Image') from its default value of NAVIGATE (where clicking anywhere on the left or right side of a main image will navigate to the previous or next image respectively) to NONE (where clicking only on the navigation buttons will navigate through the images).
This might help.

If you like, please post back with the URL to your gallery so that I can take a look at the problem for myself and hopefully help further.

You can set showThumbsOnLoad="FALSE" (for when the gallery is displayed in Large Screen Mode) and showSmallThumbsOnLoad="FALSE" (for Small Screen Mode) to hide the thumbnails when the gallery is initially loaded.

Please note that both of these configuration options are Juicebox-Pro configuration options only which, unfortunately, are not supported by Juicebox-Lite (the free version).

If you are using Juicebox-Pro, then these configuration options can be found in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section and, if you are using the Drupal module, then Pro configuration options can be entered entered into the 'Juicebox Library - Pro / Manual Config' section of your Drupal Dashboard ('Home -> Administration -> Structure -> Content types -> Article -> Manage Display -> Juicebox settings').

I'm glad that you've been able to adapt my example.
Thank you for sharing your own solution for Drupal.

You're welcome!