• Registered: 2016-09-30
  • Posts: 4

Topic: Multiple galleries on the same wordpress page

I'm using juicebox pro wordpress plugin. I need to implement multiple galleries using the wp plugin. Is there a way to do this or do I need to go the embed route?
If so, I already created a gallery using the desktop application however nothing seems to show up on my live wp page.
I:

1. Created gallery
2. Uploaded the entire folder to my sever's "HTML" folder.
3. Then I created a post and pasted the link(as text) from the desktop application to pmy wp post.

Still does work. I changed the path to: <script src="jbox/jbcore/juicebox.js"></script> "jbox" being the name of my gallery but it still doesn't work. I aslo tried using the full url of my website. <script src="http://mywebsiteurl.com/jbox/jbcore/juicebox.js"></script> but it still doesnt work.

**The full location of my gallery folder is: /var/www/html/jbox.**


If there is a way to use the plugin to create multi galleries on the same page please help me with that. Otherwise I'd love some assistance with embedding the gallery.

Thanks,
Horize

  • Registered: 2016-09-30
  • Posts: 4

Re: Multiple galleries on the same wordpress page

The box is now showing up, but theres an error.

"Juicebox Error: Config file not found."

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

Re: Multiple galleries on the same wordpress page

WP-Juicebox (the Juicebox plugin for WordPress) supports only one gallery per page or post.
If you want to embed multiple galleries on a single page or post, you'll need to embed them manually.
I would recommend using the baseUrl method of embedding as documented here.
Essentially, once you have created a gallery with JuiceboxBuilder-Pro, you would upload the complete gallery folder (not just the contents) to your web server and paste the baseUrl embedding code into the body of your WordPress page or post (ensuring that the method of entry is 'Text' rather than 'Visual'). It does not matter where on your web server you upload your gallery folder to as long as the two paths in the embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct.

As you have already uploaded a complete gallery folder ('jbox') to your web space's root directory, you can use the following embedding code. The leading slashes in the paths denote your root directory so the embedding code will work in any web page throughout your site without any modification (although you can change the gallery dimensions and background color if required).

<!--START JUICEBOX EMBED-->
<script src="/jbox/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: '/jbox/',
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '600',
        backgroundColor: '#222222'
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Notes regarding embedding multiple galleries in a single page or post

(1) Make sure that you embed each gallery into a container with a unique containerId/id.
(2) Load the 'juicebox.js' file only once per web page (not once per gallery).

For example, if you uploaded a second gallery folder ('jbox2') to your root directory alongside your current gallery folder ('jbox'), then you could embed the two galleries in a single page or post using the following embedding code:

<script src="/jbox/jbcore/juicebox.js"></script>

<script>
    new juicebox({
        baseUrl: "/jbox/",
        containerId: "juicebox-container1",
        galleryWidth: "100%",
        galleryHeight: "600",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container1"></div>

<script>
    new juicebox({
        baseUrl: "/jbox2/",
        containerId: "juicebox-container2",
        galleryWidth: "100%",
        galleryHeight: "600",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container2"></div>