Topic: Responsive galleries and caption queries [SOLVED]
.
Pages 1
You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → 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.
Couldn't delete the post so edited it out instead, sorry.
That's OK.
Leaving the post up might help others with similar problems.
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.
No worries!
I'm just glad to hear that your problems have been resolved.
Thank you for letting me know.
Set showImageOverlay="ALWAYS" in JuiceboxBuilder-Pro's 'Customize -> Main Image' section.
Can you set this in the embed options?
@mrp
Yes. You can set most configuration options in either the 'config.xml' file or the embedding code.
( I usually recommend setting options in JuiceboxBuilder-Pro as it seems to be the most popular method of creating and editing galleries and it does not involve any manual code editing.)
Please see the Setting Config Options support section for further details.
The only configuration options that must be set in the embedding code rather than the 'config.xml' file are listed in the Embed Options.
All other options can be set in either the 'config.xml' file or the embedding code.
(If an option is set in both the 'config.xml' file and the embedding code, then the value in the embedding code takes precedence over the value in the 'config.xml' file.)
OK. It wasn't mentioned in the embedding options.
Juicebox Support Forum → Juicebox-Pro Support → Responsive galleries and caption queries [SOLVED]
Powered by PunBB, supported by Informer Technologies, Inc.