0

This is what I currently have, however, the image is compressed to fit the size of the text's width. No matter what size I specify in the html, it doesn't change. Any light on this matter? 

$('#append').click(function(){
    var $boxes = $('<div class="box">'+balls($iterator)+'</div>');
    $container.append( $boxes ).masonry( 'appended', $boxes );

});


function balls($i){
    $iterator += 1;
    return '<p>'+$test[$iterator][1][2]+'</p><p><img src="'+$test[$iterator][2]+'" alt="'+$test[$iterator][1][2]+'" height="196" width="319"></a></p>';
}

enter image description here

Adola
  • 588
  • 7
  • 21

1 Answers1

0

Should this be triggered with imagesLoaded plugin ? From masonry site

"If your content contains any images, you’ll want to ensure that Masonry is triggered after all the images your content has loaded"

Try 

$container.append( $boxes ).imagesLoaded( function(){$container.masonry( 'appended', $boxes);});
Ahamed Mustafa M
  • 3,069
  • 1
  • 24
  • 34
  • I didn't post all my code, I had this above that: var $container = $('#container'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector: '.box', columnWidth: 100, isAnimated: !Modernizr.csstransitions }); }); Which, I think does the same thing. – Adola Jun 22 '12 at 10:52
  • And I just tried amending my line to the way you have that one, no change. Is this something simple with HTML? Or is this a limitation of Masonry? – Adola Jun 22 '12 at 11:45
  • Have a look at this fiddle(http://jsfiddle.net/LnL4L/) . I tried to simulate your environment.Is this what you try to do? – Ahamed Mustafa M Jun 22 '12 at 17:59