• Registered: 2012-05-01
  • Posts: 94

Topic: Caption Position in Small Screen Mode

I want to control the caption position in Small Screen Mode. The Caption Position Settings in config.xml are only valid in Large Screen Mode.

I do use embedded galleries and all my pictures don't have the same vertical and horizontal size because of different type of camera or landscape/portret orientation of my pictures.

Because you have to set a fixed width and height of the gallery div the caption in pictures are ugly in Small Screen Mode when the pictures are smaller then the div width. For example see https://europe.delosgaia.nl/visit_to_no … sund.htm#2 with a mobile phone and click through the gallery.

What I am looking for is a way to make the caption width in Small Screen Mode equal to the picture width and not equal to the div width. In Large Screen Mode this is possible with Caption Position in Overlay_Image

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

Re: Caption Position in Small Screen Mode

Unfortunately, there's no easy way to achieve this.

As you are aware, captionPosition is supported only by Large Screen Mode (noted in the description on the Config Options page).
In Small Screen Mode, captionPosition is always set to OVERLAY, the intention being to give captions as much space as possible on small screen devices.

Juicebox was not designed with this in mind and it would probably be very difficult to try to achieve it manually.
You might need to use the Juicebox-Pro API to run some custom JavaScript code each time a new image is displayed (using the onImageChange() method). The custom JavaScript code might check the current width of the image being displayed and then use CSS to set the width of the caption area (using Juicebox internal classes and ids).
Even having done this, you'd then need to ensure that this procedure is also carried out if the browser window is resized or the mobile device's orientation is changed.
Also, being that Juicebox would not be aware of such a modification, it might interfere with Juicebox's own caption transitions and it end up not looking very clean or smooth.

It's really not feasible and is fraught with potential pitfalls. The best I can suggest is that you post your idea in the Feature Requests forum thread. I do not know the likelihood of suggestions being implemented but that is certainly the best place for all ideas as they will not be overlooked by the developers there.

Because you have to set a fixed width and height of the gallery div...

Incidentally, a gallery's width and height can be specified as percentages (rather than fixed pixel values).
If doing so, you'll need to make sure that the gallery's parent containers all have dimensions set via CSS so that Juicebox knows what actual size the gallery should be (what the gallery's dimensions should be percentages of).

The only way to have captionPosition="OVERLAY_IMAGE" is to use Large Screen Mode.
You might like to try setting screenMode="LARGE" (in JuiceboxBuilder-Pro's 'Customize -> General' section) to always have your gallery displayed in Large Screen Mode. I can't be sure but this might be a suitable compromise for your gallery as it seems to be more like a banner/header than a 'regular' gallery with thumbnails.