jQuery Isotope: resize elements via user control? - dynamic

Question

I'm using jQuery Isotope and I'm wondering if there's a built-in (or at least "easy") way to have it dynamically resize elements via a user control, like a slider.
There's a fluid/responsive demo in the documentation, but it resizes elements based on the size of the browser window. I'm looking for something where the window/container would stay the same size, and the user could control the size of the elements by dragging a slider (like the thumbnail size slider in iPhoto).
Is this even possible? I haven't been able to find any examples of Isotope used in this way.

Answer 1

You should try this link: http://isotope.metafizzy.co/demos/relayout.html This sample shows you how an item resizes onclick, but you can transfer this code to make it work with a slider. But as far as I know this plugin uses predefined width and heights via css-classes for its animations, so you might add a lot of css-classes different sizes and it won't work stageless but I am insecure about this. You'll probably need to set the size of an element dynamically. For example you can use the following code to increase the size of an item 5px in width and height:
/* resizing and relayouting the list */
$container.on('click', '.item', function(){
$this = $(this);
$this.width( $this.width() + 5);
$this.height( $this.height() + 5);
//reorganizes the elements in the list
$container.isotope('reLayout');
});
$container is your wrapping element and ".item" is the class of an item. You should probably use a named function for this event handler to bind and call it with your scroller. Hope that helps.