Rather than setting autoPlayOnLoad="TRUE", use autoPlayOnLoad="FALSE" (the default value) and start the AutoPlay via the Juicebox-Pro API toggleAutoPlay() method when the onInitComplete event is fired (once the gallery is ready).
At the moment, you'll need to also set enableAutoPlay="TRUE" for this to work. This should not be necessary: the toggleAutoPlay() API method should not have the enableAutoPlay configuration option as a dependency. However, the developers are aware of this issue and it should hopefully be fixed in the next version.
Also, be sure to set goNextOnAutoPlay="FALSE" (default value), otherwise, when AutoPlay is started, the image will change immediately instead of waiting the allotted displayTime before moving on.
Try the following:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: "juicebox-container",
autoPlayOnLoad: "FALSE",
enableAutoPlay: "TRUE",
goNextOnAutoPlay: "FALSE"
});
jb.onInitComplete = function() {
jb.toggleAutoPlay();
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->Hopefully this will help.
If not, then you could introduce a short delay using the JavaScript setTimeout() function.
For example:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: "juicebox-container",
autoPlayOnLoad: "FALSE",
enableAutoPlay: "TRUE",
goNextOnAutoPlay: "FALSE"
});
jb.onInitComplete = function() {
window.setTimeout(function() {
jb.toggleAutoPlay();
}, 500);
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->The '500' entry in the code above is the delay in milliseconds. You can change this to a different value if you like.