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

Topic: Show/hide thumbs

I raised this question a couple of years back, but couldn't get it working. Now it has become more significant for me on a new site.

I find that visitors to my site, never use the thumbs button.  I have to choose when building the sites, to either show thumbs at the start, or not show them and that is the way people see my site from then on.

I would like to hide thumbs, because the images look better on an uncluttered page, but I also want people to see the choice of images available for view.

On an old flash site, thumbs were displayed on gallery load and then auto-hid after 3 or 4 seconds and in this way, people understood where the thumbs were and how to activate.

Can anyone help me with how to achieve this effect or something with similar functionality?

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

Re: Show/hide thumbs

You could set showThumbsOnLoad="TRUE" and then use a JavaScript setTimeout() delay to hide the thumbnails (via the Juicebox-Pro API toggleThumbs() method).
For example:

<!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",
                showThumbsButton: "TRUE",
                showThumbsOnLoad: "TRUE"
            });
            var thumbs = true;
            jb.onInitComplete = function() {
                if (jb.getScreenMode() === "LARGE") {
                    setTimeout(function() {
                        if (thumbs) {
                            jb.toggleThumbs();
                        }
                    }, 3000);
                }
            };
            jb.onShowThumbs = function(showing) {
                thumbs = showing;
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

Using the code above, the thumbnails will toggle after 3 seconds (3000ms) but only in Large Screen Mode and only if the thumbnails are actually visible. If the user clicks the Thumbnail Button within the 3 second delay, the thumbnails will not be toggled (displayed) after the delay is over.

3 Reply by gfs (edited by gfs 2015-01-08 22:23:52)

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

Re: Show/hide thumbs

Thanks Steven.  That might do it.

Does it have to go anywhere special in the embed code?

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

Re: Show/hide thumbs

The code above is a complete gallery 'index.html' page.
If you want to see the example in action, just create a sample gallery with JuiceboxBuilder-Pro and replace the 'index.html' page created by JuiceboxBuilder-Pro with the code above.

To use this in one of your own galleries, just add the following code below your gallery's embedding code:

<script>
    var thumbs = true;
    jb.onInitComplete = function() {
        if (jb.getScreenMode() === "LARGE") {
            setTimeout(function() {
                if (thumbs) {
                    jb.toggleThumbs();
                }
            }, 3000);
        }
    };
    jb.onShowThumbs = function(showing) {
        thumbs = showing;
    };
</script>
  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Show/hide thumbs

Thanks Steven!

A last question ... is there any way to animate the show/hide by either slowly fading, or ideally, sliding thumbs out of view?  The on/off nature at the moment will, I think, confuse visitors.

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

Re: Show/hide thumbs

This has actually been logged as a bug and should hopefully by fixed in a future version. The thumbnails should ideally slide gracefully in and out of view rather than just appearing and disappearing when toggleThumbs() is fired (just like when the Thumbnail Button is clicked).

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

Re: Show/hide thumbs

Excellent.  Thanks Steven.

I'm also going to file a feature request on this, because I think it's a something that adds simplicity, elegance and functionality to the galleries.

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

Re: Show/hide thumbs

Steven,

knowing that sometimes updates can be months away, is there some code I could add to force the 'slide gracefully' effect in the mean time?

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

Re: Show/hide thumbs

Unfortunately not. The code which handles the toggleThumbs() method is in the 'juicebox.js' file which is packed and obfuscated and cannot be modified.

The only other option would be to determine (using a browser's developer tools) which container you would need to show and hide and then manually use custom JavaScript code (perhaps with a jQuery animation effect) to slide the thumbnails in and out as required. However, you would likely encounter pitfalls in doing so as Juicebox would not know what was happening behind the scenes. Juicebox might think the thumbnails are being displayed when they are actually hidden (which could cause problems when the Thumbnail Button is clicked) and the main image may not expand to fill the available space if you hide the thumbnail container manually. Things might get messy quite quickly.

Probably best to wait for the bugfix to be implemented.

10 Reply by gfs

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

Re: Show/hide thumbs

Steven,

I just tried this again, to see if the sudden transition is fixed in 1.4.3 (sadly not).

I hadn't tried before to use the script in my embed code, but now that I do, it doesn't work for me.  I added it, as you suggest, below the embed code. would you mind taking a look to see what's wrong?

http://www.grantsymon.com/thumbstest.html

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

Re: Show/hide thumbs

Unfortunately, the lack of animation when firing the toggleThumbs() API method has not been fixed for v1.4.3 but it has been logged as a bug and is due to be fixed in a future version (although I do not know exactly when).

I hadn't tried before to use the script in my embed code, but now that I do, it doesn't work for me.

You need to assign your 'juicebox' object a variable name so that it can be referenced when using the API methods and events.
In my example above (and in the code that you have placed in your web page), the 'juicebox' object has been given a name of 'jb'.
Therefore, in your gallery's embedding code, just change:

new juicebox({

... to:

var jb = new juicebox({

12 Reply by gfs

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

Re: Show/hide thumbs

Thanks Steven, that does the trick.