CODEWITHSUNDEEP
javascriptjquery
EronarDiaras
EronarDiaras

Reputation: 87

imagesLoaded method doesn't work with JQuery masonry

When I load the page first: Not display any of the pictures. When I load the page second/third/etc...: All picture display.

What do I do wrong?

<br style="clear:left;">
<div style="padding-top:48px; padding-bottom:48px; background-color: #1D1626;">
    <div id="gallery-container" style="width:828px; margin-left:auto; margin-right:auto;">
        <div class="gallery-item">
            <a rel="prettyPhoto[gallery]" href="/gallery/example/56-teszt-1.jpg">
                <img src="/gallery/tgn/example/56-teszt-1.jpg" alt="" name="#capty-id-56" class="gallery-picture">
            </a>
            <div id="capty-id-56">Teszt1</div>
        </div>
        <div class="gallery-item row1">
            <a rel="prettyPhoto[gallery]" href="/gallery/example/55-teszt-2.jpg">
                <img src="/gallery/tgbs/example/55-teszt-2.jpg" alt="" name="#capty-id-55" class="gallery-picture">
            </a>
            <div id="capty-id-55">Teszt2</div>
        </div>
        <div class="gallery-item">
            <a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg">
                <img src="/gallery/tgn/example/54-teszt-3.jpg" alt="" name="#capty-id-54" class="gallery-picture">
            </a>
            <div id="capty-id-54">Teszt3</div>
        </div>
    </div>
</div>
<script>
    $(function() {
        var $container = $('#gallery-container');
        $container.imagesLoaded(function() {
            $container.masonry({
                itemSelector : '.gallery-item',
                columnWidth : 276
            });
        });
    });
</script>

http://masonry.desandro.com/demos/images.html#content

mansonry plugin

imagesloaded plugin

MyTest page: http://mansonry-imagesloaded-test.darkrpg.hu/

Upvotes: 0

Views: 1689

Answers (1)

Sendy
Sendy

Reputation: 170

working for me see on jsfiddle http://jsfiddle.net/zYqht/

   <div style="background-color:#ee6;">
    <div id="gallery-container">
        <div class="gallery-item">
            <a rel="prettyPhoto[gallery]" href="/gallery/example/56-teszt-1.jpg">
                <img src="http://lorempixel.com/226/188/?227" alt="" name="#capty-id-56" class="gallery-picture">
            </a>
            <div id="capty-id-56">Teszt1</div>
        </div>
        <div class="gallery-item row1">
            <a rel="prettyPhoto[gallery]" href="/gallery/example/55-teszt-2.jpg">
                <img src="http://lorempixel.com/400/188/?217" alt="" name="#capty-id-55" class="gallery-picture">
            </a>
            <div id="capty-id-55">Teszt2</div>
        </div>
        <div class="gallery-item">
            <a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg">
                <img src="http://lorempixel.com/226/188/?222" alt="" name="#capty-id-54" class="gallery-picture">
            </a>
            <div id="capty-id-54">Teszt3</div>
        </div>
        <div class="gallery-item">
            <a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg">
                <img src="http://lorempixel.com/226/100/?222" alt="" name="#capty-id-54" class="gallery-picture">
            </a>
            <div id="capty-id-54">Teszt3</div>
        </div>
        <div class="gallery-item">
            <a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg">
                <img src="http://lorempixel.com/123/188/?222" alt="" name="#capty-id-54" class="gallery-picture">
            </a>
            <div id="capty-id-54">Teszt3</div>
        </div>
        <div class="gallery-item">
            <a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg">
                <img src="http://lorempixel.com/226/321/?222" alt="" name="#capty-id-54" class="gallery-picture">
            </a>
            <div id="capty-id-54">Teszt3</div>
        </div>
        <div class="gallery-item">
            <a rel="prettyPhoto[gallery]" href="/gallery/example/54-teszt-3.jpg">
                <img src="http://lorempixel.com/226/188/?222" alt="" name="#capty-id-54" class="gallery-picture">
            </a>
            <div id="capty-id-54">Teszt3</div>
        </div>      
    </div>
</div>
<script>
    $(function() {
        var $container = $('#gallery-container');
        $container.imagesLoaded(function() {
            $container.masonry({
                itemSelector : '.gallery-item',
            });
        });
    });
</script>

Upvotes: 1

Related Questions