• Registered: 2014-03-17
  • Posts: 4

Topic: First image does not display when gallery is hidden by default

Hi, thanks for a great product! Everything works well, but one thing.

If my gallery is placed at a location which is displayed by default, there seems to be no problem. But when I place my gallery at a location which is hidden by default, the first image of the gallery won't display until navigated back to.

http://www.stromqvi.st
My test gallery is located in a section that is hidden by default. To get there:

- you scroll down to the second section – "the Box"
- you click the three dots which indicate that there is more content to explore

It's important to me and the user experience that the first image is show. How can I fix this?

Please check it out!

  • Registered: 2014-03-17
  • Posts: 4

Re: First image does not display when gallery is hidden by default

Some extra information...

In the elements inspector of chrome I can see that the image loads, but its opacity is set to 0.01. When I change this to "1" the image appears.

I still don't know where and how to change this behavior.

Screenshot: http://snag.gy/x7MwX.jpg

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

Re: First image does not display when gallery is hidden by default

The problem is that you are loading your Juicebox gallery into a hidden container.
You can workaround this by loading your gallery on demand when the link is clicked rather than immediately when the page is loaded.
Put your gallery's embedding code into a JavaScript function such as:

<script>
    function loadGallery() {
        new juicebox({
            containerId: "lebox",
            baseUrl: "http://www.stromqvi.st/wp-content/themes/MasterKenobi/jb_test/",
            galleryWidth: "620",
            galleryHeight: "440",
            backgroundColor: "rgba(0,0,0,1)"
        });
    }
</script>

... and run the function once the gallery's container is visible.
This should solve your problem.

  • Registered: 2014-03-17
  • Posts: 4

Re: First image does not display when gallery is hidden by default

Thanks Steven, I'll try that!

  • Registered: 2014-03-17
  • Posts: 4

Re: First image does not display when gallery is hidden by default

Thanks! With some help I got it to work. Since a different gallery had to load on different interactions the code finally looked like this:

$('.more').click(function loadGallery() {
        var galleryContainer = $(this).siblings('.details').find('.gallery').attr('id');
        new juicebox({
            containerId: galleryContainer,
            baseUrl: "http://www.stromqvi.st/wp-content/themes/MasterKenobi/"+galleryContainer+"/",
            galleryWidth: "620",
            galleryHeight: "463",
            backgroundColor: "rgba(0,0,0,0)"
        });
        })

The only constraint is that I have to name the gallery folder and the div I write in my wordpress post the same.

Thought this might have some value to someone else.

http://www.stromqvi.st

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

Re: First image does not display when gallery is hidden by default

I'm glad you were able to get it working.
Thank you for sharing your code. Hopefully others will be able to benefit from it.