• Registered: 2012-08-20
  • Posts: 1

Topic: Help needed on "Embedding Multiple Galleries"

Hi,

I am trying to have multiple galleries showing on my main page,
http://koheiart.com.
I created each gallery separately but I am having a trouble putting all together as you have on your demo page.
http://www.juicebox.net/demos/support/r … /gallery1/

All my files and folders is in one folder. And I copy the code to my index.html. The Galleries work individually but I can't seem to show as I see on the demo page.
http://koheiart.com/gameart/index.html
http://koheiart.com/gameenv/index.html
http://koheiart.com/pleinair/index.html

The following is my index.html. I wanted to try if I can embed one gallery. I appreciate if you can tell my problem.
<!--START JUICEBOX EMBED-->
<script src="gameart/jbcore/js/juicebox.js"></script>
<script>
new juicebox({
containerId : "juicebox-container",
baseUrl : 'gameart/',
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
</html>

Otherwise, it is a great gallery!!

Thank you,

Kohei,

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

Re: Help needed on "Embedding Multiple Galleries"

Change:

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

... to:

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

The 'juicebox'js' file is not located in a folder named 'js' within the 'jbcore' folder.
This was an error in the code provided in the Juicebox - Embedding Guide which I have now fixed. Sorry for the inconvenience.

If you wish to embed multiple galleries on the same HTML page, you will need to embed each gallery into a <div> with a unique 'id'.
For example:

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

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

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

(It is necessary to load the 'juicebox.js' file only once on your page.)

Also, your current http://koheiart.com/index.html page contains only the embedding code for a single gallery (with a closing </html> tag at the end) and is not a complete web page. It should contain a Doctype Declaration at the top and should have <html>, <head> and <body> tags. Please see the example here for details. (The embedding code should go between the <body> </body> tags.)