You could try something like the following:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '100%',
backgroundColor: '#222222',
backButtonPosition: 'TOP',
backButtonText: '',
backButtonURL: 'http://www.example.com/index.html',
useFullscreenExpand: 'TRUE'
});
jb.onInitComplete = function() {
var filename = (window.devicePixelRatio >= 2) ? 'large.jpg' : 'small.jpg';
$('.jb-go-back-text').html('<img src="' + filename + '" width="100" height="75" />');
};
jb.onExpand = function(expanded) {
if (expanded) {
window.setTimeout(function() {
var filename = (window.devicePixelRatio >= 2) ? 'large.jpg' : 'small.jpg';
$('.jb-go-back-text').html('<img src="' + filename + '" width="100" height="75" />');
}, 500);
}
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->The new part is the jb.onExpand code. You could restructure the code to make it more efficient and avoid duplication but I've just left it as it is (with the new code being just a separate addition to the code from my post above) so that's it's easy to follow.
Unfortunately, a short delay is required to ensure that the Back Button is present in the DOM (Document Object Model) before actions are performed on the CSS class after the gallery has been expanded.
The code is starting to get a little messy. This is one of the drawbacks of trying to do something with Juicebox that it was not designed to do. You tend to run into unforeseen problems and have to deal with them as your encounter them.
... is to return to the slightly less efficient method of loading a hi-res logo regardless.
I would probably be inclined to do this myself. For the sake of a handful of kilobytes, the code would be cleaner and it should work in all scenarios without any further tweaking.
Just use a backButtonText entry such as the following (making sure that the display width and height are both half the actual dimensions of the image).
backButtonText="<img src="http://www.tonyhallphoto.com/jbresources/logo-backbutton-200x50.png" style="width: 100px; height: 25px; margin-top:-5px;" />"... on non-Mac devices, which I believe isn't currently supported in Juicebox-Pro v1.5.
In a Multi-Size Image gallery, 'Large' images are not currently displayed in high pixel density Windows desktop monitors but this has been logged as a bug and should hopefully be fixed in the next version of Juicebox.