Using fixed size in pixels does indeed fix the loading problem at the cost of responsiveness, but that's too much of a price to pay unfortunately.
It sounds like we're on the right track.
Regarding this suggestion, can you provide any more guidance please?
Sure!
Usually, your embedding could would look something like this:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "600px",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->Put the JavaScript section into a function and add an event listener (a click handler) to call the function (to load the gallery) when your 'Gallery' tab is clicked.
If, for example, your 'Gallery' tab has an id="gallery_tab", then your embedding code would look something like this:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
function loadGallery() {
new juicebox({
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "600px",
backgroundColor: "#222222"
});
}
$(document).ready(function() {
$('#gallery_tab').click(function() {
loadGallery();
});
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->I hope this helps.
However, if you continue to experience difficulties, then please post the URL to your gallery's web page so that I can take a look at your gallery's environment live on your web server and hopefully help further.
Thank you.