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

Thanks Steven, I'll try that!

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

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!