Topic: Strange behaviour - Image size issue [SOLVED]

Hi

I am facing a strange behavior of the gallery. I have embedded the gallery at my html5 website ( http://styleusbrands.com --> Products -->Tshirts). When I click on the Tshirt page, the size of the images are showing very small. However, if I adjust the zoom settings of my browser, the size magically corrects itself!

Can anyone tell me where might be the problem?

PS:I tested on different browsers but same problem

Re: Strange behaviour - Image size issue [SOLVED]

It looks like the problem is that your gallery is loaded as soon as the main web page is loaded but before the gallery's parent container is visible on the page (which happens only when the T-Shirts link is clicked).
Your gallery's dimensions are 100% x 100% (100% of the size of the parent container) and, when the page is initially loaded, the gallery's parent container has zero size (it does not yet exist on the web page) and, consequently, the gallery also has zero size.
You should notice that if you resize your browser window after the gallery has loaded, the gallery elements should snap into place correctly (now that the gallery's parent container exists and Juicebox can work out what its actual size should be 100% of).

Solutions to this problem would be:
(1) Give your gallery fixed pixel dimensions rather than percentages (such as 800px x 600px). This should work but your gallery would become a fixed size and would no longer be responsive.
... or:
(2) Load the gallery only after the T-Shirts link is clicked.
You could put your gallery's embedding code into a JavaScript function and then run the function when the link is clicked (after the gallery's parent container is visible on the page).

For example, you could change:

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

... to:

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

... and then add a JavaScript click handler to run the loadGallery() function when the T-Shirt link is clicked.
It looks like this is the link to your T-Shirts modal:

<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">

You could try changing it to:

<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal" onclick="loadGallery(); return true;">

Hopefully this will help.

Re: Strange behaviour - Image size issue [SOLVED]

Thanks a lot Steven. My problem is resolved!

Re: Strange behaviour - Image size issue [SOLVED]

That's great! Thank you for letting me know.