1

I have a page with the image linked to modal popup (Magnific Popup) and this part is working fine. I put flex-grid.html layout inside of modal element from here: http://github.com/kombai/freewall/tree/master/example

Here is the part of code from my page:

<!-- Modal Popup
 --------------------------------------------------------------- -->

<div id="modal-01" class="popup-modal mfp-hide">
  <div class="link-box"><a class="popup-modal-dismiss"><i class="fa fa-times"></i></a></div>
  <div id="freewall" class="free-wall"></div>
  <script type="text/javascript">

        var temp = "<div class='brick' style='width:{width}px;'><img src='wall/images/photo/{index}.jpg' width='100%'></div>";
        var w = 1, h = 1, html = '', limitItem = 49;
        for (var i = 0; i < limitItem; ++i) {
            w = 1 + 3 * Math.random() << 0;
            html += temp.replace(/\{width\}/g, w*150).replace("{index}", i + 1);
        }
        $("#freewall").html(html);

        var wall = new freewall("#freewall");
        wall.reset({
            selector: '.brick',
            animate: true,
            cellW: 200,
            cellH: 'auto',
            onResize: function() {
                wall.fitWidth();
            }
        });

        var images = wall.container.find('.brick');
        images.find('img').load(function() {
            wall.fitWidth();
        });

    </script> 
</div>
<!-- modal-01 End -->

Unfortunately, when I click image I can see only empty modal popup box:

image 1

But If I move/resize browser window, all content inside of modal window is appearing successfully: image 2

I'm pretty sure the problem is with some adjustment of the Freewall flex-grid layout element, but I can't find which one. Actually the "fit-zone.html" layout from the Freewall examples list is working absolutely fine with modal popup, but I prefer flex-grid.html.

JasonMArcher
  • 14,195
  • 22
  • 56
  • 52
Alexandra
  • 11
  • 2
  • will need to do reset after modal is opened so there are dimensions to work form. Hidden elements have no dimensions. Use events of API for whatever modal plugin you are using to set it up – charlietfl Mar 04 '15 at 15:47

0 Answers0