• Registered: 2015-07-09
  • Posts: 2

Topic: AutoPlay On causing flickering on mutiple galleries [SOLVED]

I have a gallery webpage with multiple SlideShow Pro galleries  (currently 12 plus video) showing with AutoPlay enabled.  Since SSP is shutting down,  JuiceBox 1.4.4 was selected as an alternative.  However, I am seeing a problem with AutoPlay enabled on a test site with three galleries on a single page. Following a page load or refresh, AutoPlay will cause at least one of the galleries to flicker instead of displaying each slide. Shutting off AutoPlay on the flickering gallery and then restarting it after a short while often corrects the flicker. Disabling AutoPlay on all three galleries removes the problem entirely, and when turned on, all three galleries rotate their slides as expected. The issue can be seen on Chrome, Safari or Firefox OSX.

The galleries have separate ids configured with a base url pointing to a common juicebox.js file. The test page is at ripplingerhomes.curvedesign.ca

I have considered  a "gallery menu" of thumbs to open each gallery on demand. Disabling AutoPlay entirely seems to work. Is there a fix available?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: AutoPlay On causing flickering on mutiple galleries [SOLVED]

Thank you for reporting this problem.
I have been able to replicate the problem in a test case and have logged a bug report with the developers.

Until the bug is fixed, the only workaround I have discovered so far is to stagger the start of each gallery's AutoPlay by using the Juicebox-Pro API toggleAutoPlay() method instead of setting autoPlayOnLoad="TRUE" and then delaying the firing of this method for each gallery with setTimeout functions of increasing values.
Here is what the embedding code might look like for three galleries on the same page:

<script>
    var jb1 = new juicebox({
        baseUrl: 'g1/',
        showAutoPlayButton: 'TRUE',
        containerId: 'juicebox-container-1',
        galleryWidth: '400',
        galleryHeight: '600',
        backgroundColor: '#222222'
    });
    jb1.onInitComplete = function() {
        window.setTimeout(function() {
            jb1.toggleAutoPlay();
        }, 200);
    };
</script>
<div id="juicebox-container-1"></div>

<script>
    var jb2 = new juicebox({
        baseUrl: 'g2/',
        showAutoPlayButton: 'TRUE',
        containerId: 'juicebox-container-2',
        galleryWidth: '400',
        galleryHeight: '600',
        backgroundColor: '#222222'
    });
    jb2.onInitComplete = function() {
        window.setTimeout(function() {
            jb2.toggleAutoPlay();
        }, 400);
    };
</script>
<div id="juicebox-container-2"></div>

<script>
    var jb3 = new juicebox({
        baseUrl: 'g3/',
        showAutoPlayButton: 'TRUE',
        containerId: 'juicebox-container-3',
        galleryWidth: '400',
        galleryHeight: '600',
        backgroundColor: '#222222'
    });
    jb3.onInitComplete = function() {
        window.setTimeout(function() {
            jb3.toggleAutoPlay();
        }, 800);
    };
</script>
<div id="juicebox-container-3"></div>
  • Registered: 2015-07-09
  • Posts: 2

Re: AutoPlay On causing flickering on mutiple galleries [SOLVED]

Thanks Steven.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: AutoPlay On causing flickering on mutiple galleries [SOLVED]

You're welcome.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: AutoPlay On causing flickering on mutiple galleries [SOLVED]

Juicebox-Pro v1.5.0 has just been released and fixes the issue reported in this thread.
Please see this blog entry for details of the new version and the Version History for a full list of changes.
Details on how to get the latest version can be found on the Upgrading Juicebox support page.