CODEWITHSUNDEEP
jqueryheightgrid-layoutmagnific-popupfreewalljs
Alexandra
Alexandra

Reputation: 11

Trying to put Freewall grid layout into popup modal window

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.

Upvotes: 1

Views: 537

Answers (0)

Related Questions