1 Topic by k-s (edited by k-s 2017-09-30 02:32:29)

  • k-s
  • Member
  • Offline
  • Registered: 2017-09-29
  • Posts: 3

Topic: Responsiveness [SOLVED]

Hello

I want to know, if the lite or pro version can dynamically change the container height based on the current width. I need a responsive gallery that always has the same aspect ration.

In galleria you can set relative height, e.g. height: 0.75, and the gallery will be always at 4:3 ratio.

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

Re: Responsiveness [SOLVED]

A Juicebox gallery is embedded into a <div> and, ordinarily, a <div>'s height will not be dependent on (or change with) the browser window's width.
However, you could have a Juicebox gallery maintain a constant aspect ratio with some custom JavaScript.
As an example, create a sample gallery with JuiceboxBuilder-Lite (following the instructions in the Getting Started Guide) and use the following code as the gallery's 'index.html' page.

<!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;
            }
            #wrap {
                width: 100%;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var jb;
            function doLayout() {
                var windowWidth = parseInt(window.innerWidth ? window.innerWidth : $(window).width(), 10);
                var galleryWidth = parseInt(windowWidth * 0.8, 10);
                var galleryHeight = parseInt(galleryWidth / 2, 10);
                $('#wrap').width(galleryWidth);
                $('#wrap').height(galleryHeight);
                if (jb) {
                    jb.setGallerySize(galleryWidth, galleryHeight);
                }
            }
            $(document).ready(function() {
                $(window).resize(doLayout);
                jb = new juicebox({
                    containerId: "juicebox-container"
                });
                doLayout();
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="wrap">
            <div id="juicebox-container"></div>
        </div>
    </body>
</html>

The '0.8' value is just an arbitrary width for the gallery (80%) for this example. You can change this to whatever you like.
The aspect ratio for the gallery in the above example is 2:1, set by the '2' in the line:

var galleryHeight = parseInt(galleryWidth / 2, 10);

Again, you can change this to whatever you like.

This works equally well for both Juicebox-Lite (the free version) and Juicebox-Pro.
You can download Juicebox-Lite (and then install JuiceboxBuilder-Lite and try out the example above) from the Download Page.

I hope this points you in the right direction and that you are able to implement a suitable solution into your own web page.

  • k-s
  • Member
  • Offline
  • Registered: 2017-09-29
  • Posts: 3

Re: Responsiveness [SOLVED]

Thank you, Steven, it's really helpful.

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

Re: Responsiveness [SOLVED]

You're welcome!

5 Reply by k-s (edited by k-s 2017-09-29 23:34:20)

  • k-s
  • Member
  • Offline
  • Registered: 2017-09-29
  • Posts: 3

Re: Responsiveness [SOLVED]

For a Drupal Module

(function ($) {
  function doLayout() {
      var parentWidth = $('#jb').width();
      var galleryHeight = parseInt(parentWidth * 0.75);
      $('.juicebox-parent').height(parentWidth);
      $('.juicebox-parent').height(galleryHeight);
  }
  $(document).ready(function() {
    doLayout();
    $(window).resize(doLayout);
  });
})(jQuery);

#jb is a parent container, whose width is changing

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

Re: Responsiveness [SOLVED]

I'm glad that you've been able to adapt my example.
Thank you for sharing your own solution for Drupal.