• Registered: 2018-07-27
  • Posts: 1

Topic: Problems with responsive template

Hello, I am embedding Splash pages in a responsive html template. I want the image in the Splash page  to scale when resizing the browser window. So I setted the width and height of the embedded gallery to 70%. The code is as follows:

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

However, the image doesn't display properly in the div (go here, then click the arrow of the left), unless I refresh the page, then it looks fine.

Can you help me to fix the problem?

Thanks,
Silvia

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

Re: Problems with responsive template

The Splash Page itself seems to be responsive (in both the horizontal and vertical dimensions).
The problem seems to be just with the display of the image within the Splash Page.

Your 'main.css' file contains some global CSS rules which the Splash Page is inheriting and which is affecting the display of the Splash Page image.
For example, on line 1319 of your 'main.css' file is the following code:

*, *:before, *:after {
    box-sizing: inherit;
}

This CSS rule is being applied to all elements on your web page (including those within the Juicebox gallery) and seems to be responsible for truncating the right-hand side of your Splash Page.
It is difficult for Juicebox to protect itself from such global CSS rules and I would recommend that you apply CSS rules to only those elements on your web page which require them through use of CSS selectors (ids and classes).
It looks like there may be other global CSS rules in your 'main.css' file (being applied to all instances of certain HTML elements) which may be affecting the display of your Splash Page so it would certainly be worthwhile checking this out.

Also, your web page seems to have breakpoints (where the layout of your web page changes with a jump when the browser window dimensions cross certain thresholds).
If you find that the Splash Page does not resize as expected when these breakpoints are crossed, then you might need to put your gallery's embedding code into a JavaScript function and call the function (to reload the gallery) each time a breakpoint is crossed (and after your custom code has assigned new dimensions to the containers on your web page).
For example:

<script src="jbcore/juicebox.js"></script>
<script>
    function loadGallery() {
        new juicebox({
            containerId: "juicebox-container",
            galleryWidth: "100%",
            galleryHeight: "100%",
            backgroundColor: "#222222"
        });
    }
</script>
<div id="juicebox-container"></div>

Then, each time you want to load or reload the gallery (when the web page is initially loaded and each time a breakpoint is crossed), you can call the JavaScript loadGallery() function.

Incidentally, using dimensions of 70% means that the gallery (or in your case the Splash Page) will not fill the parent container (and this can result in blank space to the right-hand side and below the gallery or Splash Page).
You might like to consider using dimensions of 100% (so that you can be sure that the gallery or Splash Page fills the parent container) and then size the parent container on your web page accordingly (using CSS).

I hope that these suggestions help.