---

title: Options
category: docs
layout: doc
body_class: option-def

---

<dl class="header clearfix">
  <dt><code>option</code></dt>
  <dd class="option-type">Type</dd>
  <dd class="default">Default</dd>
</dl>

<h2 id="animationEngine">animationEngine</h2>

<dl class="clearfix">
  <dt><code>animationEngine</code></dt>
  <dd class="option-type">String</dd>
  <dd class="default"><code><span class="s1">'best-available'</span></code></dd>
</dl>

Determines the jQuery method to apply styles, `.css()` or `.animate()`. Useful for relying on CSS transitions to handle animation.

### Values


+ `'best-available'`: if browser supports CSS transitions, Isotope uses `.css()`. If not, falls back to using `.animate()`.
+ `'css'`: Isotope uses `.css()`
+ `'jquery'`: Isotope uses `.animate()`

<h2 id="animationOptions">animationOptions</h2>

<dl class="clearfix">
  <dt><code>animationOptions</code></dt>
  <dd class="option-type">Object</dd>
  <dd class="default"><code>{ queue: <span class="kc">false</span> }</code></dd>
</dl>

When jQuery is the animation engine, these options will be used in <code>.animate()</code>. See the [jQuery API for animate options](http://api.jquery.com/animate/#animate-properties-options) for details.

**Example:**

{% highlight javascript %}

$('#container').isotope({
  animationOptions: {
     duration: 750,
     easing: 'linear',
     queue: false
   }
});

{% endhighlight %}

<h2 id="containerClass">containerClass</h2>

<dl class="clearfix">
  <dt><code>containerClass</code></dt>
  <dd class="option-type">String</dd>
  <dd class="default"><code><span class="s1">'isotope'</span></code></dd>
</dl>

The class applied to the container element.

<h2 id="filter">filter</h2>

<dl class="clearfix">
  <dt><code>filter</code></dt>
  <dd class="option-type">Selector</dd>
</dl>

Setting a filter with show item elements that match the selector, and hide elements that do not match.

<h2 id="getSortData">getSortData</h2>

<dl class="clearfix">
  <dt><code>getSortData</code></dt>
  <dd class="option-type">Object</dd>
</dl>

An object containing one or several methods to retrieve data for Sorting. The methods receive one parameter (`$elem` in the example below) which is a jQuery object representing each item element. The methods need to return a value.

**Example**

{% highlight javascript %}

$('#container').isotope({
  getSortData : {
    symbol : function( $elem ) {
      return $elem.attr('data-symbol');
    },
    number : function( $elem ) {
      return parseInt( $elem.find('.number').text(), 10 );
    },
    name : function ( $elem ) {
      return $elem.find('.name').text();
    }
  }
});

{% endhighlight %}

<h2 id="hiddenClass">hiddenClass</h2>

<dl class="clearfix">
  <dt><code>hiddenClass</code></dt>
  <dd class="option-type">String</dd>
  <dd class="default"><code><span class="s1">'isotope-hidden'</span></code></dd>
</dl>

The class applied to item elements hidden by Filtering.

<h2 id="hiddenStyle">hiddenStyle</h2>

<dl class="clearfix">
  <dt><code>hiddenStyle</code></dt>
  <dd class="option-type">Object</dd>
  <dd class="default"><code>{ opacity : <span class="mi">0</span>, scale : <span class="mi">0.001</span> }</code></dd>
</dl>

The style applied to item elements hidden by Filtering.

<h2 id="itemSelector">itemSelector</h2>

<dl class="clearfix">
  <dt><code>itemSelector</code></dt>
  <dd class="option-type">Selector</dd>
</dl>

Restricts Isotope item elements to selector.

<h2 id="layoutMode">layoutMode</h2>

<dl class="clearfix">
  <dt><code>layoutMode</code></dt>
  <dd class="option-type">String</dd>
  <dd class="default"><code><span class="s1">'masonry'</span></code></dd>
</dl>

<h2 id="resizeable">resizeable</h2>

<dl class="clearfix">
  <dt><code>resizeable</code></dt>
  <dd class="option-type">Boolean</dd>
  <dd class="default"><code><span class="kc">true</span></code></dd>
</dl>

Triggers layout logic when browser window is resized. 

<h2 id="sortAscending">sortAscending</h2>

<dl class="clearfix">
  <dt><code>sortAscending</code></dt>
  <dd class="option-type">Boolean</dd>
  <dd class="default"><code><span class="kc">true</span></code></dd>
</dl>

Used with sorting. If true, items are sorted ascending: "1, 2, 3" or "A, B, C...". If false, items are sorted descending "Z, Y, X" or "9, 8, 7...".

<h2 id="sortBy">sortBy</h2>

<dl class="clearfix">
  <dt><code>sortBy</code></dt>
  <dd class="option-type">String</dd>
</dl>

The property name of the method within the `getSortData` option to sort item elements.

Looking at the `getSortData` example above, valid values would be `'symbol'`, `'number'`, or `'name'`.

<h2 id="visibleStyle">visibleStyle</h2>

<dl class="clearfix">
  <dt><code>visibleStyle</code></dt>
  <dd class="option-type">Object</dd>
  <dd class="default"><code>{ opacity : <span class="mi">1</span>, scale : <span class="mi">1</span> }</code></dd>
</dl>

The style applied to item elements made visible by Filtering.

<h2 id="layout-specific">Layout-specific options</h2>

In addition the general options listed above, certain layout modes each have their own options. In order to avoid conflict, these options are set with an option that matches the name of the layout mode.

See [Layouts](layouts.html) for each layout mode's available options.

For example, if your layout switched from `masonry` to `cellsByRow`:

{% highlight javascript %}

$('#container').isotope({
  masonry: {
    columnWidth: 120
  },
  cellsByRow: {
    columnWidth: 220,
    rowHeight: 220
  }
});

{% endhighlight %}