• Registered: 2019-07-25
  • Posts: 4

Topic: Multiple galleries embedding issue

Hi there,

I've been using Simpleviewer for years but decided to move onto Juicebox due to Flash issues. So before I went and bought Juicebox Pro, I wanted to check out Lite version first.

I need to embed multiple galleries into various html pages on my website (no need for multiple galleries on single page), so I'm trying to do that by using baseURL.

Here are my steps:

1) I created a folder named shumbatestgallery, created a gallery in Juicebox Builder and uploaded the entire folder to my website's root, i.e. public_html using FileZilla.

2) When I check the gallery on the website, it's showing, please see the link below:

https://www.ridgeback-douala.net/shumbatestgallery/

3) I edited the code created by Juicebox Builder to include the baseURL (I tried to follow the guide, plus I used some of the things I used for Simpleviewer). The code is below:

<!--START JUICEBOX EMBED-->
<script src="http://www.ridgeback-douala.net/shumbatestgallery/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl : 'http://www.ridgeback-douala.net/shumbatestgallery/',
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(34,34,34,)"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

4) Then I pasted the above code into the html page on which I want the gallery to appear (I use KompoZer to build my pages), shumbatestgallery.html

5) I uploaded the above page to my website's root, the same folder that now contains the gallery folder.

But when I check the page in Chrome, the gallery is now showing. There's literally nothing, I can just see that the page has expanded, as if new content was added, but no sign of the gallery. When I try to open it up in IE, there's a light gray box with the following error message: Juicebox Error: Config file not found.

Please see the link to the page below:

https://www.ridgeback-douala.net/shumbatestgallery.html

I have no idea what I'm doing wrong here (granted, I'm no expert, just self-thought enthusiast that has no clue what she's doing ;-) ). Any help would be greatly appreciated.

Kind regards, Milica

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

Re: Multiple galleries embedding issue

I notice that you use absolute paths in your embedding code starting with http:// but you quote your website URL with an https:// link.

Try using relative paths in your embedding code starting with leading slashes (to denote your root directory).
This should work with both http:// and https:// (and also for accessing your domain with and without the www subdirectory).

Also, as you currently use a galleryHeight of 100%, this means that the gallery's actual height will be 100% of the height of the gallery's parent container so be sure to assign your gallery's parent container a height via CSS (otherwise Juicebox might not be able to determine what the gallery's actual height should be).
Try setting a galleryHeight of 600px, at least for testing purposes, to be sure that the gallery has valid dimensions and will be visible once the path problems have been ironed out.

Try the following:

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

Hopefully this will help.
Please let me know how you get on. Thank you.

  • Registered: 2019-07-25
  • Posts: 4

Re: Multiple galleries embedding issue

Hi Steven,

Thank you so much for replying. I'll go try your suggestion now and will let you know how it goes.

Thanks again!

  • Registered: 2019-07-25
  • Posts: 4

Re: Multiple galleries embedding issue

Hi Steven,

I've followed your instructions but unfortunately, it still doesn't work. The gallery just won't appear on the page. Any other suggestions?

Thank you.

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

Re: Multiple galleries embedding issue

Thank you for trying my suggestion but I notice that the paths in your embedding code are incorrect.
I meant for you to try the exact code I posted above (rather than just adding a leading slash to your full https:// path).
Please try again using the code I posted above.

Incidentally, I notice that you seem to have removed your 'shumbatestgallery' gallery folder and have replaced it with a 'shumbatestgallery1' gallery folder which seems to an incomplete gallery folder (it does not contain a 'config.xml' file).

If reinstating your original 'shumbatestgallery' gallery folder and using the code from my previous post does not work, then please try the following.

(1) Create a sample gallery in JuiceboxBuilder-Pro and save it to a new empty folder named 'my_gallery'.
(2) Upload the entire 'my_gallery' folder to your root directory.
(3) Create a new HTML file in a plain text editor containing the code below and name it 'test_file.html'.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="/my_gallery/jbcore/juicebox.js"></script>
    <script>
    new juicebox({
        baseUrl: "/my_gallery/",
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "#222222"
    });
    </script>
    <div id="juicebox-container"></div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

(4) Upload the 'test_file.html' file to your root directory (alongside your 'my_gallery' folder).
(5) You should now be able to view the gallery on its own web page by visiting https://www.ridgeback-douala.net/test_file.html

This should test the baseUrl functionality on your web server.

If this test scenario works, then something on your own gallery's embedding page may be causing the problem.
Load your own gallery's embedding page and check your browser's developer tools for JavaScript errors, custom CSS which might be hiding the gallery or HTML elements which might be obscuring the gallery.

If this test scenario does not work, then something on your web server may be causing the problem.
Check to see if you have an '.htaccess' file on your web server with any rewrite rules which might be interfering with the gallery files.

I hope this points you in the right direction.

  • Registered: 2019-07-25
  • Posts: 4

Re: Multiple galleries embedding issue

Hi Steven,

Thanks for your patience and your tips. I went back and reinstated the original gallery folder and used the code you initially provided but had no luck again, the gallery still isn't visible. Then I tried the sample gallery and the test html page as you suggested and that worked nicely http://ridgeback-douala.net/test_file.html

I went to the Console in Chrome to see if I can find any errors but it showed none ("No Errors" message).

Unfortunately, I'm afraid solving this probably goes beyond my skills.

Thanks again.

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

Re: Multiple galleries embedding issue

... that worked nicely...

Thank you for trying this. This suggests that incorrect paths or rewrite rules are not the cause of your problem.

Thank you also for reinstating your 'shumbatestgallery' gallery folder and for changing the embedding code in in your gallery's web page.
I have taken another look at your gallery's web page and see that the gallery is actually being embedded correctly.
It is just not visible because the gallery has a width of 100% but it is nested within a <td> element on your web page which has a width of 4px (so the gallery's actual width on your web page is 100% of 4px which is 4px).
If you want to continue using a gallery width of 100%, then you'll need to ensure that your gallery's parent containers all have widths (set via CSS) large enough to accommodate a gallery (much larger than 4px).
(I mentioned a similar problem above with heights as heights usually need to be defined whereas widths usually have a default value of 100%.)
Otherwise, if your table has a fixed width, then you might like to give your gallery a fixed width, too (although sorting out the dimensions of your table elements might be a better option, especially if your table is responsive and you want your gallery to be responsive, too).

Here are two possible solutions (which might require further tweaking depending on the layout of your page and the current dimensions of your gallery's parent containers).

#1 Give your gallery a fixed width
It looks like your gallery's parent <td> container currently has a width of 604px so try the following embedding code:

<!--START JUICEBOX EMBED-->
<script src="/shumbatestgallery/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: "/shumbatestgallery/",
        containerId: "juicebox-container",
        galleryWidth: "604",
        galleryHeight: "600",
        backgroundColor: "rgba(34,34,34,)"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

... or:

#2 Give the <table> that the gallery is nested within a width of 100% via CSS
Leave your gallery's width at 100% and add the following to the <head> ... </head> section of your gallery's web page:

<style>
    table {
        width: 100%;
    }
</style>

I hope this helps.