Issue getting Isotope to work within a responsive grid

[lewismalpas]

I am in the process of building a photoblog which utilises Isotope but I am curently having some difficulty getting the plugin to work as intended within a responsive / fluid grid.

www.lewismalpas.co.uk/tumblr (Demo)

Each image is wrapped within a div (.item) which has an explicit width of 25%, as the images are flexible this in theory should allow four images to be displayed inline, however at the moment only two are being displayed and I cannot seem to figure out the issue.

Many thanks in advance for your help, I really appreciate it.

All the best! Lewis.

[desandro]

Looks like within imagesLoaded the width of the items is being calculated as a couple pixels larger then they are afterwards. I'm not sure where that's happening, but we can get around it by first triggering isotope on doc ready, then again after imagesLoaded

// update columnWidth on window resize
$(window).smartresize(function(){
   $container.isotope({
     resizable: false, // disable normal resizing
     masonry: { columnWidth: $container.width() / 4 }
   });
   // trigger resize to trigger isotope
}).smartresize();

// trigger isotope again after images have loaded
$container.imagesLoaded( function(){
  $(window).smartresize();
});

[lewismalpas]

Hi Desandro,

I figured a width was being calculated incorrectly and your method seems to work perfectly apart from when the browser is resized. As I resize my window the columns and images are scaling as expected but it seems Isotope isn't calculating the columnWidth correctly as sometimes it puts two images on a row instead of four, any ideas as to why this is happening?

I have updated the demo which can be found here: http://lewismalpas.co.uk/tumblr

Again, many thanks for your support and quick response. Masonry / Isotope are truly fantastic plugins!

Lewis.

[desandro]

I think a rounding issue is to blame for the lingering issue here. Your best bet might be to save a pixel here or there by cheating how big each item is

.item { width: 24.5% }

[lewismalpas]

Hi Desandro,

I think your right, it seems that extra .5% makes a world of difference! I am still having trouble getting Isotope to lay out the images properly when the container width is expanded using the layout buttons (Click "layout" in the header to reveal options"). I am using reLayout which seems to be almost working, however it only puts two images on a row... I am correct in thinking that reLayout is the correct method to retrigger the layout when a change has occured?

Thanks so much for all your help, almost there!

[lewismalpas]

Ok all seems to be working, after changing layout mode I had to destroy Isotope and then call the original function - This is working perfectly but sadly the nice animations when changing width/layout are lost - What would be the best way to change layout modes whilst keeping the CSS/jQuery animation?

I have looked through your demo quite a few times but the JS is way beyond me!

Thanks for your help once again, Lewis.

[desandro]

Since you're still having trouble implementing Isotope to your liking, your requests now fall under the "personal support" category. In which case, I have a support license you can purchase, once things get back to normal in December.