CODEWITHSUNDEEP
jquery-isotope
experimenter
experimenter

Reputation: 778

Why does isotope js plugin push elements into 1 column?

I've got a 3 column grid layout with a few rows that span full 3 cols. And im loading images using the imagesLoaded plugin too. However, isotope pushes everything into 1 column and review of the source shows each item has left:0px.

Below is a snippet of my HTML, CSS and JS any clues on the issue?

HTML:

<div id="feature-work" class="clearfix">
                        <figure class="websites wide-feature"><a href="#">
                            <img src="http://html5doctor.com/wp-content/uploads/2010/03/macaque.jpg" alt="Monkey!" >
                            <figcaption>1. Macaque</figcaption>
                        </a></figure>

                        <figure class="websites tall-feature"><a href="#">
                            <img src="http://html5doctor.com/wp-content/uploads/2010/03/kookaburra.jpg" alt="Monkey!" >
                            <figcaption>2. Kookaburra</figcaption>
                        </a></figure>



CSS:

    #feature-work {
        margin:0 auto;
        width:960px;
    }

    #feature-work figure {

        position:relative;
        float:left;
        overflow:hidden;
        margin:10px;
        padding:0;
        width:298px;
        height:298px;
        border:1px solid #ccc;
    }

    #feature-work figure img {
        float:left;
        width:100%;
        height:218px;
        overflow:hidden;
    }

JS

$container = $('#feature-work');    

    $container.imagesLoaded( function(){


            $container.isotope({
                itemSelector : 'figure',
                layoutMode: 'masonry'

            });

});

Upvotes: 1

Views: 2026

Answers (1)

experimenter
experimenter

Reputation: 778

Maybe obvious to some, but if your first item is larger than your "default" size it messes with isotope's calculations so you need to explicitly set the layoutMode and columnWidth. And the next "gotcha" is it looks like columnWidth uses element outerWidth i.e. including margin!

$container = $('#feature-work'); $container.imagesLoaded( function(){

    $container.isotope({
        itemSelector : 'figure',
        layoutMode:'masonry',
        masonry:{
            columnWidth: 320
        }       
    });

});

Upvotes: 1

Related Questions