StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Animating item sizes within Isotope is a bit like crossing the streams. The best way to handle this is to animate content within an item, and only change sizes of the item container.</p> <p>Take a look at <a href="http://jsfiddle.net/desandro/DJVX2/" rel="nofollow">http://jsfiddle.net/desandro/DJVX2/</a></p> <p>The tiles have two elements. One for the item container, and one for the item's content:</p> <pre><code><div id="container"> <div class="tile-holder"> <div class="tile"></div> </div> <div class="tile-holder"> <div class="tile"></div> </div> ... </div> </code></pre> <p>I'm using a slight mod of Isotope that always sorts content. It's a minor edit within <code>_init</code>. Sorry, I should probably merge this in to the master branch.</p> <p>The code you're looking for is all the way at the bottom:</p> <pre><code>jQuery(function(){ var $container = jQuery('#container'), $tileHolders = jQuery('.tile-holder'); $container.isotope({ itemSelector: '.tile-holder', masonry: { columnWidth: 60 }, getSortData : { width : function( $item ){ // sort by biggest width first, then by original order return -$item.width() + $item.index(); } }, sortBy : 'width' }) $tileHolders.click(function(){ var $this = jQuery(this), tileStyle = $this.hasClass('big') ? { width: 50, height: 50} : { width: 170, height: 110}; $this.toggleClass('big'); $this.find('.tile').stop().animate( tileStyle ); // update sortData for new tile's width $container.isotope( 'updateSortData', $this ).isotope(); }); }); </code></pre> <p>When a tile is clicked, it gets the <code>big</code> class toggled, which will toggle the size of <code>.item-holder</code> to 50x50 or 170x110. Then its inner element <code>.tile</code> gets animated separately. This is because Isotope needs to know the exact width of an item before it lays out all the items. Then, you just need to update the item's sortData using Isotope's <a href="http://isotope.metafizzy.co/docs/methods.html#updatesortdata" rel="nofollow"><code>updateSortData</code> method</a>, and trigger <code>.isotope()</code>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload