• Registered: 2014-04-21
  • Posts: 28

Topic: The Open Image button on the button bar.

This button opens a new browser window showing the image full-size. Two things:

1) Can the image caption be displayed?
2) Can the page title, as displayed in the browser tab, be something other than the file name?

Thanks

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

Re: The Open Image button on the button bar.

The short answer to both your queries is 'No'.
When clicking the Open Image button, Juicebox simply opens the image directly in a new browser tab.
This is the crux of the matter: it is just the image that is opened, not a web page containing the image.
There are no HTML tags into which a caption could be placed and, therefore, no <title> tag into which a custom browser tab title could be placed.
(This is why the image filename is used as the browser tab title. The image is the only element in the browser tab and the only thing that the browser can use for any content.)

The more elaborate answer to both your queries is 'Yes, but not easily'.
As you may have gathered from my answer above, you'd need to override the default handling of the Open Image button and use custom code to build a simple web page which will display the image and its caption (and allow a custom browser tab title to be used).

Here's an example of a possible solution.
To see this in action, create a sample gallery with JuiceboxBuilder-Pro and use the code below as the gallery's 'index.html' file.
This example first overrides the default handling of the Open Image. It then uses the Juicebox-Pro API to fetch the current image's caption, title and URL and then uses this information to build a basic web pageto be displayed when the Open Image button is clicked.
The image title is used for the browser tab title, the image is displayed (at its actual size) and the caption is displayed (in unstyled text) below the image. This is just a basic web page which you can use as a starting point and expand upon if you like.

<!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",
                showOpenButton: "TRUE"
            });
            jb.onInitComplete = function() {
                $('.jb-bb-btn-open-url').empty();
                $('.jb-bb-btn-open-url').off('click');
                $('.jb-bb-btn-open-url').on('click', function() {
                    var index = jb.getImageIndex();
                    var info = jb.getImageInfo(index);
                    var caption = info.caption;
                    var title = info.title;
                    var url = info.imageURL;
                    var win = window.open('', '_blank');
                    win.document.write('<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>' + title + '</title></head><body><img src="' + url + '"><p>' + caption + '</p></body></html>');
                    win.document.close();
                });
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

As Juicebox was not designed with this in mind, it's not perfect. For example, it won't work from an expanded gallery.
However, I hope it helps somewhat and maybe points you in the right direction.