• gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Topic: Gallery Title on main image pages for Small Screen Mode?

Title says it all.

In small screen mode, I'd like to be able to display the Gallery Title on all image pages.  Can this be done?

(NB, I have tried adding the title as the iptc image title, but this prevents the display of the iptc caption which I also need to display)

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

Re: Gallery Title on main image pages for Small Screen Mode?

Small Screen Mode is capable of displaying both the image title and image caption in the caption area.

(NB, I have tried adding the title as the iptc image title, but this prevents the display of the iptc caption which I also need to display)

Using an image title should not prevent the image caption from being displayed.
Please post the URL to your gallery so that I can take a look.

3 Reply by gfs (edited by gfs 2013-06-19 14:43:31)

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Gallery Title on main image pages for Small Screen Mode?

Steven,

I've only added a Title to the first image in the gallery (tomato).  I did this in the JBx Builder Pro software.  In the software itself, when I go to the Customize page, the IPTC Caption is replaced by the Title that I have added.  Same happens when viewed on the web.

(NB ... first image only for Title)
http://mobile.grantsymon.com/Jbx/Bayview-m/index.html

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

Re: Gallery Title on main image pages for Small Screen Mode?

Try increasing your gallery's maxCaptionHeight. It is currently set to 35 (the default value is 120) and this allows for only one line of text so if an image has both a title and a caption, only one is visible.

5 Reply by gfs (edited by gfs 2013-06-20 10:54:11)

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Gallery Title on main image pages for Small Screen Mode?

Thanks Steven. 70 is enough to get it to display both.

Is there any way of choosing the position of the Image Title?

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

Re: Gallery Title on main image pages for Small Screen Mode?

You can change the position of the caption area within the gallery using the captionPosition configuration option.

The image title will always be displayed above the image caption in the caption area.

You can change the horizontal alignment of both the image title and the image caption using the captionHAlign configuration option.

For reference, all the Caption Options can be found here.

You can change the horizontal alignment of the image title on its own using HTML formatting as documented in this FAQ:
How do I add HTML formatting to image captions and titles?
For example:

<title><![CDATA[<div style="text-align: right;">Title Text</div>]]></title>

You could also extract the image title for the currently displayed image using the Juicebox-Pro API (specifically the methods getimageIndex() and getImageInfo() in conjuction with the onImageChange() event) and display it elsewhere on your web page using JavaScript.
For example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Juicebox-Pro Gallery</title>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <style type="text/css">
            body {
                margin: 0px;
            }
            #text {
                width: 400px;
                height: 80px;
                background-color: #acc2e3;
            }
        </style>
    </head>
    <body>
        <!--START JUICEBOX EMBED-->
        <script src="jbcore/juicebox.js"></script>
        <script>
            jb = new juicebox({
                containerId: 'juicebox-container',
                galleryWidth: '400',
                galleryHeight: '400'
            });
            jb.onImageChange = function(e) {
                var index = jb.getImageIndex();
                var info = jb.getImageInfo(index);
                var title = info.title;
                document.getElementById("text").innerHTML = title;
            }
        </script>
        <div id="juicebox-container"></div>
        <div id="text"></div>
        <!--END JUICEBOX EMBED-->
    </body>
</html>
  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Gallery Title on main image pages for Small Screen Mode?

Thanks Steven.

The position and HAlign options make no difference for me in small screen mode.

I have no understanding of javascript and these galleries are not being embedded as I'm using them exclusively for iOS etc., which is why I want a title.  Really what I'm after is having the Gallery Title on all pages, not just the initial thumbs page.  Is there any way of doing this?

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

Re: Gallery Title on main image pages for Small Screen Mode?

There are no configuration options which would allow the Gallery Title to be displayed on main image pages in Small Screen Mode.
However, you could force your gallery to be displayed in Large Screen Mode on all devices and in all browsers (and position the Gallery Title as required using the galleryTitlePosition configuration option) by setting screenMode="LARGE".
For more information about Screen Modes, please see here.