Multiple grids misbehaviour

[frostoni]

Hi
(this is in reference to issue #57 )

The gridly for the vertical section doesn't work when the second grid is called; what happens is that the first gridly (vertical) doesn't snap to the desired sections when dragged. Instead they move pixel by pixel.

The other grid works fine. Both gridlys are instanciated separately, with different classes.

    function setUpGridly(){
        $(".gridlya.vertical").gridly({
            base: 600, // px
            gutter: 20, // px
            columns: 3
        });
        $(".gridly.itemsgrid").gridly({
            base: 60, // px
            gutter: 20, // px
            columns: 9
        });
    }

The divs are built this way:

<div class="gridlya vertical">
    <?php
        for($i=0; $i<$numMainItems; $i++){
        $basic = retrieve_big_data('#'.$i);
        echo "
           <div class='brick large'>
                {$basic->{'imagelink'}}
                {$basic->{'html'}}
           </div>
        ";
    }
    ?>
</div>

Where retrieve_big_data is an ajax call returning an image link which is like this:

<img src="http://placehold.it/300?text='number_of_image_in_loop_as_text" />

and the resulting div block, which is like this:

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla</div>

Any advice or any more details you want to know? Really appreciate any details or ideas you have..