|
1 --- |
|
2 |
|
3 title: Options |
|
4 category: docs |
|
5 layout: default |
|
6 body_class: option-def |
|
7 toc: |
|
8 - { title: animationEngine, anchor: animationengine } |
|
9 - { title: animationOptions, anchor: animationoptions } |
|
10 - { title: containerClass, anchor: containerclass } |
|
11 - { title: containerStyle, anchor: containerstyle } |
|
12 - { title: filter, anchor: filter } |
|
13 - { title: getSortData, anchor: getsortdata } |
|
14 - { title: hiddenClass, anchor: hiddenclass } |
|
15 - { title: hiddenStyle, anchor: hiddenstyle } |
|
16 - { title: itemClass, anchor: itemclass } |
|
17 - { title: itemPositionDataEnabled, anchor: itempositiondataenabled } |
|
18 - { title: itemSelector, anchor: itemselector } |
|
19 - { title: layoutMode, anchor: layoutmode } |
|
20 - { title: onLayout, anchor: onlayout } |
|
21 - { title: resizable, anchor: resizable } |
|
22 - { title: resizesContainer, anchor: resizescontainer } |
|
23 - { title: sortAscending, anchor: sortascending } |
|
24 - { title: sortBy, anchor: sortby } |
|
25 - { title: transformsEnabled, anchor: transformsenabled } |
|
26 - { title: visibleStyle, anchor: visiblestyle } |
|
27 - { title: Layout-specific options, anchor: layoutspecific_options } |
|
28 |
|
29 --- |
|
30 |
|
31 <dl class="header clearfix"> |
|
32 <dt><code>option</code></dt> |
|
33 <dd class="option-type">Type</dd> |
|
34 <dd class="default">Default</dd> |
|
35 </dl> |
|
36 |
|
37 ## animationEngine |
|
38 |
|
39 <dl class="clearfix"> |
|
40 <dt><code>animationEngine</code></dt> |
|
41 <dd class="option-type">String</dd> |
|
42 <dd class="default"><code><span class="s1">'best-available'</span></code></dd> |
|
43 </dl> |
|
44 |
|
45 Determines the jQuery method to apply styles, `.css()` or `.animate()`. Useful for relying on CSS transitions to handle animation. |
|
46 |
|
47 ### Values {#animationEngine-values} |
|
48 |
|
49 |
|
50 + `'best-available'`: if browser supports CSS transitions, Isotope uses `.css()`. If not, falls back to using `.animate()`. |
|
51 + `'css'`: Isotope uses `.css()` |
|
52 + `'jquery'`: Isotope uses `.animate()` |
|
53 |
|
54 ## animationOptions |
|
55 |
|
56 <dl class="clearfix"> |
|
57 <dt><code>animationOptions</code></dt> |
|
58 <dd class="option-type">Object</dd> |
|
59 <dd class="default"><code>{ queue: <span class="kc">false</span>, duration: <span class="mi">800</span> }</code></dd> |
|
60 </dl> |
|
61 |
|
62 When jQuery is the animation engine (see above), 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. |
|
63 |
|
64 ### Example |
|
65 |
|
66 {% highlight javascript %} |
|
67 |
|
68 $('#container').isotope({ |
|
69 animationOptions: { |
|
70 duration: 750, |
|
71 easing: 'linear', |
|
72 queue: false |
|
73 } |
|
74 }); |
|
75 |
|
76 {% endhighlight %} |
|
77 |
|
78 ## containerClass |
|
79 |
|
80 <dl class="clearfix"> |
|
81 <dt><code>containerClass</code></dt> |
|
82 <dd class="option-type">String</dd> |
|
83 <dd class="default"><code><span class="s1">'isotope'</span></code></dd> |
|
84 </dl> |
|
85 |
|
86 The class applied to the container element. |
|
87 |
|
88 ## containerStyle |
|
89 |
|
90 <dl class="clearfix"> |
|
91 <dt><code>containerStyle</code></dt> |
|
92 <dd class="option-type">Object</dd> |
|
93 <dd class="default"><code>{ position: <span class="s1">'relative'</span>, overflow: <span class="s1">'hidden'</span> }</code></dd> |
|
94 </dl> |
|
95 |
|
96 CSS styles applied to the container element. Relative positioning enables absolute positioning on child items. Hidden overflow ensures that filtered items that lie outside the container do not interfer with subsequent content. |
|
97 |
|
98 ## filter |
|
99 |
|
100 <dl class="clearfix"> |
|
101 <dt><code>filter</code></dt> |
|
102 <dd class="option-type">Selector</dd> |
|
103 </dl> |
|
104 |
|
105 Setting a filter with show item elements that match the selector, and hide elements that do not match. See [docs on filering](filtering.html) for more details. |
|
106 |
|
107 [**See Demo: Filtering**](../demos/filtering.html) |
|
108 |
|
109 ### Values {#filter-values} |
|
110 |
|
111 |
|
112 <ul> |
|
113 <li><code><span class="s1">'*'</span></code> or <code><span class="s1">''</span></code> (an empty string): Shows all item elements</li> |
|
114 </ul> |
|
115 |
|
116 |
|
117 ## getSortData |
|
118 |
|
119 <dl class="clearfix"> |
|
120 <dt><code>getSortData</code></dt> |
|
121 <dd class="option-type">Object</dd> |
|
122 </dl> |
|
123 |
|
124 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. See [docs on sorting](sorting.html) for more details. |
|
125 |
|
126 [**See Demo: Sorting**](../demos/sorting.html) |
|
127 |
|
128 ### Example |
|
129 |
|
130 {% highlight javascript %} |
|
131 |
|
132 $('#container').isotope({ |
|
133 getSortData : { |
|
134 symbol : function( $elem ) { |
|
135 return $elem.attr('data-symbol'); |
|
136 }, |
|
137 number : function( $elem ) { |
|
138 return parseInt( $elem.find('.number').text(), 10 ); |
|
139 }, |
|
140 name : function ( $elem ) { |
|
141 return $elem.find('.name').text(); |
|
142 } |
|
143 } |
|
144 }); |
|
145 |
|
146 {% endhighlight %} |
|
147 |
|
148 ## hiddenClass |
|
149 |
|
150 <dl class="clearfix"> |
|
151 <dt><code>hiddenClass</code></dt> |
|
152 <dd class="option-type">String</dd> |
|
153 <dd class="default"><code><span class="s1">'isotope-hidden'</span></code></dd> |
|
154 </dl> |
|
155 |
|
156 The class applied to item elements hidden by Filtering. |
|
157 |
|
158 ## hiddenStyle |
|
159 |
|
160 <dl class="clearfix"> |
|
161 <dt><code>hiddenStyle</code></dt> |
|
162 <dd class="option-type">Object</dd> |
|
163 <dd class="default"><code>{ opacity : <span class="mi">0</span>, scale : <span class="mi">0.001</span> }</code></dd> |
|
164 </dl> |
|
165 |
|
166 The style applied to item elements hidden by Filtering. |
|
167 |
|
168 ## itemClass |
|
169 |
|
170 <dl class="clearfix"> |
|
171 <dt><code>itemClass</code></dt> |
|
172 <dd class="option-type">String</dd> |
|
173 <dd class="default"><code><span class="s1">'isotope-item'</span></code></dd> |
|
174 </dl> |
|
175 |
|
176 The class applied to item elements. |
|
177 |
|
178 ## itemPositionDataEnabled |
|
179 |
|
180 <dl class="clearfix"> |
|
181 <dt><code>itemPositionDataEnabled</code></dt> |
|
182 <dd class="option-type">Boolean</dd> |
|
183 <dd class="default"><code><span class="kc">false</span></code></dd> |
|
184 </dl> |
|
185 |
|
186 When enabled, the position of item elements will exposed as data, which you can retrieve with jQuery's data method with <code><span class="s1">'isotope-item-position'</span></code> name space. Position is return as an object with `x` and `y`; |
|
187 |
|
188 ### Example |
|
189 |
|
190 {% highlight javascript %} |
|
191 |
|
192 $('#container').isotope({ |
|
193 itemSelector: '.element', |
|
194 itemPositionDataEnabled: true |
|
195 }) |
|
196 // log position of each item |
|
197 .find('.element').each(function(){ |
|
198 var position = $(this).data('isotope-item-position'); |
|
199 console.log('item position is x: ' + position.x + ', y: ' + position.y ); |
|
200 }); |
|
201 |
|
202 {% endhighlight %} |
|
203 |
|
204 ## itemSelector |
|
205 |
|
206 <dl class="clearfix"> |
|
207 <dt><code>itemSelector</code></dt> |
|
208 <dd class="option-type">Selector</dd> |
|
209 </dl> |
|
210 |
|
211 Restricts Isotope item elements to selector. |
|
212 |
|
213 ## layoutMode |
|
214 |
|
215 <dl class="clearfix"> |
|
216 <dt><code>layoutMode</code></dt> |
|
217 <dd class="option-type">String</dd> |
|
218 <dd class="default"><code><span class="s1">'masonry'</span></code></dd> |
|
219 </dl> |
|
220 |
|
221 See also docs on [Layout modes](layout-modes.html). |
|
222 |
|
223 [**See Demo: Layout modes**](../demos/layout-modes.html) |
|
224 |
|
225 ## onLayout |
|
226 |
|
227 <dl class="clearfix"> |
|
228 <dt><code>onLayout</code></dt> |
|
229 <dd class="option-type">Function</dd> |
|
230 </dl> |
|
231 |
|
232 Similiar to a callback, `onLayout` is a function that will be triggered after every time an Isotope instance runs through its layout logic. |
|
233 |
|
234 {% highlight javascript %} |
|
235 |
|
236 $('#container').isotope({ |
|
237 onLayout: function( $elems, instance ) { |
|
238 // `this` refers to jQuery object of the container element |
|
239 console.log( this.height() ); |
|
240 // callback provides jQuery object of laid-out item elements |
|
241 $elems.css({ background: 'blue' }); |
|
242 // instance is the Isotope instance |
|
243 console.log( instance.$filteredAtoms.length ); |
|
244 } |
|
245 }); |
|
246 |
|
247 {% endhighlight %} |
|
248 |
|
249 ## resizable |
|
250 |
|
251 <dl class="clearfix"> |
|
252 <dt><code>resizable</code></dt> |
|
253 <dd class="option-type">Boolean</dd> |
|
254 <dd class="default"><code><span class="kc">true</span></code></dd> |
|
255 </dl> |
|
256 |
|
257 Triggers layout logic when browser window is resized. |
|
258 |
|
259 ## resizesContainer |
|
260 |
|
261 <dl class="clearfix"> |
|
262 <dt><code>resizesContainer</code></dt> |
|
263 <dd class="option-type">Boolean</dd> |
|
264 <dd class="default"><code><span class="kc">true</span></code></dd> |
|
265 </dl> |
|
266 |
|
267 Isotope will set the height (for vertical layout modes) or width (for horizontal layout modes) of the container after layout. If `resizesContainer` is set to <code><span class="kc">false</span></code>, be sure to set a size for the container in your CSS, so it doesn't collapse when Isotope is triggered. |
|
268 |
|
269 ## sortAscending |
|
270 |
|
271 <dl class="clearfix"> |
|
272 <dt><code>sortAscending</code></dt> |
|
273 <dd class="option-type">Boolean</dd> |
|
274 <dd class="default"><code><span class="kc">true</span></code></dd> |
|
275 </dl> |
|
276 |
|
277 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...". See [docs on sorting](sorting.html) for more details. |
|
278 |
|
279 [**See Demo: Sorting**](../demos/sorting.html) |
|
280 |
|
281 ## sortBy |
|
282 |
|
283 <dl class="clearfix"> |
|
284 <dt><code>sortBy</code></dt> |
|
285 <dd class="option-type">String</dd> |
|
286 </dl> |
|
287 |
|
288 The property name of the method within the `getSortData` option to sort item elements. See [docs on sorting](sorting.html) for more details. |
|
289 |
|
290 [**See Demo: Sorting**](../demos/sorting.html) |
|
291 |
|
292 ### Values {#sortBy-values} |
|
293 |
|
294 + `'original-order'` Sorts item elements by their original order. |
|
295 |
|
296 ## transformsEnabled |
|
297 |
|
298 <dl class="clearfix"> |
|
299 <dt><code>transformsEnabled</code></dt> |
|
300 <dd class="option-type">Boolean</dd> |
|
301 <dd class="default"><code><span class="kc">true</span></code></dd> |
|
302 </dl> |
|
303 |
|
304 Isotope uses CSS3 transforms to position item elements, when available in the browser. Setting `transformsEnabled` to <code><span class="kc">false</span></code> will disable this feature so all browsers use top/left absolute positioning. Useful for [resolving issues with CSS transforms](help.html#css-transforms). |
|
305 |
|
306 ### Additional CSS {#transformsEnabled-css} |
|
307 |
|
308 If you do disable transforms, but still want to use [CSS transitions](animating.html#css_transitions), you'll need add the following CSS: |
|
309 |
|
310 {% highlight css %} |
|
311 |
|
312 .isotope .isotope-item { |
|
313 -webkit-transition-property: top, left, opacity; |
|
314 -moz-transition-property: top, left, opacity; |
|
315 -ms-transition-property: top, left, opacity; |
|
316 -o-transition-property: top, left, opacity; |
|
317 transition-property: top, left, opacity; |
|
318 } |
|
319 |
|
320 {% endhighlight %} |
|
321 |
|
322 ## visibleStyle |
|
323 |
|
324 <dl class="clearfix"> |
|
325 <dt><code>visibleStyle</code></dt> |
|
326 <dd class="option-type">Object</dd> |
|
327 <dd class="default"><code>{ opacity : <span class="mi">1</span>, scale : <span class="mi">1</span> }</code></dd> |
|
328 </dl> |
|
329 |
|
330 The style applied to item elements made visible by Filtering. |
|
331 |
|
332 ## Layout-specific options |
|
333 |
|
334 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. |
|
335 |
|
336 See docs on [layout modes](layout-modes.html) for each layout mode's available options. |
|
337 |
|
338 For example, if your layout switched from `masonry` to `cellsByRow`: |
|
339 |
|
340 {% highlight javascript %} |
|
341 |
|
342 $('#container').isotope({ |
|
343 masonry: { |
|
344 columnWidth: 120 |
|
345 }, |
|
346 cellsByRow: { |
|
347 columnWidth: 220, |
|
348 rowHeight: 220 |
|
349 } |
|
350 }); |
|
351 |
|
352 {% endhighlight %} |
|
353 |
|
354 [**See Demo: Layout modes**](../demos/layout-modes.html) |