• Registered: 2015-05-06
  • Posts: 1

Topic: ImageClick opens FulscreenExpand

ImageClick opens FulscreenExpand

Hi Juicebox support,

Sorry in advance for my poor english :)

I have bought Juicebox Pro and I am very pleased with all its functionality. I have the gallery installed on a Drupal website with the Juicebox module for Drupal. See this link for the staging version of the site: http://gieldomen.com/staging/album/foto

I just keep looking for something in the settings but I cannot find this. I was wondering if and how it would be possible that when a user clicks on an image in the gallery this would trigger the fullscreen expand and not just open the image in a new tab.

What is the best way to accomplish this?

Thank you very much,
Pieter

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

Re: ImageClick opens FulscreenExpand

Unfortunately, Juicebox was not designed with such functionality in mind and trying to implement it (especially within a Drupal environment) would be quite difficult.

The only way I have been able to achieve this is as follows:

(1) Create a sample gallery with JuiceboxBuilder-Pro
(2) Set imageClickMode="OPEN_URL" (so that the corresponding linkURL is opened when the image is clicked)
(2) Set all your linkURLs (in the gallery's XML file) to linkURL="javascript: func();" (to run the JavaScript func() function in the gallery's index page when the image is clicked)
(3) Set all your linkTargets (also in the gallery's XML file) to linkTarget="_self"
(4) Use the following code as your gallery's 'index.html' file.

<!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",
                imageClickMode: "OPEN_URL",
                showExpandButton: "TRUE"
            });
            var fullscreen = false;
            jb.onExpand = function(expanded) {
                fullscreen = expanded;
            }
            function func() {
                if (!fullscreen) {
                    jb.toggleExpand();
                }
            }
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

This would be difficult to implement within Drupal (even more so when using the Juicebox module) and there may be problems that might need to be overcome. (This will not work in conjunction with a baseUrl and nothing happens when you click an image once the gallery has been expanded.)

If you decide to proceed further, I hope that my suggestion above points you in the right direction but I would recommend that you use the Expand Button only to expand the close the gallery.