Topic: Thumbnail positions

Hi,

I want to position my thumbnails to the side of my main image in a large browser (1200px) - but when the browser is under 700px,

I want the thumbnails to reposition themselves under the image. Is this possible?

Re: Thumbnail positions

This is not possible using just the available configuration options but it is possible with some custom JavaScript code and use of the Juicebox-Pro API.

You'd need to check the browser's width and set the thumbsPosition configuration option (and probably the maxThumbColumns and maxThumbRows configuration options, too) accordingly using JavaScript in the gallery's embedding code.

You'd then need to set up a listener to determine when the browser's width changes (for example if the user resizes the browser window) and then reload the gallery (putting the gallery's embedding code in a JavaScript function which you can call when required) with the appropriate thumbnail configuration options.

You'd also need to take note of the current image being displayed when the browser's width crosses the threshold value (using the Juicebox-Pro API getImageIndex() method) to ensure that the same image is displayed when the gallery is reloaded.

Here's an example which positions the thumbnails in a single row below the main image when the browser's width is less than 700px and in a grid to the left of the main image when the browser's width is greater than or equal to 700px.
Too see this example in action, just create a sample gallery with JuiceboxBuilder-Pro an use the HTML code below as the gallery's 'index.html' file.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var a;
            var b;
            var c;
            var d;
            var jb;
            var thresholdWidth = 700;
            var tracker = false;
            function loadGallery(a, b, c, d) {
                jb = new juicebox({
                    containerId: "juicebox-container",
                    firstImageIndex: a,
                    maxThumbColumns: b,
                    maxThumbRows: c,
                    thumbsPosition: d
                });
                tracker = true;
            }
            function thumbsStatus() {
                var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
                if (windowWidth < thresholdWidth && (d === 'LEFT' || tracker === false)) {
                    a = tracker === false ? '1' : jb.getImageIndex();
                    b = '10';
                    c = '1';
                    d = 'BOTTOM';
                    loadGallery(a, b, c, d);
                }
                if (windowWidth >= thresholdWidth && (d === 'BOTTOM' || tracker === false)) {
                    a = tracker === false ? '1' : jb.getImageIndex();
                    b = '3';
                    c = '3';
                    d = 'LEFT';
                    loadGallery(a, b, c, d);
                }
            }
            $(document).ready(function() {
                thumbsStatus();
                $(window).resize(thumbsStatus);
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

I hope this points you in the right direction and that you are able to integrate something similar within your own website.