The best I've been able to come up with is the following. It might not be a very clean solution but you might find it to be suitable (or it might at least point you in the right direction). It uses several Juicebox-Pro API methods and events and also jQuery which you will need to include in your web page.
When the gallery is first loaded (onInitComplete), if Small Screen Mode is detected (getScreenMode), the .jb-area-caption container is removed from the Document Object Model (DOM).
This works fine but will only be of use if the Splash Page is not used. As soon as the gallery is expanded (from the Splash Page or from the Expand Button), the .jb-area-caption container gets reinstated but removing the container as before as soon as onExpand is fired does not work due to a timing issue. This is why I have introduced a small delay before removing the .jb-area-caption container again.
<!--START JUICEBOX EMBED-->
<script src="jquery-1.11.1.min.js"></script>
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container',
});
jb.onInitComplete = function() {
if (jb.getScreenMode() === 'SMALL') {
$('.jb-area-caption').remove();
jb.onExpand = function(expanded) {
if (expanded) {
setTimeout(function() { $('.jb-area-caption').remove(); }, 500);
}
};
}
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->I hope this helps.
