• Registered: 2014-10-05
  • Posts: 7

Topic: Captions below thumbs

Hi,

I've got a problem with captions not showing up when I put them "BELOW_THUMBS".
The captions work fine when I select overlay image, but not below the thumbs.
In JuiceboxBuilder Pro part of the title appears, but the caption itself seems to be pushed out of the screen. Online neither the title or the caption appear (although when you resize the window part of it might show).

I'm using these settings:
Title: above thumbs
Thumbs position: left
Thumbs HAlign: Center
Thumbs VAlign: Center
Thumbs Nav Position: Bottom (When I change this setting to Center the captions do show)

Here's an example of a gallery with this problem: www.athoss.nl/2013/01

Any idea how this might be solved? Thanks.

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

Re: Captions below thumbs

Try increasing maxCaptionHeight (in JuiceboxBuilder-Pro's 'Customize -> Caption' section) to allow more room for your captions. (It is currently set to 55 and the default value is 120.) Also, try reducing maxThumbRows ('Customize -> Thumbnails'). This may also increase the space available for your captions.

  • Registered: 2014-10-05
  • Posts: 7

Re: Captions below thumbs

Hi Steven,

Thanks for the reply. It solves the problem but keeps me wondering: when I solve it by increasing the maxCaptionHeight until both the title and the caption fit in the screen all the space below the thumbs is filled with navigation buttons and title/caption (which is good).
However, this takes up a lot of space (especially a lot of blank space between the thumb navigation buttons and the title/caption). It also leaves a lot of blank space above the gallery title/thumbs. Example: www.athoss.nl/2013/01

When I change the position of the navigation buttons from bottom to center I can decrease the maxCaptionHeight and the "waste" of space above the thumbs/gallery title disappears which makes the vertical outlining of the thums more balanced. Because of this I now also get at least one extra row of thumbs.
Do you know if there is there any way to perhaps move the naviagation buttons to below the image title/caption and adjust the vertical outlining of the gallery title/thumbs section? I've been trying to adjust things in the css file but so far haven't found a solution.

Any help would be much appreciated.

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

Re: Captions below thumbs

Do you know if there is there any way to perhaps move the navigation buttons to below the image title/caption and adjust the vertical outlining of the gallery title/thumbs section? I've been trying to adjust things in the css file but so far haven't found a solution.

Unfortunately, I do not think there is an easy solution to your problem.
Not only would it be difficult to move the thumbnail navigation buttons to below the captions but Juicebox would have no knowledge of this modification (it would expect the buttons to be in a certain position) and this may lead to layout problems when the gallery is dynamically resized (for example when the user's browser window changes size or when the gallery is expanded).
Working with the available configuration options is certainly the best course of action to avoid possible unforeseen pitfalls.
Perhaps you could move the captions (using captionPosition) to either OVERLAY_IMAGE (default) or BELOW_IMAGE. This would free up more space for extras thumbnail rows and would avoid the caption cut-off problem.

  • Registered: 2014-10-05
  • Posts: 7

Re: Captions below thumbs

Hi Steven,

With some trial and error I've been able to (almost) achieve what I was aiming for:

Adding "margin-top: -40px !important;" to "div.jb-area-caption" has moved the captions up.
Adding "margin-top: 80px !important;" to ".jb-navigation" has moved the navigation buttons down (below the caption area).

Adding "margin-top: -60px !important;" to ".jb-flag-large-screen-mode .jb-area-large-mode-title" has moved the title up.

Adding the code below has moved all the thumbs up as well:
.jb-flag-large-screen-mode .jb-idx-show-area {
    margin-top: -60px !important;
    height: auto;
}

For the result see: www.athoss.nl/2013/02/

The only thing left that I would like to change is to "force" Juicebox to use the extra space that's now available below the last row of thumbs for another row of thumbs. No matter how I resize the browser, the space is always there, it just isn't used. I assume this is because I adjusted things manually and Juicebox probably isn't aware of this space (like you wrote).
It's probably a long shot, but do you happen to know if there's any way to force it to add one row of thumbs?

  • Registered: 2014-10-05
  • Posts: 7

Re: Captions below thumbs

Quick update: it's already fixed. Turned out I left the Max Caption Height to high and that was eating up all the space. It's working fine now.

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

Re: Captions below thumbs

That's great!
Thank you for posting back to let me know (and for sharing your code which may help others).