Flexible layout + images + filtering = issues.

[metafizzy]

Flexible layout + images + filtering = issues.

[desandro]

I'm pretty confident all this can be done with Isotope. See #28 for more details on fluid layouts.

Items 1 and 2 are implementation issues that I can take a look if you purchase a Support or Isotope Commercial License

[mrangelmarino]

Commercial License: Purchased. Now haaallp? :D

[desandro]

Take a look: http://meta.metafizzy.co/support/marktauriello.com/portfolio.html

Here's the Isotope code:

$(document).ready(function(){

  var $container = $('#content');

  $container.imagesLoaded(function(){
    // bind isotope to window resize
    $(window).smartresize(function(){
      // jQuery has issues with percentage widths
      // so we'll manually calulate it
      var colW = Math.floor( $container.width() * 0.49 );

      $container.isotope({
        resizable: false,
        masonry: {
          columnWidth: colW
        }
      });
      // trigger resize so isotope layout is triggered
    }).smartresize();
  });

  // filter buttons
  $('#filters a').click(function(){
    var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
    return false;
  });

});

Basically, you had the right idea, but some pieces were missing. The trickiest part is seeing that I am first triggering isotope when I call .smartresize() on the $(window). Also note that we're manually calculating the columnWidth.

I had to disable yox view for this demo, as it had a cross-domain request for my own demo. It might be another issue when you enabled it on your side.

If you'd like to follow up but keep this discussion private, please use the email that was provided with the support license.