• Registered: 2013-03-14
  • Posts: 15

Topic: Multiple Slideshows on a page with Tabs

We are using a CMS for publishing our site so therefore have many users. I would like to consolidate things as much as possible. Currently I have a juicebox fodler that houses the jbcore folder along with a config.xml file at it's root.

When creating additional tabs with slideshows would it be possible to a create new config.xml files and keep with the same jbcore folder as these items do not change between slideshows? Or for each embed can I override the one config.xml file if it only contained basic info. So, each embed perhaps pointing to a different flickerSetId? I tried this and it did not overide the .xml file's flickrId so I'm guessing not.

<!--START JUICEBOX EMBED-->
<script type="text/javascript">// <![CDATA[
new juicebox({
baseUrl : 'juicebox/',
containerId : "juicebox-container",
flickrSetId: "72157633272537687",
galleryWidth: "100%",
galleryHeight: "450px",
backgroundColor: "rgba(0,99,160,1)"
});
// ]]></script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

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

Re: Multiple Slideshows on a page with Tabs

You can have multiple galleries share a single 'jbcore' folder by following the instructions here.

The code you posted should work fine (overriding the XML settings) but you would have to add the following line:

useFlickr: 'true',

... if useFlickr="TRUE" is not already listed as a configuration in the 'config.xml' file that the gallery uses.

  • Registered: 2013-03-14
  • Posts: 15

Re: Multiple Slideshows on a page with Tabs

First I want to thank you for your assistance, much appreciated. I tried doing as you suggested and I must be missing something. The test page is published to: http://www.uas.alaska.edu/sandbox/alumn … 2sets.html

The first tab is purposely blank (no content) but the other two should be bringing into two different slideshow, both fed by different Flickr sets. My intent is that pages with tabs are to share the same jbcore and config.xml file found in a juicebox folder at the root. The config.xml is to have those things that are common across slideshows with each slideshow's embed having the differences (flickrSetId, containerId...etc). Am I missing something obvious, although not to myself? Thanks again for any assistance you might give.

Tab2 contains:
<!--START JUICEBOX EMBED-->
<script type="text/javascript">
new juicebox({
containerId : 'juicebox-gingerbread'
baseUrl: 'juicebox/',
flickrSetId: "72157633272537687",
useFlickr: "true",
galleryWidth: "100%",
galleryHeight: "450px",
backgroundColor: "rgba(0,99,160,1)"
});
</script>
<div id="juicebox-gingerbread"></div>
<!--END JUICEBOX EMBED-->

Tab3contains:
<!--START JUICEBOX EMBED-->
<script type="text/javascript">
new juicebox({
containerId : 'juicebox-art'
baseUrl: 'juicebox/',
flickrSetId: "72157632985665552",
useFlickr: "true",
galleryWidth: "100%",
galleryHeight: "450px",
backgroundColor: "rgba(0,99,160,1)"
});
</script>
<div id="juicebox-art"></div>
<!--END JUICEBOX EMBED-->

The common config.xml file they both share is:
<?xml version="1.0" encoding="UTF-8"?>

<juiceboxgallery

    useFlickr="true"
    flickrUserName=""
    flickrSort="DATE-TAKEN-DESC"
    galleryHeight="460px"
    backgroundColor="rgba(0,99,160,1)"
    showThumbsButton="false"
    showExpandButton="true"
    showOpenButton="false"
    expandInNewPage="FALSE"
    stagePadding="0"
    changeImageOnHover="false"
    showLargeThumbs="true"
    showSmallThumbs="false"
    thumbPadding="2"
    thumbNavPosition="CENTER"
    maxCaptionHeight="100"
    captionPosition="OVERLAY_IMAGE"
    captionHAlign="LEFT"
    showImageOverlay="AUTO"
    imageNavPosition="IMAGE"
    flickrShowPageLink="false"
    flickrShowDescription="true"
    splashDescription="Select for UAS Slideshow"
    backButtonPosition="NONE"
    backButtonUseIcon="false"
    showImageNav="true"
    backgroundUrl=""
    backgroundScale="NONE"
    imageShadowBlur="0"
    useFullscreenExpand="true"
    enableKeyboardControls="true"
    splashImageUrl="http://www.uas.alaska.edu/gallery/images/auke-lake-mobile.jpg"
    imageScaleMode="FILL"
    shareFacebook="true"
    sharePinterest="true"
    enableAutoPlay="true"
    autoPlayOnLoad="true"
    showImageNumber="false"/>

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

Re: Multiple Slideshows on a page with Tabs

At the moment, the only instance of the 'juicebox.js' file on your web page is coming from the following code:

<script src="http://www.uas.alaska.edu/alumni/juicebox/jbcore/juicebox.js" type="text/javascript"></script>

