Odd result when attached to element other than body

Question

Odd result when attached to element other than body

Opened this issue 9 years ago · 0 comments

It seems I can only get this to work when I apply it to body. If I try to contain the gallery inside a div, oddly enough the first 4 images expand to the width of the screen and the last 4 expand to about 50%. They are all stacked vertically.

Sounds like the same issue reported here:
http://www.reddit.com/r/webdev/comments/1kyt2r/perfectly_balanced_photo_galleries_a_jquery_plugin/cbuf99h

My code:

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title></title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

      <style type="text/css"></style>
      <script src="jquery.min.js"></script>
      <script src="jquery.balanced-gallery.min.js"></script>
      <script type="text/javascript">
        $(window).load(function() {
           $('#gallery').BalancedGallery({ background: '#DDD' });
        });                    
      </script>
   </head>
  <body>

    <div id="gallery">
      <img src="1.png">
      <img src="2.png">
      <img src="3.png">
      <img src="4.png">
      <img src="5.jpg">
      <img src="6.png">
      <img src="7.png">
      <img src="8.png">
    </div>

  </body>
</html>

I've tried adding height:100% and various other styles to the element, to no avail. Any suggestions?