You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → Longer caption options [SOLVED]
Hi - I'm trying to use this to post photos with longer captions. Our preference is to not overlay, and so increasing the size of the caption area is necessary, making the photos smaller of course. Still, there are times that the text is cut off - is there any way to set the overflow of the caption div to accept scrollbars?
Thanks - Jonathan
For a vertically-scrolling caption area, try adding the following CSS to the end of your gallery's 'jbcore/classic/theme.css' file (or to the <head> section of your gallery's web page within <style> ... </style> tags).
.jb-caption {
overflow: auto !important;
}Otherwise, you could use the Juicebox-Pro API (specifically the getImageInfo() method) to fetch the currently-displayed image's title and caption and then use JavaScript to display the text elsewhere on your gallery's web page (outside the gallery).
Here's a basic example which displays the image title and caption in a container below the gallery.
To see the example in action, create a sample gallery in JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb = new juicebox({
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600"
});
jb.onImageChange = function(e) {
var index = e.id;
var info = jb.getImageInfo(index);
var title = info.title;
var caption = info.caption;
$('#text').html('<p>' + title + '</p><p>' + caption + '</p>');
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
<div id="text"></div>
</body>
</html>I hope these suggestions help and point you in the right direction.
Thanks Steven - I've tried the overflow auto option in the CSS file, but haven't tried it in the head yet. I saw your response about the JS caption outside the gallery in another and that seems like a long-term solution right now. I'll see what I can do with the overflow property.
Actually, that worked great! I was trying to add the auto overflow to the wrong element, so this worked very well. Is there a reason that the mobile view might not work as well? Some of the slides scroll the caption, others don't. Maybe clearing the cache will work, but is there a mobile setting that might be interfering with the scroll?
Thanks - Jonathan
The reason why the caption area does not scroll when the gallery is viewed on mobile devices may be due to the fact that when the gallery is displayed in Small Screen Mode, the caption area is always overlaid on top the image.
There are already touch gestures associated with the gallery (tapping to toggle captions on and off and swiping to navigate between images) so these might somehow be interfering with the scrolling action.
Also, there may be issues with stacking (making sure that the caption area is stacked on top of all gallery elements, including navigation hit areas, so that the container is scrollable).
Unfortunately, I've not found a solution which works on mobile devices (I've tried a lot of CSS on a lot of different classes without success) and I expect that it might be quite difficult to implement (which might be why Juicebox-Pro was not designed with a scrollable caption area).
The only thing I can suggest is more of a workaround.
If your text is only just being truncated by a small amount, then you might like to consider reducing the font size of your image titles and/or captions so that more text fits into the caption area.
There are no configuration options available within JuiceboxBuilder-Pro to change the font size of image titles and captions but you can style individual image titles and captions (for example, to change the font size) using HTML formatting as noted in this FAQ:
How do I add HTML formatting to image captions and titles?
A sample caption with a font size of 12px (for example) would look like this:
<span style="font-size: 12px;">Image caption text goes here.</span>In the gallery's XML configuration file, the caption would look like this:
<caption><![CDATA[<span style="font-size: 12px;">Image caption text goes here.</span>]]></caption>... but JuiceboxBuilder-Pro will automatically add the <caption> and CDATA tags so you only need to enter the <span> tag (as above) into JuiceboxBuilder-Pro.
(You can do likewise for image titles.)
Otherwise, you can set the size of all image titles and/or captions at once using CSS such as the following (changing the numeric values as appropriate):
/* IMAGE TITLE */
.jb-caption .jb-caption-title {
font-size: 20px !important;
}
/* IMAGE CAPTION */
.jb-caption .jb-caption-desc {
font-size: 18px !important;
}
/* IMAGE NUMBER */
.jb-cap-frame .jbac-number {
font-size: 12px !important;
}As with my previous CSS suggestion, you can add this CSS to the end of your gallery's 'jbcore/classic/theme.css' file or wrap it in <style> ... </style> tags and add it to your gallery web page's <head> section.
I realise that this does not directly resolve your problem but I hope that it is a suitable compromise.
Thanks Steven - I'll give that a shot. I'm using the <h2> tag for the titles, and some are flowing to 2 lines, so I'll try reducing that and see if it helps. Thank you for the tips!
Just for interest, the captions that have <ul> or <img> elements scroll just fine in mobile, those that don't. don't. I'll take some time to add some lists to the other captions and see if that changes anything.
Thank you for the additional information.
There was a bug in older versions of Juicebox-Pro (fixed in Juicebox-Pro v1.4.0) whereby links in image titles and captions were not clickable).
It's just a hunch but this could be connected to the scrolling issue. It seems that image titles and caption might actually require a link in them for the caption area to be scrollable.
Whatever Juicebox-Pro does behind the scenes when a link is detected within an image title or caption might also need to be done to allow the caption area to become scrollable and the easiest way to achieve this for an image title or caption which does not already contain a link is simply to add one (e.g. a blank one such as <a href="#"></a>).
Adding an empty HTML <a> tag to an image title or caption is certainly something worth trying.
You'll still need to use the following CSS as well, though:
.jb-caption {
overflow: auto !important;
}You're absolutely right - I assumed that the common theme among the captions that scrolled was because of the lists, but it was the link that did it. It just so happens I have something to link to each of them. I did add that css content earlier, and it worked perfectly. I think we can marked this as solved! Thank you. Jonathan
If you'd like to see the project, it's at https://jsmacollection.uoregon.edu/gall … index.html
I'm glad that adding the empty <a> tag seems to have worked. Thank you for letting me know.
Thanks, also, for the link to your website. I see now why you wanted a scrolling caption area!
Having seen your web page (and knowing that you have no content other than the gallery itself on the page), another possible workaround occurred to me.
You could perhaps have increased the maxCaptionHeight (to accommodate the largest of your captions) and then set the galleryHeight to be a (large) fixed pixel value (instead of 100%). You'd then have had a scrolling web page instead of a scrolling caption area. The gallery would not dynamically resize to fit within the browser window but it would allow images to be displayed larger.
Of course, you might prefer things as they are (and I quite like things as they are myself).
I just thought I'd mention it in case it's something that you hadn't considered.
In any case, I'll mark this thread as [SOLVED] as requested.
Juicebox Support Forum → Juicebox-Pro Support → Longer caption options [SOLVED]
Powered by PunBB, supported by Informer Technologies, Inc.