1 Topic by pippo (edited by pippo 2014-03-13 10:56:59)

  • Registered: 2014-03-13
  • Posts: 1

Topic: caption box under image

Hi,
thanks for your fabulous photo gallery module.

I'm using the Juicebox Lite embedded in a Drupal website (using Drupal Juicebox module).
No Juicebox .css was edited.
Drupal theme in the website is one of the responsive themes commonly used.

I noticed that (sometimes) the caption is shown under the image, and not at the bottom of the image.
More the screen is higher, more the caption is shown far from the main image.

More I reduce page size, more the caption is correctly going closer to the image bottom and then the caption position remains OK.

Any idea about to fix this?

caption KO example:
http://i58.tinypic.com/2i6m353.png

caption OK example:
http://i62.tinypic.com/dzyrnq.png

Thanks in advance for your support,
f.

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

Re: caption box under image

With Juicebox-Lite, the captionPosition is always set to OVERLAY and you will notice that the caption area is always immediately above the thumbnails (at the bottom of the overlay).
What you are noticing is the scaling of the image within the gallery's image area.
Depending on the size and shape of the gallery (which in your case is dependent on the user's browser window), the main image may or may not be scaled so that the bottom of the main image is close to the bottom of the image area.
For example, a landscape image in a portrait-shaped gallery will have space at its top and bottom (resulting in the caption area not overlapping the image).

Make sure that your images are larger than the size at which they will are likely to be displayed in your gallery.
This will ensure that there is not space surrounding all edges of the images in the gallery. (In Juicebox-Lite, large image are scaled down but small images are not scaled up.)

There are certain other things you could do but they would all require Juicebox-Pro.
(1) Set imageScaleMode="FILL" to ensure that the image always fills the image area. (Please note that images will be cropped if their aspect ratio does not match that of the gallery's image area.)
(2) Set captionPosition="OVERLAY_IMAGE" to ensure that the caption area is always overlaid at the bottom of the main images.
(3) Set captionPosition="BELOW_IMAGE" to ensure that the caption area is always displayed below the main images.