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).
Putting the whole bar over the image isn't going to work for the client.
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.)