Luckily it disappears when you move to the next picture but I still think it looks broken and random when it moves to the middle of the main image.
This should not happen and is, indeed, a bug. As I mentioned above, I have logged a bug report with the developers and it should hopefully be fixed in the next version.
I believe it would look much better if the Title would disappear as soon as as the Hide Thumbnails button is pressed
This is what should happen (and what does happen when using my code above).
I'm not sure how the temporary solution (proposed by Steven) would help.
I understand that this would just simply hide the Gallery Title when thumbs are visible - not really what I want.
This is not what happens. The Gallery Title is displayed when the thumbnails are visible (and hidden when the thumbnails are hidden).
The Juicebox-Pro API event onShowThumbs is fired each and every time the thumbnails are toggled (on or off) so the code within the onShowThumbs function is run each time the user clicks the Thumbs Button on the Button Bar.
When the thumbnails are showing, the Gallery Title is shown (using CSS via the jQuery function show()) and when the thumbnails are not showing, the Gallery Title is hidden (using CSS via the jQuery function hide()).
Juicebox comes with its own version of jQuery (bundled within the 'juicebox.js' file) so once this has been loaded on a web page, basic jQuery functionality is available. However, if your web page requires jQuery, then I would strongly recommend that you include your own version of the jQuery library (rather than relying on the built-in version that comes with Juicebox). I could have written the function using standard JavaScript as follows (which has exactly the same functionality but is a lot less compact than the one-liner above)
jb.onShowThumbs = function(showing) {
var elements = document.getElementsByClassName('jb-area-large-mode-title');
var element = elements[0];
if (showing) {
element.style.display = 'block';
}
if (!showing) {
element.style.display = 'none';
}
};
If you want to incorporate my solution into your own gallery, just give your 'juicebox' object a variable name (change new juicebox({ to var jb = new juicebox({) and add the onShowThumbs function below your own gallery's embedding code (still within the <script></script> tags).
I hope this helps.