1

So, I'm testing this awesome jquery plugin called freewall.js. It seems to work absolutely fine, however, only after resizing the page.

On first load, the blocks appear too close to each other in a really messed up fashion. A little resize on the page and voilá! it's perfect.

This is the code i'm using (provided by the example file, which seems to work just fine on their server):

<script type="text/javascript">
        var temp = "<div class='brick' style='width:{width}px;'><img src='{index}.gif' width='100%'></div>";
        var w = 1, h = 1, html = '', limitItem = 10;
        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,
            gutterY: 15,
            gutterX: 15,
            cellW: 150,
            cellH: 'auto',
            onResize: function() {
                wall.fitWidth();
                }
        });



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

Here's the css style:

        <style type="text/css">
        body {
            background-color: #557f9d;
            font-size: 13pt;
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 15pt;
            font-weight: 300 !important;
            color: #fff;
            letter-spacing: -0.025em;
            line-height: 1.75em;
        }

        .free-wall {
            margin: 0px;
        }
        .brick img {
            margin: 0;
            display: block;
        }
    </style>

And here's the page in question:

Example page

Thanks in advance!

Joe R.
  • 13
  • 2
  • Nous avons les chats : We have the cats ? (title) Have you tried on document ready : Document.resize() ? – Alexandre Jun 28 '16 at 14:46
  • Yep, we have the cats. It's a joke title for a test page. Anyways, correct me if i'm wrong, 'cause i'm a noob. But as I get it, the Document.resize() would simply resize the window? I feel it would be kind of intrusive. Personally, I hate when a website messes with my browser or something like that. – Joe R. Jun 28 '16 at 14:57
  • Calling the resize on the document will simply trigger the code that is written when a resize happens. In your case, would solve the whole thing. – Alexandre Jun 28 '16 at 15:48
  • Oh and the remark on your title is because I'm french I was wondering haha – Alexandre Jun 28 '16 at 15:55

1 Answers1

2

Try this :

$(document).ready(function() {
   $(document).resize();
});

EDIT: The code is simple, once the document is ready, it triggers the code that is bound to the resize handler, in your case the whole wall thingy is tied to it. So the first thing that the javascript do once everything is up and running is call the code and the plugin does its wonder in the back. Glad I could help.

Alexandre
  • 343
  • 2
  • 12