• Registered: 2017-03-02
  • Posts: 1

Topic: Current image gets left justified and small, Fixed when win resized

I recently starting work on upgrading a gallery by using bootstrap to put it in a modal. This seems to mess up the drawing of the gallery and result in the image being shrunk and left justified. However if the window is resized the gallery corrects itself even when the modal is closed and reopened until I reload. Anyone know who to correct this issue?

Thanks.

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

Re: Current image gets left justified and small, Fixed when win resized

It sounds like your Juicebox gallery is being loaded as soon as your web page is loaded but before your modal window is visible.
If this is the case, then Juicebox's parent container (your modal window) will have no dimensions when the gallery is loaded and Juicebox won't know what its actual size should be.

You could either:
(1) Use fixed pixel values (instead of percentages) for your galleryWidth and galleryHeight
... or:
(2) Put your gallery's embedding code in a JavaScript function and call the function (to load the gallery) only when the modal window is ready.
For example, something like the following should hopefully work for you.

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

<script type="text/javascript">
    function loadGallery() {
        new juicebox({
            containerId: "juicebox-container",
            galleryWidth: "100%",
            galleryHeight: "100%",
            backgroundColor: "#222222"
        });
    }
</script>

<div id="juicebox-container"></div>

<script type="text/javascript">
    // Load gallery by calling JavaScript loadGallery() function when necessary
    loadGallery();
</script>

I don't know how your modal window is being opened but I hope that this points you in the right direction.