Topic: Delay autoplay until first image is loaded

Hi there!

I would like to delay autoplay until the first image in the gallery is loaded. The problem is, with slower connections the images are not loaded fast enough and the gallery already starts playing "empty". So it can happen that the first image to appear is image 2 or 3.
(There is no need to load all images, but No.1 should definetly be available before the gallery starts playing)

I have relatively large images (~1MB) and I have adjusted Pre-loading to "ALL" since I have small galleries. I fully understand pre-loading and image size and I would like to keep it this way.

Any suggestions?

Thanks,
Patrick

Re: Delay autoplay until first image is loaded

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.

Re: Delay autoplay until first image is loaded

Hi, thanks for the quick answer!

Unfortunatly your suggested solution 1 doesn't work. The gallery always starts playing without waiting for the images to load.

I tried some debugging: The toggleAutoPlay command works as expected. But the onInitComplete event does not seem to wait for images. I assume this event only checks that the gallery functions are ready, and not if the gallery content (= images) is loaded.

My assumption is kinda backed up by the description of the onInitComplet event: "[...] The Api is now available".

One more thing I'm not sure about, is the use of the config.xml file. As it contains the same statements...do I have to change anything in this file?

Re: Delay autoplay until first image is loaded

The only other thing I can think of would be to start AutoPlay when the Juicebox-Pro API determines that the first image has been displayed for the first time (using the onImageChange event).
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"
    });
    var flag = false;
    jb.onImageChange = function(e) {
        if (flag === false && e.id === 1) {
            jb.toggleAutoPlay();
            flag = true;
        }
    };
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

If this still does not help, then you might need to use a setTimeout() delay (as I noted in my post above) or tweak your gallery's imagePreloading value and/or your image sizes (although I understand that you do not want to do this).

One more thing I'm not sure about, is the use of the config.xml file. As it contains the same statements...do I have to change anything in this file?

You can set configuration options in the gallery's XML file, in the embedding code or via a query string in the URL.
Please see the Setting Config Options support section for details.
If you have a certain configuration option set in both the embedding code and the XML file, then the value from the embedding code will take precedence. (Options set via the query string will override both embedding code and XML file options.)
I chose to add the configuration options required for my code to function correctly to the gallery's embedding code simply to keep my suggestion to a single chunk of code. You can set all your configuration options in your gallery's 'config.xml' file without any problem.

Re: Delay autoplay until first image is loaded

Unfortunatly this method also does not work. I might try setTimeout if necessary.

I have also resorted to smaller images already. This just is the No.1 performance parameter...

Anyway, one really anoying problem is the way the browser loads images. (...using Chrome at the moment).
Even thought the images are labelled in ascending order the browser ignores this and loads some images from the back of the gallery first. This blocks the needed images at the beginning, and so all other images come late, meaning I never see anything until the gallery cycles back to Image No.1.

Basically my problem is starting to go off topic and therefore I will start another thread for this.

Re: Delay autoplay until first image is loaded

I might try setTimeout if necessary.

It looks like this might be the best course of action (other than changing the filesize of your images).

I have also resorted to smaller images already. This just is the No.1 performance parameter...

As a side note, you might like to look into having a Multi-Size Image gallery. Please see the Multi-Size Image Support section for details.
In a Multi-Size Image gallery, up to 3 different sizes of images can be used and Juicebox-Pro chooses the most appropriate image size depending on factors such as the device, screen size and pixel density being used to view the gallery. The speed of the connection is not a factor in deciding which image size to use but at least you should be able to feed smaller images to mobile devices to minimize the problem as much as you can.

Basically my problem is starting to go off topic and therefore I will start another thread for this.

OK. No problem.

Re: Delay autoplay until first image is loaded

Thanks for pointing out Multi-Size images! That's a good idea to try!
I remember reading about it before purchasing jb pro, but for reasons unknown to me I completely ignored it ;-)

Re: Delay autoplay until first image is loaded

Thanks for pointing out Multi-Size images!

You're welcome. I hope it helps a bit.
Even if it's not a complete solution to your problem, it's perhaps a step in the right direction.