1 (edited by lfen 2019-06-14 22:51:09)

Topic: Responsive galleries and caption queries [SOLVED]

.

Re: Responsive galleries and caption queries [SOLVED]

I assume the only way to get the gallery to be a responsive size is to set the galleryWidth to 100%.

There are essentially two ways to make a Juicebox gallery responsive (with its dimensions dynamically changing with the size of the user's browser window).

Scenario #1:
A Juicebox gallery will be responsive (and will dynamically scale with the size of the user's browser window) if the gallery's own dimensions and the dimensions of all parent containers are expressed as percentages. If there is a fixed value anywhere up the chain, then the gallery's size will become fixed (e.g. 100% x 100% x 800px = 800px).
Please note that when using percentage heights, you may need to implement the suggestion noted here.

Scenario #2:
You could use JavaScript to listen for a change in the size of the user's browser window and assign new dimensions to the Juicebox gallery if and when this happens.
An example of this can be found in the resizable galleries support section here.
Take a look at the source of this sample gallery in your browser to see how this might be achieved.

I did this leaving galleryHeight empty and the result was not good.  I also tried 100% for the height...

If you leave galleryHeight empty, then Juicebox will use the default value of 100% (so leaving galleryHeight empty is the same as setting galleryHeight to 100%).

... and found that 85% was much better.  Am I doing this right or is there a better way?

If setting galleryHeight to 85% works within your own web page, then that is absolutely fine.

Also, If I have captionPosition set to below_image, it puts in a HUGE amount of wasted space between the image and the thumbs.

If you set captionPosition to BELOW_IMAGE, BOTTOM or BELOW_THUMBS, then the height of the caption area will be fixed at the maxCaptionHeight value (default value 120px). (If you set captionPosition to OVERLAY or OVERLAY_IMAGE, then the height of the caption area will be variable up to the maximum value set via maxCaptionHeight.)
You can change the value for maxCaptionHeight in JuiceboxBuilder-Pro's 'Customize -> Caption' section.

Is there a way to keep the captions from fading away?

Yes. Set showImageOverlay="ALWAYS" in JuiceboxBuilder-Pro's 'Customize -> Main Image' section.

I hope my notes above help.

Re: Responsive galleries and caption queries [SOLVED]

Couldn't delete the post so edited it out instead, sorry.

Re: Responsive galleries and caption queries [SOLVED]

That's OK.
Leaving the post up might help others with similar problems.

Re: Responsive galleries and caption queries [SOLVED]

Steven @ Juicebox wrote:

That's OK.
Leaving the post up might help others with similar problems.

And you gave such a perfect answer.    I deleted the post just before your reply because I had left the URL to my dev site and wanted to remove it.   I could have just edited it out.  Anyway, thanks for your answer, it covered all my questions completely.

Re: Responsive galleries and caption queries [SOLVED]

No worries!
I'm just glad to hear that your problems have been resolved.
Thank you for letting me know.