Topic: Wordpress Thumbnails + Responsiveness

I was wondering if there was a way to make the thumbnails sit to the left/right of the main image if the browser is open to X amount of pixels and then when it's smaller (certain sizes and below) move below the image?

Currently if the browser is too 'thin' the main image shrinks and is unviewable.

Re: Wordpress Thumbnails + Responsiveness

It would not be possible to implement a solution within WP-Juicebox (without re-writing the plugin) but you could do the following with a standalone gallery.

(1) Listen for a change in the user's browser window size using JavaScript.
(2) Determine the new width of the user's browser window.
(3) If a specified width threshold has been crossed, then reload the gallery setting the new configuration options in the embedding code.

For example, 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="apple-mobile-web-app-capable" content="yes" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var a = '3', b = '3', c = 'LEFT', thresholdWidth = 600;
            function loadGallery(a, b, c) {
                new juicebox({
                    containerId: 'juicebox-container',
                    maxThumbColumns: a,
                    maxThumbRows: b,
                    thumbsPosition: c
                });
            }
            function thumbsStatus() {
                var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
                if (windowWidth < thresholdWidth && c === 'LEFT' ) {
                    a = '10';
                    b = '1';
                    c = 'BOTTOM';
                    loadGallery(a, b, c);
                }
                if (windowWidth >= thresholdWidth && c === 'BOTTOM') {
                    a = '3';
                    b = '3';
                    c = 'LEFT';
                    loadGallery(a, b, c);
                }
            }
            $(document).ready(function() {
                thumbsStatus();
                $(window).on('resize', thumbsStatus);
                loadGallery(a, b, c);
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>