• Registered: 2015-06-12
  • Posts: 2

Topic: Vertical spacing below caption above thumbs

I set the caption below the image and max caption height = 35, so I just have one line with the file name and n/nn.
Thumbs position is bottom.

How can I delete the vertical blank space between the bottom of the caption and the top of the thumbs?  Similar to the Juicebox Pro API Demo at http://juicebox.net/demos/support/api/ except that my caption is below the image.

Thanks.

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

Re: Vertical spacing below caption above thumbs

Without seeing your gallery, I would expect that the only space between the bottom of the caption and the top of the thumbnails is the thumbnail padding.
You could set thumbPadding="0" (in JuiceboxBuilder-Pro's 'Customize -> Thumbnail' section) to completely remove the space you are referring to but please note that it would remove the padding from all sides of the thumbnails (not just the top).
If you were to try to remove any space in the gallery using CSS, it may cause problems as Juicebox would not know of such modifications and would expect gallery elements to be in their default positions.

Please post the URL to your gallery so that I can take a look at it for myself.
Once I see your gallery, I might have a better understanding of your query and be able to help further.
Thank you.

  • Registered: 2015-06-12
  • Posts: 2

Re: Vertical spacing below caption above thumbs

Steven,

The gallery is not yet on the Internet pending resolution of this problem, so I can't send you a URL.  I don't see any way to attach an image to a forum post, so I have sent you a partial screenshot showing part of the bottom of the image down through the tops of the thumbnails.  The space to which I'm referring is larger then the thumbPadding setting of 10, and I would not want to set that to 0 because, as you wrote, it would remove the padding from all sides of the thumbnails, not just the top.

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

Re: Vertical spacing below caption above thumbs

Thank you for sending me your screenshot.

However, it can be difficult to determine the cause of a problem from just a screenshot alone.
I may need to see the web page that the gallery is embedded into and the gallery's configuration options.
The problem could possibly be a conflict with some custom CSS that you have on your web page or a certain combination of configuration options. (Unfortunately, I can't tell from a screenshot and I do not know if your gallery is embedded on a web page alongside other content).

Here are a couple of things to check which might help:

(1) Check, using your browser's developer tools (usually accessed via F12), to see if the spacing is due to any of your own custom CSS (if you use any). If you use any global CSS rules which the gallery is inheriting, I would recommend that you apply these rules to only those elements on your web page which require them through use of CSS selectors.

(2) One possible reason for there being a gap between the bottom of the captions and the top of the thumbnails is if you were to set:

galleryTitle=""
galleryTitlePosition="ABOVE_THUMBS"

If you have set galleryTitlePosition="ABOVE_THUMBS" and use an empty galleryTitle, then just set galleryTitlePosition="NONE"instead.

If neither of the suggestions above help, then if at all possible, please send me a zipped version of your gallery and the web page it is embedded into (or upload it somewhere and provide a download link) so that I can investigate further. Thank you.

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

Re: Vertical spacing below caption above thumbs

Many thanks for emailing me your complete gallery folder.

The spacing is actually caused by your images not being large enough to fill the gallery's image area (in a large browser window) and there is a gap at the top and bottom of the image in the gallery's image area. (This gap, in conjunction with the top of the thumbnail padding, accounts for the spacing you see.)
If you reduce the height of your browser window (so that the images need to be scaled down to fit within the image area) you should see the gap reduce until it is the same above and below the thumbnails (the only spacing left being the the thumbnail padding iteslf).

When using imageScaleMode="SCALE_DOWN" (the default setting), large images are scaled down to fit within the gallery's image area but small images are not scaled up (as their visual quality would be reduced).

Either increase the size of your images in your gallery or set imageScaleMode="SCALE".
Your landscape images are currently 640 x 479. The default values in JuiceboxBuilder-Pro are 1024 x 768 and this should be more suitable for your web gallery but you will need to feed JuiceboxBuilder-Pro larger source images in order for them to be resized down to 1024 x 758. Small images are not scaled up during the resizing process.

This should hopefully solve your problem.

Incidentally, if your browser window was much taller than it was wide, then you would also see space at the top and bottom of the main images.
Even using imageScaleMode="SCALE", the images would be scaled as large as possible to fit within the gallery's image area (without cropping) but, if the aspect ratio of the gallery is very different to that of the images, space can appear at the top and bottom of the images (or left and right, depending on the shape of the images).
For this scenario, please see this FAQ:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?