• Registered: 2014-10-05
  • Posts: 7

Topic: Thumbs as links [SOLVED]

Hi,

Up to now I've been using SimpleViewer and I'm switching to Juicebox.
I've used SimpleViewer in two ways:
- Several individual galleries
- One adjusted gallery that works as a menu from which you can open the individual galleries

You can see the result on www.athoss.nl

In the "menu" gallery the thumbs are the menu items and as soon as you hover over a thumb the main image changes.
You can open an individual gallery by clicking on one of the thumbs.

I've been able to recreate this in Juicebox, except for the clicking on a thumb to open a gallery part.  In Juicebox you first have to hover over the link and then click on the main image. Is there a way in which you can open a link by clicking on a thumb?

Any advice would be much appreciated.

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

Re: Thumbs as links [SOLVED]

Juicebox was not designed with this in mind (the ability to run some custom JavaScript code or to redirect to a new URL on clicking a thumbnail).

If it is possible to find a CSS selector (a class or id) for the thumbnails within Juicebox which you could attach a jQuery click handler to, then you could perhaps run some JavaScript code using the Juicebox-Pro API to get the index of the image currently being displayed when the element is clicked (and then act on the image index accordingly).

The code might look something like this:

<script>
    var jb = new juicebox({
        backgroundColor: '#222222',
        changeImageOnHover: 'TRUE',
        containerId: 'juicebox-container',
        galleryHeight: '400',
        galleryWidth: '600'
    });
    jb.onInitComplete = function() {
        $('CSS_SELECTOR').click(function() {
            var currentImage = jb.getImageIndex();
            switch (currentImage) {
                case 1:
                    window.location.href = 'http://www.example.com/';
                    break;
                case 2:
                    window.location.href = 'http://www.google.com/';
                    break;
                default:
                    window.location.href = 'http://www.juicebox.net/';
                    break;
            }
        });
    };
</script>
<div id="juicebox-container"></div>

Unfortunately, I have not yet found a CSS selector which works. This may be due to Juicebox having its own click hander on the thumbnails so it may not be possible but it might be worth investigating further. I hope this at least points you in the right direction.

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

Re: Thumbs as links [SOLVED]

On further investigation, the problem was not in finding a suitable CSS selector to attach the click handler to (the correct class is .jb-idx-thumb) but the fact that the class does not exist in the Document Object Model immediately after the Juicebox-Pro API event onInitCompete is fired (when the gallery should be complete and ready). The trick is to delay the setting up of the click handler (until such time as the .jb-idx-thumb class exists in the DOM) by using setTimeout.
Try the following which will open the current image's corresponding linkURL when either a thumbnail or main image is clicked.

<script>
    var jb = new juicebox({
        changeImageOnHover: 'TRUE',
        containerId: 'juicebox-container',
        imageClickMode: 'OPEN_URL'
    });
    jb.onInitComplete = function() {
        setTimeout(function() {
            $('.jb-idx-thumb').click(function() {
                var index = jb.getImageIndex();
                var info = jb.getImageInfo(index);
                var url = info.linkURL;
                window.location.href = url;
            });
        }, 500);
    };
</script>
<div id="juicebox-container"></div>

I have logged a bug report with the developers (regarding the fact that the gallery is not complete and ready immediately after onInitComplete is fired) and it should hopefully be fixed in a future version but the code above should work fine in the meantime.

  • Registered: 2014-10-05
  • Posts: 7

Re: Thumbs as links [SOLVED]

Thanks for the fast (and thorough) reply, this is exactly what I was looking for.