• pac
  • Member
  • Offline
  • Registered: 2015-08-26
  • Posts: 1

Topic: Hide close button or change it's URL

I like that you can control the back button.  Is there any way to change the close button so when they hit close they can be redirected to a different page (like the backbutton)?  if not is it possible to hide just the "close" button?

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

Re: Hide close button or change it's URL

If it not possible to change the functionality of the Close Button but you could use the Juicebox-Pro API to run some custom JavaScript (to do whatever you like, such as open a new tab with a specific URL using window.open()) when the gallery is closed.
Listen for the onExpand(expanded) event to be fired (which happens when the gallery is expanded and closed) and run your JavaScript code only when the gallery is closed.
For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <meta charset="utf-8" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    var jb = new juicebox({
        containerId: 'juicebox-container',
        galleryHeight: '600',
        galleryWidth: '800'
    });
    jb.onExpand = function(expanded) {
        if (!expanded) {
            window.open('http://www.juicebox.net/', '_self');
        }
    };
    </script>
    <div id="juicebox-container"></div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

This would be much easier to do (as above) than trying to hide the Close Button which would involve hiding the Expand/Close Button only in fullscreen mode using CSS on internal Juicebox classes. There would also be the added complication that Juicebox would expect the Close Button to be there which may affect Button Bar sizing and spacing.