1 (edited by ole 2016-06-01 06:26:08)

Topic: Websites - how to set up embedded Juicebox-Gallery? [SOLVED]

Hello,

Have a Juicebox-Gallery embedded in a website with this code :

<p><iframe width="100%" height="100%" frameborder="0"  src="http://www.metzgerei-waibel.de/_1"></iframe></p>

The width is displayed correctly, but the height is too low.

What should I set so that the height adjusts automatically on mobile devices?


http://www.metzgerei-waibel.de/_0/01.jpg

Re: Websites - how to set up embedded Juicebox-Gallery? [SOLVED]

Setting a height of 100% will work only if all the parent containers that the gallery is nested within (up to and including the 'body' tag) have heights set via CSS, otherwise your iframe will not know what its actual height should be 100% of.

In a web page which has content which is intended to be viewed by scrolling vertically, which yours seems to be from your screenshot (looking at the 'Genussletter' section at the foot of the screenshot), I would recommend setting a fixed height such as 600px. Either change the height of your iframe or check the heights of all your iframe's parent containers.

I would also recommend embedding your gallery directly in your web page rather than loading it into an iframe.
There are certain drawbacks to using an iframe which are noted in the 2) Using an iframe support section.

As long as the web page whose screenshot you posted is on the same domain as the gallery, then you should be able to replace your iframe with the following embedding code.

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

Please see this forum thread for more notes on having a responsive Juicebox gallery.

Re: Websites - how to set up embedded Juicebox-Gallery? [SOLVED]

Great thank you!
It works!

Your solution is better than iFrame :-)

Re: Websites - how to set up embedded Juicebox-Gallery? [SOLVED]

You're welcome!
I'm glad you're happy with my solution.