You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
28 lines
2.0 KiB
HTML
28 lines
2.0 KiB
HTML
<h2>Options<a href="#options"></a></h2>
|
|
|
|
<p>Settings you can change (these are the defaults).</p>
|
|
<div class="code-block">
|
|
<pre rel="JavaScript"><code class="language-javascript">// Overrideable options
|
|
Shuffle.options = {
|
|
group: Shuffle.ALL_ITEMS, // Initial filter group.
|
|
speed: 250, // Transition/animation speed (milliseconds).
|
|
easing: 'ease', // CSS easing function to use.
|
|
itemSelector: '*', // e.g. '.picture-item'.
|
|
sizer: null, // Element or selector string. Use an element to determine the size of columns and gutters.
|
|
gutterWidth: 0, // A static number or function that tells the plugin how wide the gutters between columns are (in pixels).
|
|
columnWidth: 0, // A static number or function that returns a number which tells the plugin how wide the columns are (in pixels).
|
|
delimeter: null, // If your group is not json, and is comma delimeted, you could set delimeter to ','.
|
|
buffer: 0, // Useful for percentage based heights when they might not always be exactly the same (in pixels).
|
|
columnThreshold: 0.01, // Reading the width of elements isn't precise enough and can cause columns to jump between values.
|
|
initialSort: null, // Shuffle can be initialized with a sort object. It is the same object given to the sort method.
|
|
throttle: throttle, // By default, shuffle will throttle resize events. This can be changed or removed.
|
|
throttleTime: 300, // How often shuffle can be called on resize (in milliseconds).
|
|
staggerAmount: 15, // Transition delay offset for each item in milliseconds.
|
|
staggerAmountMax: 250, // Maximum stagger delay in milliseconds.
|
|
useTransforms: true, // Whether to use transforms or absolute positioning.
|
|
filterMode: Shuffle.FilterMode.ANY, // When using an array with filter(), the element passes the test if any of its groups are in the array. With "all", the element only passes if all groups are in the array.
|
|
};</code></pre>
|
|
</div>
|
|
|
|
<p>No options <em>need</em> to be specified, but <code>itemSelector</code> should be used. Other common options to change are <code>speed</code> and <code>sizer</code>.</p>
|