... and the file is not currently at that location.
Once this is fixed, try it again to see if it works. It is hard to tell whether there are any other problems without the 'juicebox.js' file being loaded on your page.

  • Registered: 2013-03-14
  • Posts: 15

Re: Multiple Slideshows on a page with Tabs

There, silly mistake. The jbcore folder was published live with the rest of the page being in our sandbox. Now both are in the sandbox with the .js in the header. Should this be repeated for each of the embeds or is once in the header sufficient?

Page published to the same location at: http://uas.alaska.edu/sandbox/alumni/ev … 2sets.html

  • Registered: 2013-03-14
  • Posts: 15

Re: Multiple Slideshows on a page with Tabs

Looking at the embed code you have at: http://www.juicebox.net/demos/support/m … _one_page/ is see that each has it's own baseURL, in this case gallery1/ and gallery2/

When looking at the index for gallery1 what is to be placed here? Is it the index.html file at the root of the gallery folder or the full.html file in the jbcore folder?

Am I correct that for each slideshow I would need a baseURL for each tab, in my case gingerbread.html and art.html? So for gingerbread.html (created by JBP):

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Full screen gallery</title>
    <meta id="sv-meta" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="juicebox.js"></script>

    <style type="text/css" media="screen">
        body
        {
            padding: 0;
            margin: 0;
        }
        #juicebox-gingerbread
        {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <!--START Juicebox.-->
    <script type="text/javascript">
        var expanded_jb_gallery = true;
        new juicebox({
            containerid:'juicebox-gingerbread',
            galleryHeight:'100%',
            galleryWidth:'100%'
        });
    </script>
   
    <div id="juicebox-gingerbread"></div>
    <!-- END Juicebox -->
</body>

</html>

  • Registered: 2013-03-14
  • Posts: 15

Re: Multiple Slideshows on a page with Tabs

If the above is true why would my page with one slideshow work at: http://uas.alaska.edu/sandbox/alumni/events-test.html that does not contain either the JBP created index file or full.html files?

  • Registered: 2013-03-14
  • Posts: 15

Re: Multiple Slideshows on a page with Tabs

I'm starting to think that tabs on a page with multiple slideshows is not the way to go. In our CMS it would introduce too many potential errors. Instead I have created a folder for slideshows that would only require out users to edit the embed block with the flickrSetId while the xml file that is hidden from view containing persistent items such as background color, sharing, splash image...etc.

Is there a list on your site that includes items that must be in the embed? I noticed that when I only had galleryHeight in the .xml file that it wasn't included in the published page.

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

Re: Multiple Slideshows on a page with Tabs

Should this be repeated for each of the embeds or is once in the header sufficient?

Loading one instance of the 'juicebox.js' file in the <head> section of your web page is sufficient. (There is no need to load the 'juicebox.js' file for each gallery.)

When looking at the index for gallery1 what is to be placed here? Is it the index.html file at the root of the gallery folder or the full.html file in the jbcore folder?

Under normal circumstances, there should be no need to go into the 'jbcore' folder and the 'full.html' file should be left unmodified in its original location (the root of the 'jbcore' folder). (It is used when going fullscreen in mobile devices.)
Also, the 'index.html' file from a gallery is required only if you want to display the gallery on a page of its own. If you plan to embed the gallery in an existing web page alongside other content, then this file can safely be ignored.

Am I correct that for each slideshow I would need a baseURL for each tab, in my case gingerbread.html and art.html?

If you plan to embed several galleries, then I would recommend the baseURL method of embedding as documented here. This would allow you to upload your complete gallery folders to your web server keeping each gallery separate in its own folder.
The baseURL embedding code should be inserted into your own web page and you should not modify the 'jbcore/full.html' file. (All galleries can safely share a single 'jbcore' folder with the same 'full.html' file.)

If the above is true why would my page with one slideshow work at: http://uas.alaska.edu/sandbox/alumni/events-test.html that does not contain either the JBP created index file or full.html files?

As noted above, a gallery's 'index.html' file is required only if you want to display the gallery on a page of its own. It is not required (or used) if you embed the gallery in a web page of your own.
If your gallery does not have a 'full.html' page in the 'jbcore' folder, then your gallery will likely fail when going fullscreen on a mobile device.

Is there a list on your site that includes items that must be in the embed?

Yes. A list of Embed Options can be found here. These options (if used) must be in the embedding code rather than the XML file. All other options can be set either in the embedding code or the XML file. (The exception being debugMode which, if used, must be set in the XML file.)

I noticed that when I only had galleryHeight in the .xml file that it wasn't included in the published page.

The galleryHeight entry in the XML file is not actually used by Juicebox when the gallery is displayed. It is used only by JuiceboxBuilder-Pro to repopulate the fields in the interface when opening an existing gallery to edit it.