• Registered: 2014-11-21
  • Posts: 11

Topic: Multiple Instances [SOLVED]

I have been testing your sample code for running multiple instances of the gallery component on a single screen.  I pulled your sample code pointed to my galleries and it appears to work but when components are set to auto start they start fine but begin missing images as the components roll through.  Ultimately I need to load between 4 -12 galleries on a single page.  I have used the configUrl:  not the baseURL: but I assume it is better to use baseURL: for multiple per your instructions.


Here is the sample code running on my server with my files.  These files run on the site one per page without issue.

http://www.stanleymartin.com/NewLayout/ … s_exam.htm

Any recommendations would be appreciated.

  • Registered: 2014-11-21
  • Posts: 11

Re: Multiple Instances [SOLVED]

Ran across another post having a similar issues and Steven supplied the following sample code as a work around.

<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>

Used this on the site but the component does not auto start.  It does process normally after you manually start the gallery.

http://www.stanleymartin.com/NewLayout/ … _exam1.htm

Any thoughts on what I might be doing incorrectly.

Thanks
Nick

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

Re: Multiple Instances [SOLVED]

Unfortunately, there is currently a known bug whereby embedding multiple galleries on the same page, all of which use autoPlayOnLoad="TRUE", can result in images not displaying.
A bug report has already been logged with the developers and this issue should hopefully be resolved for the next version.

My original solution (as posted above) was to stagger the loading of the galleries using increasing values for window.setTimeout() delays. This should work fine.

However, it has since been discovered that the problem happens only when the imageTransitionType is set to FADE so a suitable workaround should be to set imageTransitionType to CROSS_FADE, SLIDE or NONE instead. (You may need to clear your browser's cache after making this change before reloading your web site.)

Used this on the site but the component does not auto start.  It does process normally after you manually start the gallery.

If using my suggestion above, you need to remove autoPlayOnLoad="TRUE" from your configuration options.
Currently, your galleries start AutoPlay immediately and the toggleAutoPlay() API method in the HTML file stops it.
Without autoPlayOnLoad="TRUE", the toggleAutoPlay() API method will start the AutoPlay for each gallery after a short delay.

  • Registered: 2014-11-21
  • Posts: 11

Re: Multiple Instances [SOLVED]

If I understood your instructions correctly I made the changes and they piece still does not autoplay.

I removed     autoPlayOnLoad="true" from the config file
I changed the transition type to    imageTransitionType="CROSS_FADE" in the config file but the Gallery pieces do not autostart.

Here is the config file header

    galleryTitlePosition="NONE"
    maxThumbColumns="8"
    enableDirectLinks="false"
    captionPosition="OVERLAY_IMAGE"
    imageScaleMode="FILL"
    enableAutoPlay="true"
    displayTime="13"
    showAutoPlayStatus="false"
    showSmallThumbsButton="false"
    showOpenButton="false"
    showExpandButton="false"
    showThumbsButton="false"
    useThumbDots="true"
    galleryTitle="Stanley Martin Project Tours"
    backgroundColor="rgba(255,255,255,1)"
    imageTransitionTime="0.8"
    shareFacebook="true"
    shareTwitter="true"
    sharePinterest="true"
    shareTumblr="false"
    shareGPlus="false"
    shareUrl="http://www.stanleymartin.com/SMCWEB/ProjectDetail.asp?ProjectGroupID=CW&amp;MetroAreaID=1000&amp;"
    imageTransitionType="CROSS_FADE"
    enableLooping="true"

Is anything else required?



http://www.stanleymartin.com/NewLayout/ … _exam1.htm

Thanks for your help
Nick

  • Registered: 2014-11-21
  • Posts: 11

Re: Multiple Instances [SOLVED]

Removed enableAutoPlay="true" and that seemed to do the trick.

Prefer your timed method so thanks for your help.
Nick

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

Re: Multiple Instances [SOLVED]

I'm glad you've found a suitable solution until the bug is fixed but, just for clarity, the two possible workarounds at the moment are:

(1) Set autoPlayOnLoad="TRUE" for all your galleries, set imageTransitionType to CROSS_FADE, SLIDE or NONE (any value but FADE) and do not use the delay solution (with toggleAutoPlay()).

... or:

(2) Set autoPlayOnLoad="FALSE" for all your galleries, set imageTransitionType="FADE" (or any other value but it is only FADE which causes the problem) and do use the delay solution (with toggleAutoPlay()).

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

Re: Multiple Instances [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.