• Registered: 2013-07-31
  • Posts: 8

Topic: ...Move "Open in New Window" buton...

Hello,

I've imbedded my Juicebox Gallery in my Adobe Muse page. The Button Bar doesn't appear when it's set to "TOP". It appears on "OVERLAY" but I don't like the look.

I really just wanted the "Open in New Window" button. Can I move it somewhere else? Perhaps below or above the Thumbnails? ( I have the Thunbnails in 2 columns to the left of the Main Image)


Thank you,

Anthony

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

Re: ...Move "Open in New Window" buton...

The Button Bar doesn't appear when it's set to "TOP".

The Button Bar should certainly appear when buttonBarPosition="TOP". Make sure that the topAreaHeight (in JuiceboxBuilder-Pro's 'Cusrtomize -> General' section) is not too small for the Button Bar to be visible.
The Open Image button will always be part of the Button Bar and the Button Bar can be positioned only using the buttonBarPosition configuration option (OVERLAY, OVERLAY_IMAGE, TOP or NONE).

It sounds like setting buttonBarPosition="TOP" and buttonBarHAlign="LEFT" (to horizontally align the Button Bar to the left side of the gallery) might be suitable for your gallery's layout.

Alternatively, you could create your own HTML 'Open Image' button, position it on your web page alongside your gallery and have it act like the Juicebox 'Open Image' button by opening the main image in a new tab or window when it is clicked.
You would use the Juicebox-Pro API (specifically the getImageInfo() method) to determine the imageURL (or linkURL) of the currently displayed image and then use JavaScript to open the URL in a new tab or window.

If you would like to see how a custom 'Open Image' button would work, then create a sample gallery using JuiceboxBuilder-Pro and use the following code as the gallery's HTML index page.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="minimal-ui" />
        <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"
            });
            $(document).ready(function() {
                $('#open').click(function() {
                    var index = jb.getImageIndex();
                    var info = jb.getImageInfo(index);
                    var url = info.imageURL;
                    window.open(url);
                });
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="input">
            <input id="open" type="button" value="Open Image" />
        </div>
        <div id="juicebox-container"></div>
    </body>
</html>

If you continue to experience difficulties, please post the URL to your gallery's web page so that I can take a look and help further.

  • Registered: 2013-07-31
  • Posts: 8

Re: ...Move "Open in New Window" buton...

Steven, you rock! I'm going to try both of your suggestions this weekend.

Thank you, thank you!

Anthony