How can I make jQuery isotope center container and set gutter?

Question

I'm trying to reproduce the container centering effect as show on isotope's website.

I had set CSS margin: 0 auto on the container, but the container doesn't resize (and thus doesn't get CSS width to work with margin: 0 auto).

I also set the gutter between items, and that doesn't work as well.

Here is how I do it.

Btw, how can I make items appears and be in position instantly (like the official website shows) instead of being "slideToggled"?

Answer 1

Your main problem is that you're missing the custom code that's required to add those custom methods to Isotope's prototype. If you look at the documentation for Modified Layout Modes, it says:

To use these mods, copy the revised methods found in the demos’ page source.

Here are two fiddles showing the modified layout modes you mentioned:

Centered: http://jsfiddle.net/nate/6j5X2/

Gutters: http://jsfiddle.net/nate/4D6N9/7/

You'll notice that even on Isotope's site, the two are not shown working in combination with each other. That's because the two have mutually exclusive _masonryReset, _masronyResizeChanged, and ._masonryGetContainerSize functions. It's not impossible that the two could work together, but they're not written to do so yet.

You also asked:

Btw, how can I make items appears and be in position instantly (like the official website shows) instead of being "slideToggled"?

The initial animation is caused by your naming your container "isotope", which means it gets animated the first time. If you name it something different, like container (as on Isotope's demo page), it doesn't get the isotope class until it's been laid out the first time, which prevents an initial animation.