• Registered: 2017-11-24
  • Posts: 5

Topic: Multiple Galleries on one page

HI all,

Trying to embed two galleries into one HTML page and its not working.......

Here's the code I am using,

<!--1st Gallery Embed-->
        <script type="text/javascript">
        new juicebox({
            containerId:'jb-netting1',
            baseURL: 'netting1/',
            galleryWidth:'800',
            galleryHeight:'500',
            backgroundColor: 'rgba(255,0,0,.7)'
        });
        </script>
        <div id="jb-netting1"></div>
        <!-- END 1st Gallery Embed -->

        <h2>Gallery 2</h2>

        <!--2nd Gallery Embed-->
        <script type="text/javascript">
        new juicebox({
            containerId:'jb-netting2',
            baseURL: 'netting2/',
            galleryWidth:'800',
            galleryHeight:'500',
            backgroundColor: 'rgba(0,255,0,.7)'
        });
        </script>
        <div id="jb-netting2"></div>
        <!-- END 2nd Gallery Embed -->

I know the problem is to do with the container ID so a little guidfance would be greatly appreciated.

Happy Xmas folks!

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

Re: Multiple Galleries on one page

Your embedding code looks like it should work fine as long as the following points are followed:

(1) Make sure that you load the 'juicebox.js' file from one of your galleries into your web page (before the embedding code).
For example:

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

(2) The baseUrl paths are relative (to the web page containing the embedding code) so make sure that you have uploaded your 'netting1' and 'netting2' gallery folders (the complete folders, not just the contents) to the directory that contains the gallery's embedding page.

I hope these notes help.
However, if you continue to experience difficulties, please post back with the URL to your web page so that I can take a look at the problem for myself.
Once I'm able to see the problem live on your web server, I should hopefully be able to determine the cause of the problem and propose a solution.
Thank you.