how to use masonry bindResize with bootstrap?

Question

I am working on a photo gallery template, using zenphoto, bootstrap and masonry. Masonry works well on the first load, but doesn't reload on page resize. I suppose I have to use masonry bindResize() method but how should I use it with bootstrap ?

there is the genrated html code, and you can see it in action here : http://test.vincentbourganel.fr/pages/portfolio

thanks in advance for your help.

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="post clearfix">
                <p>Voici une sélection de photos de ma <a title="galerie" href="/page/gallery">galerie</a>.</p>

                <script type="text/javascript" src="/themes/zpBootstrap/js/jquery.masonry.min.js"></script>
                <div id="portfolio-wrap" style="margin: 0; padding: 0;">
                    <ul id="portfolio" class="list-inline"  style="margin: 0; padding: 0;">
                        <li class="portfolio-item" style="margin: 10px;">
                            <a class="colorbox" href="/albums/evenements-familiaux/20140824-randonnee-familiale-vercors/_mg_2141.jpg" title="Le Grand Veymont">
                                <img src="/cache/evenements-familiaux/20140824-randonnee-familiale-vercors/_mg_2141_h150_thumb.jpg" alt="Le Grand Veymont" class="ombre" height="150" />
                            </a>
                        </li>
                        <li class="portfolio-item" style="margin: 10px;">
                            <a class="colorbox" href="/albums/20101111-voyage-marseille/img_4458.jpg" title="Calanque d'En-Vau I">
                                <img src="/cache/20101111-voyage-marseille/img_4458_h150_thumb.jpg" alt="Calanque d&#039;En-Vau I" class="ombre" height="150" />
                            </a>
                        </li>
                        <li class="portfolio-item" style="margin: 10px;">
                            <a class="colorbox" href="/albums/groupe-photo-ecully/portraits_urbains/_mg_3158.jpg" title="_mg_3158">
                                <img src="/cache/groupe-photo-ecully/portraits_urbains/_mg_3158_w150_thumb.jpg" alt="_mg_3158" class="ombre" width="150" />
                            </a>
                        </li>
                        <li class="portfolio-item" style="margin: 10px;">
                            <a class="colorbox" href="/albums/20100723-voyage-irlande/img_3779.jpg" title="Mizen Head">
                                <img src="/cache/20100723-voyage-irlande/img_3779_h150_thumb.jpg" alt="Mizen Head" class="ombre" height="150" />
                            </a>
                        </li>
                        [...there is a lot of other pictures...]
                    </ul>
                </div>

                <script type="text/javascript">
                $(function(){
                    var $container = $('#portfolio-wrap');

                    $container.imagesLoaded(function(){
                        $container.masonry({
                            itemSelector : '.portfolio-item',
                            columnWidth: 5
                        });
                    });
                });
                </script>
            </div>
        </div>
    </div>
</div> <!-- /.container -->

Answer 1

First you are getting errors because you are using "isResizeBound" in Masonry v2 and it is for masonry v3. If you want to continue using the older Masonry version, you need to change it to "isResizable". See below. Otherwise upgrade to v3 (you will also need to load imagesloaded.js separately since it is no longer part of masonry in v3)

  $(function(){
     var $container = $('#portfolio-wrap');

     $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector : '.portfolio-item',
            isResizable: false,
            columnWidth: 5
        });
      });
    });