• From: Asbury Park, NJ
  • Registered: 2013-10-01
  • Posts: 4

Topic: Multiple Galleries on Same Wordpress Page

I'm using Juicebox Pro on a hosted Wordpress site. On some pages I need to create multiple galleries on the same page/post. I understand the concept of using separate gallery folders & the Base URL for each gallery. What I don't get is how to give each a different containerID & where to do that. Any help would be appreciated. Thanks.

This is what my embeds look like:

<!--START JUICEBOX EMBED-->
<script src="http://www.mywebsite.com/_juicebox/First-Gallery/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl : "http://www.mywebsite.com/_juicebox/First-Gallery",
containerId : "juicebox-container",
galleryWidth: "560",
galleryHeight: "750",
thumbWidth: "50",
thumbHeight: "50",
backgroundColor: "rgba(255,255,255,1)"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Some other text here. Some other text here. Some other text here.
Some other text here. Some other text here. Some other text here.
Some other text here. Some other text here. Some other text here.

<!--START JUICEBOX EMBED-->
<script src="http://www.mywebsite.com/_juicebox/Gallery-Two/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl : "http://www.mywebsite.com/_juicebox/Gallery-Two",
containerId : "juicebox-container",
galleryWidth: "560",
galleryHeight: "750",
thumbWidth: "50",
thumbHeight: "50",
backgroundColor: "rgba(255,255,255,1)"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

go2jo's Website

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

Re: Multiple Galleries on Same Wordpress Page

Give each 'juicebox-container' <div> a unique 'id' and refer to that 'id' in the gallery's containerId configuration options.
For example:

<!--START JUICEBOX EMBED-->
<script src="http://www.mywebsite.com/_juicebox/First-Gallery/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl : "http://www.mywebsite.com/_juicebox/First-Gallery/",
containerId : "juicebox-container-one",
galleryWidth: "560",
galleryHeight: "750",
thumbWidth: "50",
thumbHeight: "50",
backgroundColor: "rgba(255,255,255,1)"
});
</script>
<div id="juicebox-container-one"></div>
<!--END JUICEBOX EMBED-->

Some other text here. Some other text here. Some other text here.
Some other text here. Some other text here. Some other text here.
Some other text here. Some other text here. Some other text here.

<!--START JUICEBOX EMBED-->
<script>
new juicebox({
baseUrl : "http://www.mywebsite.com/_juicebox/Gallery-Two/",
containerId : "juicebox-container-two",
galleryWidth: "560",
galleryHeight: "750",
thumbWidth: "50",
thumbHeight: "50",
backgroundColor: "rgba(255,255,255,1)"
});
</script>
<div id="juicebox-container-two"></div>
<!--END JUICEBOX EMBED-->

Incidentally, you need to load only one instance of the 'juicebox.js' file on your page and your baseUrls should end with a trailing slash.

  • From: Asbury Park, NJ
  • Registered: 2013-10-01
  • Posts: 4

Re: Multiple Galleries on Same Wordpress Page

Duh! That was too easy. ;)  Thought it was going to be more complicated. Thanks!

Now I have to search for the fix for the "added space above the gallery" and how to cure it. I set up these four small same page galleries that show only two rows of thumbnails, no tittle, nothing other than the expand icon. But each gallery on the same page has an extra paragraph div added above each gallery. Can't tell if it's Wordpress or a Juicebox issue. It would be nice to have a global CSS fix. I remember seeing a "float left" css fix somewhere in the forum. Time to search. If I knew what Juicebox CSS element to use/call in a nested p.juciebox-elemet and make the p be 1 pixel rather than do a float left & clear. Just thinking out loud.

Thanks again!

go2jo's Website

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

Re: Multiple Galleries on Same Wordpress Page

But each gallery on the same page has an extra paragraph div added above each gallery. Can't tell if it's Wordpress or a Juicebox issue.

If there is an extra <div> in your page above each gallery, then it is likely to be a WordPress issue.
Juicebox does not add any new <divs> to a page outside the 'juicebox-container' <div>.

If I knew what Juicebox CSS element to use/call in a nested p.juciebox-elemet and make the p be 1 pixel rather than do a float left & clear.

Perhaps using a browser's developer tools (F12 in Chrome or the 'Inspect Element' right-click option in Firefox) will help you track down the CSS element(s) you would like to modify.