• Registered: 2014-03-29
  • Posts: 2

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.

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

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>