Help with Jquery/Masonry, minor tweak

Question

For the life of me, I can;t figure out what the heck is going on. My lack of Jquery knowledge might have something to do with it...

Take a look at this: http://jsfiddle.net/ryanjay/fgNMJ/

When the page loads, there is major gaps, height-wise, in between each photograph. When you click a photo, and it expands, the photos on the bottom fall back into place. When the photo is clicked again to collapse it, the photos fall into place as they should when the page is loaded. Make sense?

Why is there a gap between the photos, height-wise, when the page is loaded? I am assuming it has something to do with (.box img).css() code I have going on... But I just can't figure it out.

Here is the code as well.

Jquery:

$(document).ready(function(){

    $('#grid').masonry({
        singleMode: false,
        itemSelector: '.box',
        resizeable: true,
        animate: true
    });

    $('.box img').css({
        width: '100%',
        height: 'auto'
    });

            $('.box').click(function(){
        if ($(this).is('.expanded')){
            restoreBoxes();
        } else {
            $(this)
                // save original box size
                .data('size', [ $(this).width(), $(this).height() ])
                .animate({
                    width: 400
                }, function(){
                    $('#grid').masonry();
                });
            restoreBoxes();
            $(this).addClass('expanded');
        }

        function restoreBoxes(){
            var len = $('.expanded').length - 1;
            $('.expanded').each(function(i){
                var w = $(this).data('width');
                $(this).animate({
                    width: ( w || '200' )
                }, function(){
                    if (i >= len) {
                        $('#grid').masonry();
                    }
                })
                    .removeClass('expanded');
            });
                }
                });
        });

CSS:

.wrap {
    border: 0;
    width: 100%;
}
.box {
    float: left;
    font-size: 11px;
    width: 200px;
    margin: 0px;
    padding: 0px;
    display: inline;
}

Kyle · Accepted Answer · 2011-03-08T23:44:41.787

2

I think I fixed it.

EDIT: http://jsfiddle.net/fgNMJ/144/

Remove:

$('.box img').css({
    width: '100%',
    height: 'auto'
});

Modify CSS

.box img{
   width:100%;   
}

Another Edit: You could just Move the $('.box img').css... call above the masonry call.

http://jsfiddle.net/fgNMJ/145/

edited Mar 08 '11 at 23:44

answered Mar 08 '11 at 23:32

Kyle

21,978
2
60
61

You're welcome. You were modifying the css of the `img`'s after `masonry` setup everything. So, adjust CSS or move the jQuery CSS call above `masonry`. – Kyle Mar 08 '11 at 23:48

Help with Jquery/Masonry, minor tweak

1 Answers1

Linked