1 Topic by hugo (edited by hugo 2013-07-20 23:30:12)

  • hugo
  • Member
  • Offline
  • Registered: 2013-07-20
  • Posts: 2

Topic: Making Juicebox embed with a dynamic height

I'm trying to embed Juicebox galleries on my website, while keeping them as immersive as possible, and yet being able to keep them in line with the website's overall look and theme.

I thought a quick sketch would make what I'm wanting to do easier to understand:
See here.

So as you can see the idea is for the footer not to be visible, unless you scroll down, and for the Juicebox gallery to go from the bottom of the navigation bar (and it's margin), which is about 100px, to the bottom of the browser viewport, which is different for every user..

So far, I tried nesting the embed code, which I set to 100% for both height and width, inside another div for which I typed up the following jquery:

            function immersive() {
                var viewportHeight = parseInt($(window).height());
                var calculatedHeight = viewportHeight - 100 + "px";
                $('div.gallery-container').css('height', calculatedHeight);
            }
            $(document).ready(function() {
                immersive();
                $(window).bind('resize', immersive);
            });

The problem is, whenever I try to use this, I'm getting a height of 100% for the Juicebox...

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

Re: Making Juicebox embed with a dynamic height

Try the following as a gallery's 'index.html' file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        html, body {
            height: 100%;
            overflow-y: auto;
        }
        body {            
          margin: 0;
          padding: 0;
          background-color: #222222;
          color: #ffffff;
          font-family: sans-serif;
          font-size: 20px;        
        }
        #header {
          text-align: center;
          background-color: #333333;
          width: 100%;
          height: 20px;
          padding: 10px 0;
        }
        #footer {
          text-align: center;
          background-color: #333333;
          width: 100%;
          height: 20px;
          padding: 10px 0;
          position: relative;
          bottom: 0;
          left: 0;
        }
        #juicebox-content {
          width: 100%;
        }
    </style>
    <script type="text/javascript" src="jbcore/juicebox.js"></script>
    <script type="text/javascript">
    function doLayout() {
        var winHeight, headerHeight;
        winHeight = window.innerHeight ? window.innerHeight : $(window).height();
        headerHeight = $('#header').outerHeight();
        var galleryHeight = parseInt(winHeight) - parseInt(headerHeight);
        $('#juicebox-content').height(galleryHeight);
    }
    $(document).ready(function () {
        doLayout();
        $(window).bind('resize', doLayout);
        new juicebox({
            containerid : 'juicebox-container'
        });
    });
    </script>
    <title>Test</title>
</head>
<body>
    <div id="header">
        <span>Header</span>
    </div>
    <div id="juicebox-content">
        <div id="juicebox-container"></div>
    </div>
    <div id="footer">Footer</div>
</body>
</html>
  • hugo
  • Member
  • Offline
  • Registered: 2013-07-20
  • Posts: 2

Re: Making Juicebox embed with a dynamic height

Thanks! That worked like a charm!