How to toggle between Isotope's layout modes?

Question

Two questions, everybody:

1) How do I toggle Isotope on and off?

2) How do I toggle layout modes? That is, how do I go from this:

 $('.content').isotope({  itemSelector : '.hentry',
                          layoutMode : 'cellsByRow',
                          cellsByRow : { columnWidth : 240, rowHeight : 360 } });

to this:

 $('.content').isotope({  itemSelector : '.hentry',
                          layoutMode : 'masonry'});

with a simple click switch? Any ideas?

Thanks!

Answer 1

See http://jsfiddle.net/desandro/dbgFa/

1) To disable Isotope after initializing it, use the destroy method

$('.content').isotope('destroy')

Then turn it back on by triggering Isotope again

$('.content').isotope( /* options */ )

2) You would change layout modes just like your example code, by setting the layoutMode in the options. This will also trigger a re-layout and the layout will change.