• Registered: 2018-05-21
  • Posts: 1

Topic: Multiple Gallery at different page On One Website

I am doing good on first gallery with juicebox , everything go perfect . but when i am trying 2nd gallery on another page , it doesnot show any juicbox gallery on the page after uploading  file .I am using filezilla to upload my gallery and all folder generated by juicebox. I have tried your suggest on the forum but failed.  Please HELP !

this is embedding code for the 2nd  gallery   like this.

<script src="http://www.thepvongsa.co.th/gallery1/jbcore/juicebox.js"></script>
<script>
  new juicebox({
    baseUrl: 'http://www.thepvongsa.co.th/gallery1/',
    containerId : 'juicebox-container1'
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(34,34,34,1)"
  });
</script>
<div id="juicebox-container1"></div>

Post's attachments

filezilla 02.jpg 253.97 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.
  • Registered: 2012-04-24
  • Posts: 5,904

Re: Multiple Gallery at different page On One Website

You are missing a comma after the line:

containerId : 'juicebox-container1'

A comma is required to separate each configuration option in the embedding code. A missing comma will break the code.
Use the following instead:

containerId : 'juicebox-container1',

Incidentally, as you use http://www.thepvongsa.co.th in the paths in the embedding code, your gallery will display only if you visit the gallery using http:// (and not https:// if your site is secured using an SSL certificate) and also only if you use the 'www' subdirectory (and not just thepvongsa.co.th).
The reason for this is the JavaScript Same-Origin Policy which you can read more about here.

It would be safer (and more flexible) to use the following embedding code. The leading slash in the paths denotes your root directory and the gallery should then display in all the scenarios I mentioned above):

<script src="/gallery1/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: "/gallery1/",
        containerId: "juicebox-container1",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "rgba(34,34,34,1)"
    });
</script>
<div id="juicebox-container1"></div>