• hdr
  • Member
  • Offline
  • Registered: 2016-03-02
  • Posts: 1

Topic: Changing thumbnails position

I am creating a responsive site and gallery and I would like that the thumbnails change from being to the left to the bottom on screens under 600px.

This is my sample:

http://www.tenney.biz/10elabs/hdr4you/g … ery.html#1

How can achieve that?

Best regards,

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

Re: Changing thumbnails position

Juicebox-Pro does not have any built-in configuration options that you could use to do this but you could try something like the following.
This possible solution checks the width of the web page and then sets appropriate configuration options before loading the gallery. The code also listens for a change in the window width and if the threshold width value is crossed, the gallery will be redrawn with new values.
To see this in action, create a sample gallery with JuiceboxBuilder-Pro and replace the gallery's 'index.html' page with the following code:

<!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, b, c, thresholdWidth = 600, z = false;
           function loadGallery(a, b, c) {
                new juicebox({
                    containerId: "juicebox-container",
                    maxThumbColumns: a,
                    maxThumbRows: b,
                    thumbsPosition: c
                });
                z = true;
            }
            function thumbsStatus() {
                var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
                if (windowWidth < thresholdWidth && (c === 'LEFT' || z === false)) {
                    a = '10';
                    b = '1';
                    c = 'BOTTOM';
                    loadGallery(a, b, c);
                }
                if (windowWidth >= thresholdWidth && (c === 'BOTTOM' || z === false)) {
                    a = '1';
                    b = '5';
                    c = 'LEFT';
                    loadGallery(a, b, c);
                }
            }
            $(document).ready(function() {
                thumbsStatus();
                $(window).resize(thumbsStatus);
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

I hope this helps.