Isotope

https://isotope.metafizzy.co
Admin
Isotope is a JavaScript library for creating intelligent, dynamic layouts that allow filtering,...
Tokens:31,535
Snippets:300
Trust Score:9.6
Update:10 months ago
Show doc for...
Tokens:
Raw
### Packery Installation

Source: https://isotope.metafizzy.co/layout-modes/packery

Information on how to install the Packery layout mode, either by downloading packaged files or using package managers like Bower or npm.

```APIDOC
## Installation

Packery layout mode is not included in `isotope.pkgd.js` and must be installed separately.

### Download Packaged Files

Download a packaged source file for packery layout mode:

*   `packery-mode.pkgd.js`
*   `packery-mode.pkgd.min.js`

### Install with Bower

```bash
bower install isotope-packery
```

### Install with npm

```bash
npm install isotope-packery
```
```

--------------------------------

### Install Packery with Bower

Source: https://isotope.metafizzy.co/layout-modes/packery

Installs the Packery layout mode for Isotope using the Bower package manager. Ensure Bower is installed and configured for your project.

```bash
bower install isotope-packery
```

--------------------------------

### Install Isotope cellsByColumn with npm

Source: https://isotope.metafizzy.co/layout-modes/cellsbycolumn

Instructions for installing the cellsByColumn layout mode for Isotope using the npm package manager. This is a separate installation from the core Isotope library.

```bash
npm install isotope-cells-by-column

```

--------------------------------

### Install Isotope with npm

Source: https://isotope.metafizzy.co/extras

Installs the Isotope library using npm. This is the primary method for integrating Isotope into projects managed with npm.

```bash
npm install isotope-layout
```

--------------------------------

### Install Isotope cellsByColumn with Bower

Source: https://isotope.metafizzy.co/layout-modes/cellsbycolumn

Instructions for installing the cellsByColumn layout mode for Isotope using the Bower package manager. This is a separate installation from the core Isotope library.

```bash
bower install isotope-cells-by-column

```

--------------------------------

### Install Packery with npm

Source: https://isotope.metafizzy.co/layout-modes/packery

Installs the Packery layout mode for Isotope using the npm package manager. This is the recommended method for modern JavaScript projects.

```bash
npm install isotope-packery
```

--------------------------------

### Install masonryHorizontal with Bower

Source: https://isotope.metafizzy.co/layout-modes/masonryhorizontal

Installs the masonryHorizontal layout mode for Isotope using the Bower package manager. Ensure Bower is installed and configured before running this command.

```bash
bower install isotope-masonry-horizontal
```

--------------------------------

### Responsive CSS for Isotope grid-sizer

Source: https://isotope.metafizzy.co/options

Provides responsive CSS examples for the `.grid-sizer` element, demonstrating how to adjust the Isotope layout for different screen sizes. Media queries are used to change the width of the `.grid-sizer`, effectively changing the number of columns in the layout.

```css
/* 3 columns by default */
.grid-sizer { width: 33.333%; }

@media screen and (min-width: 768px) {
  /* 5 columns for larger screens */
  .grid-sizer { width: 20%; }
}
```

--------------------------------

### Isotope Initialization with JavaScript

Source: https://isotope.metafizzy.co/index

Initializes Isotope on a container element. This example shows initialization using vanilla JavaScript with options for item selection and layout mode. It demonstrates creating a new Isotope instance with either a DOM element or a selector string.

```javascript
var elem = document.querySelector('.grid');
var iso = new Isotope( elem, {
  // options
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

// element argument can be a selector string
//   for an individual element
var iso = new Isotope( '.grid', {
  // options
});
```

--------------------------------

### Shuffling Grid Items

Source: https://isotope.metafizzy.co/methods

Explains the `shuffle` method for randomizing the order of items in the Isotope grid. An example demonstrates how to trigger shuffling with a button click.

```javascript
/* jQuery */
$grid.isotope('shuffle');

/* vanilla JS */
iso.shuffle();

/* Example: Shuffle button */
$('.shuffle-button').on( 'click', function() {
  $grid.isotope('shuffle');
});
```

--------------------------------

### Install masonryHorizontal with npm

Source: https://isotope.metafizzy.co/layout-modes/masonryhorizontal

Installs the masonryHorizontal layout mode for Isotope using the npm package manager. This is the recommended method for Node.js environments and modern JavaScript projects.

```bash
npm install isotope-masonry-horizontal
```

--------------------------------

### Isotope Basic Initialization Code

Source: https://isotope.metafizzy.co/index

A fundamental code snippet demonstrating the initialization of Isotope with essential options. This example sets the item selector to '.element-item' and the layout mode to 'fitRows', forming the basis for more complex configurations.

```javascript
$grid.isotope({
  itemSelector: '.element-item',
  layoutMode: 'fitRows',
  ...
})
```

--------------------------------

### Isotope Vertical Layout horizontalAlignment CSS Examples

Source: https://isotope.metafizzy.co/layout-modes/vertical

These CSS examples illustrate different settings for the horizontalAlignment option in Isotope's vertical layout. They show how to align items to the default origin edge (0), the center (0.5), and the opposite edge (1).

```css
/* default
vertical: {
  // align to origin edge
  horizontalAlignment: 0
} */

vertical: {
  // align to center
  horizontalAlignment: 0.5
}

vertical: {
  // align to opposite edge
  horizontalAlignment: 1
}
```

--------------------------------

### Isotope getSortData Shortcut String Examples

Source: https://isotope.metafizzy.co/sorting

Illustrates how to use shortcut strings within Isotope's `getSortData` option. These strings can be simple query selectors for text content, bracketed attribute names for attribute values, or include parser keywords like 'parseInt' or 'parseFloat' to convert data to numbers.

```javascript
getSortData: {
  name: '.name', // use text of .name element
  symbol: '.symbol', // use text of .symbol element
  category: '[data-category]', // use value of data-category attribute
  number: '.number parseInt', // parse text of .number as an integer
  weight: '.weight parseFloat' // parse text of .weight as a float
}
```

--------------------------------

### JavaScript: Isotope Initialization After All Images Load

Source: https://isotope.metafizzy.co/layout

Initializes Isotope only after all images within the grid have finished loading, using the `imagesLoaded` plugin. This ensures the layout is calculated with all image dimensions present from the start.

```javascript
var $grid = $('.grid').imagesLoaded( function() {
  // init Isotope after all images have loaded
  $grid.isotope({
    // options...
  });
});
```

--------------------------------

### Install Isotope Horizontal Layout Mode

Source: https://isotope.metafizzy.co/layout-modes/horiz

Instructions for installing the 'horiz' layout mode for Isotope using package managers like Bower and npm. This mode is not included in the core Isotope package and requires separate installation.

```bash
bower install isotope-horizontal
```

```bash
npm install isotope-horizontal
```

--------------------------------

### Install Isotope Cells By Row via npm

Source: https://isotope.metafizzy.co/layout-modes/cellsbyrow

Installs the CellsByRow layout mode for Isotope using the npm package manager. This layout mode is separate from the core Isotope library.

```bash
npm install isotope-cells-by-row

```

--------------------------------

### Install Isotope Cells By Row via Bower

Source: https://isotope.metafizzy.co/layout-modes/cellsbyrow

Installs the CellsByRow layout mode for Isotope using the Bower package manager. This layout mode is separate from the core Isotope library.

```bash
bower install isotope-cells-by-row

```

--------------------------------

### Customize Item Visibility Styles

Source: https://isotope.metafizzy.co/options

This example shows how to customize `hiddenStyle` and `visibleStyle` to only control opacity, effectively disabling the scale transform transition when hiding items. This allows for simpler fade-in/fade-out effects.

```javascript
$grid.isotope({
  // disable scale transform transition when hiding
  hiddenStyle: {
    opacity: 0
  },
  visibleStyle: {
    opacity: 1
  }
})
```

--------------------------------

### Isotope CDN Installation

Source: https://isotope.metafizzy.co/index

Includes Isotope via a Content Delivery Network (CDN) using script tags. This method allows direct linking to the Isotope library hosted on unpkg, providing both minified and un-minified versions for development and production.

```html
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

```

--------------------------------

### CSS for Isotope element sizing

Source: https://isotope.metafizzy.co/layout-modes/cellsbycolumn

CSS rules demonstrating how to define sizing for grid items and a grid sizer element when using element sizing with Isotope. This example shows percentage-based heights for grid items and a fixed width for the sizer.

```css
.grid-item { height: 13%; }
.grid-item--height2 { height: 23%; }
/* isotope element option sizing */
.grid-sizer {
  width: 110px;
  height: 25%;
}

```

--------------------------------

### Add Isotope CellsByRow Layout Mode with Webpack

Source: https://isotope.metafizzy.co/extras

Shows how to install and integrate the 'cellsByRow' layout mode with Isotope using Webpack. This requires installing the layout mode separately and then requiring it alongside the main Isotope library.

```bash
npm install isotope-cells-by-row
```

```javascript
var Isotope = require('isotope-layout');
// add cellsByRow layout mode
require('isotope-cells-by-row')

var iso = new Isotope( '.grid', {
  layoutMode: 'cellsByRow'
});
```

--------------------------------

### Configure cellsByColumn with element sizing

Source: https://isotope.metafizzy.co/layout-modes/cellsbycolumn

Example configuration for the cellsByColumn layout mode using element selectors for columnWidth and rowHeight. This allows Isotope to dynamically determine grid dimensions based on specified elements, useful for responsive designs.

```javascript
layoutMode: 'cellsByColumn',
itemSelector: '.grid-item',
percentPosition: true,
cellsByColumn: {
  columnWidth: '.grid-sizer',
  rowHeight: '.grid-sizer'
}

```

--------------------------------

### Configure cellsByColumn with fixed sizing

Source: https://isotope.metafizzy.co/layout-modes/cellsbycolumn

Example configuration for the cellsByColumn layout mode using fixed pixel values for columnWidth and rowHeight. This sets a uniform grid size for all items.

```javascript
layoutMode: 'cellsByColumn',
cellsByColumn: {
  columnWidth: 110,
  rowHeight: 110
}

```

--------------------------------

### UI for Filtering with Buttons in Isotope

Source: https://isotope.metafizzy.co/filtering

Provides an example of implementing a user interface for filtering with buttons. Buttons use `data-filter` attributes to specify filter values, and JavaScript handles click events to update the Isotope layout.

```javascript
// init Isotope
var $grid = $('.grid').isotope({
  // options
});
// filter items on button click
$('.filter-button-group').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});
```

--------------------------------

### Use Isotope as jQuery Plugin with Webpack

Source: https://isotope.metafizzy.co/extras

Explains how to use Isotope as a jQuery plugin when utilizing Webpack. This involves installing jQuery and 'jquery-bridget', and then using 'jquery-bridget' to attach Isotope to jQuery.

```bash
npm install jquery
npm install jquery-bridget
```

```javascript
var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Isotope = require('isotope-layout');
// make Isotope a jQuery plugin
jQueryBridget( 'isotope', Isotope, $ );
// now you can use $().isotope()
$('.grid').isotope({
  // options...
});
```

--------------------------------

### Laying Out Grid Items

Source: https://isotope.metafizzy.co/methods

Details the `layout` method for re-arranging items in the grid, particularly useful when an item's size changes. This method only affects the layout and does not apply filtering or sorting. Examples are provided for both jQuery and vanilla JavaScript, including a practical scenario of toggling item size.

```javascript
/* jQuery */
$grid.isotope('layout');

/* vanilla JS */
iso.layout();

/* Example: Toggling item size and triggering layout */
var $grid = $('.grid').isotope({
  masonry: {
    columnWidth: 50
  }
});
$grid.on( 'click', '.grid-item', function() {
  $(this).toggleClass('gigante');
  // trigger layout after item size changes
  $grid.isotope('layout');
});
```

--------------------------------

### Stamping and Unstamping Elements in Layout

Source: https://isotope.metafizzy.co/methods

Details the `stamp` and `unstamp` methods, which allow elements to be designated as 'stamps'. Isotope will then lay out item elements around these stamped elements. Stamping is supported by masonry, packery, and masonryHorizontal layout modes. An example shows toggling a stamped element.

```javascript
/* jQuery */
$grid.isotope( 'stamp', elements );
$grid.isotope( 'unstamp', elements );

/* vanilla JS */
iso.stamp( elements );
iso.unstamp( elements );

/* Example: Toggle stamped element */
var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 50
  }
});
var $stampElem = $demo.find('.stamp');
var isStamped = false;

$('.stamp-button').on( 'click', function() {
  if ( isStamped ) {
    $grid.isotope( 'unstamp', $stampElem );
  } else {
    $grid.isotope( 'stamp', $stampElem );
  }
  $grid.isotope('layout');
  isStamped = !isStamped;
});
```

--------------------------------

### Isotope CSS for Item Sizing

Source: https://isotope.metafizzy.co/index

Provides example CSS rules for controlling the size and layout of individual items within an Isotope grid. The 'width' property on '.grid-item' and specific variants like '.grid-item--width2' dictate how items are sized.

```css
.grid-item { width: 25%; }
.grid-item--width2 { width: 50%; }

```

--------------------------------

### Initialize Isotope with RequireJS

Source: https://isotope.metafizzy.co/extras

Demonstrates initializing Isotope using RequireJS. It shows how to use the `requirejs` function to load the Isotope library and then create a new instance.

```javascript
requirejs( [
  'path/to/isotope.pkgd.js',
], function( Isotope ) {
  var iso = new Isotope( '.grid', {...});
});
```

--------------------------------

### Initialize Isotope with Browserify

Source: https://isotope.metafizzy.co/extras

Demonstrates initializing Isotope with Browserify. It shows the standard procedure of requiring the library and creating a new Isotope instance.

```bash
npm install isotope-layout
```

```javascript
var Isotope = require('isotope-layout');

var iso = new Isotope( '.grid', {
  // options...
});
```

--------------------------------

### Initialize Isotope with Webpack (Vanilla JS)

Source: https://isotope.metafizzy.co/extras

Demonstrates how to initialize Isotope using Webpack. It shows how to require the library and create a new Isotope instance for a specified container element.

```javascript
// main.js
var Isotope = require('isotope-layout');

var iso = new Isotope( '.grid', {
  // options...
});
```

--------------------------------

### Initializing and Manipulating Isotope Grid

Source: https://isotope.metafizzy.co/methods

Demonstrates the basic initialization of Isotope with jQuery and vanilla JavaScript, along with common operations like appending elements and triggering layout. jQuery chaining is shown, highlighting where it might be broken by methods returning values. Vanilla JS methods are called directly on the Isotope instance.

```javascript
/* jQuery */
$grid.isotope()
  .append( elem )
  .isotope( 'appended', elem )
  .isotope('layout');

/* vanilla JS */
var iso = new Isotope('.grid');
container.appendChild( elem );
iso.appended( elem );
iso.layout();
```

--------------------------------

### Responsive Isotope Layout with Percentage Sizing

Source: https://isotope.metafizzy.co/layout

Demonstrates setting up a responsive Isotope layout using percentage-based widths. The `.grid-sizer` element defines the `columnWidth` for masonry layouts, and `percentPosition: true` ensures item positioning is also relative.

```html
<div class="grid">
  <!-- width of .grid-sizer used for columnWidth -->
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>
```

--------------------------------

### CSS Transition for Isotope Grid Items

Source: https://isotope.metafizzy.co/faq

Demonstrates how to apply CSS transitions to Isotope grid items. Initially, a broad 'all' transition is shown, followed by a corrected version that specifies only the properties that should transition to avoid layout jumps.

```css
.grid-item {
  transition: all 0.4s;
}
```

```css
.grid-item {
  transition: background 0.4s, box-shadow 0.4s;
}
```

--------------------------------

### JavaScript Initialization for Responsive Isotope

Source: https://isotope.metafizzy.co/layout

Initializes Isotope with options for a responsive masonry layout. It sets `itemSelector`, `percentPosition`, and specifies the `columnWidth` using a CSS selector.

```javascript
$('.grid').isotope({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    // use element for option
    columnWidth: '.grid-sizer'
  }
})
```

--------------------------------

### Initialize Isotope with Layout Mode Options

Source: https://isotope.metafizzy.co/layout-modes

This snippet shows how to initialize Isotope with a specific layout mode and its corresponding options. It demonstrates setting 'cellsByRow' with 'columnWidth' and 'rowHeight', and 'masonry' with 'columnWidth'.

```javascript
var $grid = $('.grid').isotope({
  // main isotope options
  itemSelector: '.grid-item',
  // set layoutMode
  layoutMode: 'cellsByRow',
  // options for cellsByRow layout mode
  cellsByRow: {
    columnWidth: 200,
    rowHeight: 150
  },
  // options for masonry layout mode
  masonry: {
    columnWidth: '.grid-sizer'
  }
})
```

--------------------------------

### Initialize Isotope using HTML data attributes

Source: https://isotope.metafizzy.co/options

Shows how to configure Isotope directly within HTML using data attributes. This method is useful for simpler configurations or when JavaScript initialization is not preferred. All Isotope options can be passed as a JSON string to the 'data-isotope' attribute.

```html
<div class="grid" data-isotope='{ "itemSelector": ".grid-item", "getSortData": { "name": ".name", "category": "[data-category]" }, "masonry": { "columnWidth": 200 } }'>

</div>
```

--------------------------------

### Responsive Columns with Bootstrap Grid and Isotope

Source: https://isotope.metafizzy.co/extras

Shows how to achieve responsive column sizing with Isotope by applying multiple Bootstrap `.col-` classes to item elements. This allows the number of columns to change at different screen sizes (e.g., 2, 3, or 4 columns).

```html
<div class="container-fluid">
  <div class="grid">
    <!-- 2 col grid @ xs, 3 col grid @ sm, 4 col grid @ md -->
    <div class="grid-sizer col-xs-6 col-sm-4 col-md-3"></div>
    <!-- 1 col @ xs, 2 col @ sm, 2 col @ md -->
    <div class="grid-item col-xs-6 col-sm-8 col-md-6">
      <div class="grid-item-content">...</div>
    </div>
    <!-- 1 col @ xs, 1 col @ sm, 1 col @ md -->
    <div class="grid-item col-xs-6 col-sm-4 col-md-3">
      <div class="grid-item-content">...</div>
    </div>
    ...
  </div>
</div>

```

--------------------------------

### Initialize Isotope Before Method Calls

Source: https://isotope.metafizzy.co/faq

Shows how to resolve the 'cannot call methods on isotope prior to initialization' error. It emphasizes the need to initialize Isotope before calling its methods, especially in scenarios involving asynchronous operations like imagesLoaded or Ajax.

```javascript
// This code will trigger the "cannot call methods" error

$grid.append( $items )
  // isotope method
  .isotope( 'appended', $items );

// init Isotope
$grid.isotope({
  // options...
});
```

```javascript
// race condition with imagesLoaded

$grid.imagesLoaded( function() {
  // init Isotope
  $grid.isotope({
    // options...
  });
});

// imagesLoaded will trigger after this
$grid.append( $items )
  .isotope( 'appended', $items );
```

```javascript
$grid.imagesLoaded( function() {
  // init Isotope
  $grid.isotope({
    // options...
  });
  // isotope has been initalized, okay to call methods
  $grid.append( $items )
    .isotope( 'appended', $items );
});
```

```javascript
// another fix, init Isotope first, before imagesLoaded
$grid.isotope({
  // options...
});
// okay to call methods
$grid.append( $items )
  .isotope( 'appended', $items );
// just do layout on imagesLoaded
$grid.imagesLoaded( function() {
  $grid.isotope('layout');
});
```

--------------------------------

### Get all item elements from Isotope instance (jQuery, vanilla JS)

Source: https://isotope.metafizzy.co/methods

Returns an array containing all element objects that are currently part of the Isotope instance. This can be useful for iterating over all items or performing batch operations.

```javascript
// jQuery
var elems = $grid.isotope('getItemElements')
// vanilla JS
var elems = iso.getItemElements()
```

--------------------------------

### Initialize Isotope with jQuery or Vanilla JS

Source: https://isotope.metafizzy.co/options

Demonstrates how to initialize Isotope on an element with specified options. Supports both jQuery and vanilla JavaScript, allowing for flexible integration. Key options include itemSelector for defining layout items and getSortData for custom sorting.

```javascript
var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  getSortData: {
    name: '.name',
    category: '[data-category]'
  },
  // layout mode options
  masonry: {
    columnWidth: 200
  }
});
```

```javascript
var iso = new Isotope( '.grid', {
  itemSelector: '.grid-item',
  getSortData: {
    name: '.name',
    category: '[data-category]'
  },
  masonry: {
    columnWidth: 200
  }
});
```

--------------------------------

### Configure CSS for Horizontal Layouts

Source: https://isotope.metafizzy.co/layout-modes

Horizontal layout modes in Isotope require the container to have a defined height. This CSS snippet provides examples of setting the container height to enable horizontal layouts like masonryHorizontal, fitColumns, cellsByColumn, and horiz.

```css
#container {
  /* either of these will work for horizontal Isotope layouts */
  height: 80%;
  height: 480px;
}
```

--------------------------------

### Get filtered and sorted item elements from Isotope (jQuery, vanilla JS)

Source: https://isotope.metafizzy.co/methods

Returns an array of item elements that match the current filter and are in the current sorted order. This is useful for operations that need to target only the currently visible and ordered items.

```javascript
// jQuery
var elems = $grid.isotope('getFilteredItemElements')
// vanilla JS
var elems = iso.getFilteredItemElements()
```

--------------------------------

### Isotope fitRows Layout with Element Sizing Gutter

Source: https://isotope.metafizzy.co/layout-modes/fitrows

Demonstrates setting up a responsive layout with 'fitRows' using percentage widths for items and the gutter. The gutter's width is determined by a dedicated '.gutter-sizer' element, allowing for fluid column layouts.

```html
<div class="grid">
  <!-- .gutter-sizer empty element, only used for element sizing -->
  <div class="gutter-sizer"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item"></div>
  ...
</div>
```

```css
/* fluid 4 columns */
.grid-item { width: 22%; }
/* fluid 4% gutter */
.gutter-sizer { width: 4%; }

.grid-item--width2 { width: 48%; }
```

```javascript
layoutMode: 'fitRows',
itemSelector: '.grid-item',
percentPosition: true,
fitRows: {
  gutter: '.gutter-sizer'
}
```

--------------------------------

### Configure Isotope with percentPosition

Source: https://isotope.metafizzy.co/options

Demonstrates using the `percentPosition` option to enable percentage-based positioning for items. This is beneficial for responsive designs with percentage-width items, preventing layout shifts on resize. Works in conjunction with `masonry` and `itemSelector`.

```javascript
$('.grid').isotope({
  percentPosition: true,
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: '.grid-sizer'
  }
})
```

--------------------------------

### Add Layout Mode with RequireJS

Source: https://isotope.metafizzy.co/extras

Illustrates how to load and use layout modes with Isotope when using RequireJS. Any layout mode not included by default needs to be required separately.

```javascript
requirejs( [
  'path/to/isotope.pkgd.js',
  'path/to/masonry-horizontal.js'
], function( Isotope ) {
  var iso = new Isotope( '.grid', {
    layoutMode: 'masonryHorizontal'
  });
});
```

--------------------------------

### JavaScript for URL Hash Filtering

Source: https://isotope.metafizzy.co/filtering

Integrates Isotope filtering with URL hash changes using JavaScript. It provides functions to get the filter from the URL hash, updates the hash when filters are applied, and synchronizes Isotope's filter state with the URL.

```javascript
function getHashFilter() {
  var hash = location.hash;
  // get filter=filterName
  var matches = location.hash.match( /filter=([^&]+)/i );
  var hashFilter = matches && matches[1];
  return hashFilter && decodeURIComponent( hashFilter );
}

$( function() {

  var $grid = $('.isotope');

  // bind filter button click
  var $filters = $('#filters').on( 'click', 'button', function() {
    var filterAttr = $( this ).attr('data-filter');
    // set filter in hash
    location.hash = 'filter=' + encodeURIComponent( filterAttr );
  });

  var isIsotopeInit = false;

  function onHashchange() {
    var hashFilter = getHashFilter();
    if ( !hashFilter && isIsotopeInit ) {
      return;
    }
    isIsotopeInit = true;
    // filter isotope
    $grid.isotope({
      itemSelector: '.element-item',
      filter: hashFilter
    });
    // set selected class on button
    if ( hashFilter ) {
      $filters.find('.is-checked').removeClass('is-checked');
      $filters.find('[data-filter="' + hashFilter + '"]').addClass('is-checked');
    }
  }

  $(window).on( 'hashchange', onHashchange );
  // trigger event handler to init Isotope
  onHashchange();
});
```

--------------------------------

### Packery Options

Source: https://isotope.metafizzy.co/layout-modes/packery

Details on configuring the Packery layout mode, including options for gutter, columnWidth, rowHeight, and horizontal layout.

```APIDOC
## Options

### `gutter`

The space between item elements, both vertically and horizontally.

**Usage:**

```javascript
packery: {
  gutter: 10
}
```

If set to an _Element_ or Selector _String_, Isotope will use the width of that element for gutter sizing.

**Example with Element Sizing:**

```html
<div class="grid">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item--width2"></div>
  ...
</div>
```

```css
.grid-sizer, .grid-item { width: 22%; }
.gutter-sizer { width: 4%; }
/* spans 2 columns: 22% + 4% + 22% = 48% */
.grid-item--width2 { width: 48%; }
```

```javascript
$('.grid').isotope({
  layoutMode: 'packery',
  packery: {
    gutter: '.gutter-sizer'
  },
  itemSelector: '.mini-item',
  percentPosition: true
});
```

### `columnWidth`

Aligns items to the width of a column of a horizontal grid. Unlike masonry layout, packery layout does not require `columnWidth`.

**Usage:**

```javascript
packery: {
  columnWidth: 60
}
```

If set to an _Element_ or Selector _String_, Isotope will use the width of that element. Setting `columnWidth` with element sizing is recommended if you are using percentage widths.

**Example with Element Sizing:**

```html
<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>
```

```css
.grid-sizer, .grid-item { width: 20%; }
.grid-item--width2 { width: 40%; }
```

```javascript
$('.grid').isotope({
  layoutMode: 'packery',
  packery: {
    columnWidth: '.grid-sizer'
  },
  itemSelector: '.grid-item',
  percentPosition: true
});
```

### `rowHeight`

Aligns items to the height of a row of a vertical grid.

**Usage:**

```javascript
packery: {
  rowHeight: 60
}
```

If set to an _Element_ or Selector _String_, Isotope will use the height of that element. Setting `rowHeight` with element sizing is recommended if you are using media queries.

### `horizontal`

Arranges items horizontally instead of vertically. Set a container height for horizontal layouts.

**Usage:**

```javascript
packery: {
  horizontal: true
}
```
```

--------------------------------

### Get Isotope Instance with jQuery.fn.data('isotope')

Source: https://isotope.metafizzy.co/methods

Retrieves an Isotope instance associated with a jQuery object. This is useful for accessing Isotope's internal properties like filtered item counts directly from a jQuery selection. No external dependencies are required beyond jQuery and Isotope.

```javascript
var iso = $('.grid').data('isotope')
// access Isotope properties
console.log( iso.filteredItems.length + ' filtered items'  )
```

--------------------------------

### Animating Responsive Percentage Width Items with CSS

Source: https://isotope.metafizzy.co/extras

Details how to animate item sizes for elements with responsive, percentage-based widths using CSS transitions. This method involves animating the item and its content element, requiring slightly more JavaScript for managing the expanded state.

```css
.grid-item {
  width: 20%;
  height: 60px;
}

.grid-item-content {
  width:  100%;
  height: 100%;
  background: #09D;
  transition: width 0.4s, height 0.4s;
}
/* item has expanded size */
.grid-item.is-expanded {
  width: 60%;
  height: 120px;
}


```

--------------------------------

### Get Isotope Instance with Isotope.data()

Source: https://isotope.metafizzy.co/methods

Retrieves an Isotope instance using its associated DOM element or a CSS selector. This method is particularly useful when Isotope has been initialized directly in HTML using the 'data-isotope' attribute. It accepts a DOM element, a jQuery element's native element, or a selector string. The returned value is an Isotope instance.

```html
<!-- init Isotope in HTML -->
<div class="grid" data-isotope='{...}'>...</div>
```

```javascript
// jQuery
// pass in the element, $element[0], not the jQuery object
var iso = Isotope.data( $('.grid')[0] )
```

```javascript
// vanilla JS
// using an element
var grid = document.querySelector('.grid')
var iso = Isotope.data( grid )
```

```javascript
// using a selector string
var iso = Isotope.data('.grid')
```

--------------------------------

### Bootstrap 3-Column Fluid Grid with Isotope

Source: https://isotope.metafizzy.co/extras

Demonstrates using Isotope with Bootstrap's fluid grid system, setting a 3-column layout by defining `columnWidth` with `col-xs-4`. It requires an extra container for Masonry and a sizing element for `columnWidth`.

```html
<div class="container-fluid">
  <!-- add extra container element for Masonry -->
  <div class="grid">
    <!-- add sizing element for columnWidth -->
    <div class="grid-sizer col-xs-4"></div>
    <!-- items use Bootstrap .col- classes -->
    <div class="grid-item col-xs-8">
      <!-- wrap item content in its own element -->
      <div class="grid-item-content">...</div>
    </div>
    <div class="grid-item col-xs-4">
      <div class="grid-item-content">...</div>
    </div>
    ...
  </div>
</div>

```

```javascript
$('.grid').isotope({
  itemSelector: '.grid-item', // use a separate class for itemSelector, other than .col-
  percentPosition: true,
  masonry: {
    columnWidth: '.grid-sizer'
  }
});

```

--------------------------------

### Enable/Disable Window Resize Handling with resize

Source: https://isotope.metafizzy.co/options

The `resize` option determines whether Isotope automatically adjusts item sizes and positions when the browser window is resized. It is enabled by default (`true`). Setting it to `false` prevents Isotope from responding to window resize events, which can be useful for layouts with fixed dimensions.

```javascript
resize: false
```

--------------------------------

### JavaScript: Isotope Layout After Each Image Load

Source: https://isotope.metafizzy.co/layout

Initializes Isotope and then uses the `imagesLoaded` plugin to trigger an Isotope layout after each individual image within the grid has loaded. This prevents overlap issues with partially loaded images.

```javascript
// init Isotope
var $grid = $('.grid').isotope({
  // options...
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});
```

--------------------------------

### Use element for Isotope columnWidth

Source: https://isotope.metafizzy.co/options

Illustrates how to set the `masonry.columnWidth` option using an element's size. This is achieved by referencing a `.grid-sizer` element in the HTML and defining its width in CSS. It provides a flexible way to control column sizing, especially for responsive designs.

```javascript
$('.grid').isotope({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    // set to the element
    columnWidth: '.grid-sizer'
  }
})
```

--------------------------------

### Vanilla JS Event Binding for Isotope

Source: https://isotope.metafizzy.co/events

Illustrates how to bind, unbind, and bind an event once using vanilla JavaScript's .on(), .off(), and .once() methods for Isotope. It notes the absence of an explicit event argument in vanilla JS callbacks.

```javascript
var iso = new Isotope( '.grid', {...});

function onArrange() {
  console.log('arrange done');
}
// bind event listener
iso.on( 'arrangeComplete', onArrange );
// un-bind event listener
iso.off( 'arrangeComplete', onArrange );
// bind event listener to be triggered just once
iso.once( 'arrangeComplete', function() {
  console.log('arrange done, just this one time');
});

// vanilla JS, no event argument
iso.on( 'arrangeComplete', function( filteredItems ) {
  console.log( filteredItems.length );
});

```

--------------------------------

### Arranging and Layout Methods

Source: https://isotope.metafizzy.co/methods

Methods for filtering, sorting, and laying out items in Isotope.

```APIDOC
## POST /websites/isotope_metafizzy_co/arrange

### Description
Filters, sorts, and lays out items. `arrange` is the principle method of Isotope. It is the default method with jQuery `.isotope()`. Pass in `options` to apply filtering and sorting.

### Method
POST

### Endpoint
/websites/isotope_metafizzy_co/arrange

### Parameters
#### Request Body
- **options** (Object) - Optional - Options to apply filtering and sorting.

### Request Example
```json
{
  "options": {
    "filter": ".metal",
    "sortBy": "number"
  }
}
```

### Response
#### Success Response (200)
- **message** (string) - Indicates successful arrangement.

#### Response Example
```json
{
  "message": "Items arranged successfully."
}
```
```

```APIDOC
## POST /websites/isotope_metafizzy_co/layout

### Description
Lays out all item elements. `layout` is useful when an item has changed size, and all items need to be laid out again. `layout` does not apply filtering or sorting.

### Method
POST

### Endpoint
/websites/isotope_metafizzy_co/layout

### Parameters
No specific parameters are required for this method.

### Request Example
```json
{
  "trigger": "itemSizeChange"
}
```

### Response
#### Success Response (200)
- **message** (string) - Indicates successful layout update.

#### Response Example
```json
{
  "message": "Layout updated successfully."
}
```
```

```APIDOC
## POST /websites/isotope_metafizzy_co/layoutItems

### Description
Lays out specified items. This method is used to precisely control which items are laid out.

### Method
POST

### Endpoint
/websites/isotope_metafizzy_co/layoutItems

### Parameters
#### Request Body
- **items** (Array<Object>) - Required - An array of Isotope.Item objects to lay out.
- **isStill** (Boolean) - Optional - Disables transitions for the layout.

### Request Example
```json
{
  "items": [
    {
      "id": "item1",
      "element": "<div class=\"grid-item\">...</div>"
    }
  ],
  "isStill": true
}
```

### Response
#### Success Response (200)
- **message** (string) - Indicates successful layout of specified items.

#### Response Example
```json
{
  "message": "Specified items laid out successfully."
}
```
```

```APIDOC
## POST /websites/isotope_metafizzy_co/updateSortData

### Description
Updates sort data for Isotope items. This is useful when item properties used for sorting have changed.

### Method
POST

### Endpoint
/websites/isotope_metafizzy_co/updateSortData

### Parameters
#### Request Body
- **elements** (Array<String> | Object | NodeList) - Optional - Elements for which to update sort data. If not provided, all elements are updated.

### Request Example
```json
{
  "elements": [".grid-item", "#specific-item"]
}
```

### Response
#### Success Response (200)
- **message** (string) - Indicates successful update of sort data.

#### Response Example
```json
{
  "message": "Sort data updated successfully."
}
```
```

```APIDOC
## POST /websites/isotope_metafizzy_co/shuffle

### Description
Shuffles items in a random order within the Isotope layout.

### Method
POST

### Endpoint
/websites/isotope_metafizzy_co/shuffle

### Parameters
None.

### Request Example
```json
{
  "trigger": "shuffleButtonClick"
}
```

### Response
#### Success Response (200)
- **message** (string) - Indicates successful shuffling of items.

#### Response Example
```json
{
  "message": "Items shuffled successfully."
}
```
```

```APIDOC
## POST /websites/isotope_metafizzy_co/stamp

### Description
Stamps elements in the layout. Isotope will lay out item elements around stamped elements. Only supported by certain layout modes (masonry, packery, masonryhorizontal).

### Method
POST

### Endpoint
/websites/isotope_metafizzy_co/stamp

### Parameters
#### Request Body
- **elements** (Array<String> | Object | NodeList) - Required - Elements to stamp in the layout.

### Request Example
```json
{
  "elements": [".stamp-item", "#header"]
}
```

### Response
#### Success Response (200)
- **message** (string) - Indicates successful stamping of elements.

#### Response Example
```json
{
  "message": "Elements stamped successfully."
}
```
```

```APIDOC
## DELETE /websites/isotope_metafizzy_co/unstamp

### Description
Un-stamps elements in the layout, allowing Isotope to lay out item elements around them again. This method reverses the effect of the `stamp` method.

### Method
DELETE

### Endpoint
/websites/isotope_metafizzy_co/unstamp

### Parameters
#### Request Body
- **elements** (Array<String> | Object | NodeList) - Required - Elements to unstamp from the layout.

### Request Example
```json
{
  "elements": [".stamp-item", "#header"]
}
```

### Response
#### Success Response (200)
- **message** (string) - Indicates successful un-stamping of elements.

#### Response Example
```json
{
  "message": "Elements un-stamped successfully."
}
```
```

```APIDOC
## POST /websites/isotope_metafizzy_co/hideItemElements

### Description
Hides specified item elements from the Isotope layout. These items will not be visible and will not occupy space.

### Method
POST

### Endpoint
/websites/isotope_metafizzy_co/hideItemElements

### Parameters
#### Request Body
- **elements** (Array<String> | Object | NodeList) - Required - The item elements to hide.

### Request Example
```json
{
  "elements": [".item-to-hide", "#hidden-one"]
}
```

### Response
#### Success Response (200)
- **message** (string) - Indicates successful hiding of item elements.

#### Response Example
```json
{
  "message": "Item elements hidden successfully."
}
```
```

```APIDOC
## POST /websites/isotope_metafizzy_co/revealItemElements

### Description
Reveals previously hidden item elements, making them visible and part of the Isotope layout again.

### Method
POST

### Endpoint
/websites/isotope_metafizzy_co/revealItemElements

### Parameters
#### Request Body
- **elements** (Array<String> | Object | NodeList) - Required - The item elements to reveal.

### Request Example
```json
{
  "elements": [".item-to-reveal", "#visible-one"]
}
```

### Response
#### Success Response (200)
- **message** (string) - Indicates successful revealing of item elements.

#### Response Example
```json
{
  "message": "Item elements revealed successfully."
}
```
```

--------------------------------

### Arranging Grid Items with Filters and Sorting

Source: https://isotope.metafizzy.co/methods

Explains the `arrange` method (or `.isotope()` with jQuery) for filtering and sorting grid items. It shows how to pass an options object to define filter criteria and sorting logic. Re-triggering the method without options reapplies the current arrangement.

```javascript
/* jQuery */
$grid.isotope({
  filter: '.metal',
  sortBy: 'number'
});
// Re-apply filtering, sorting, and layout
$grid.isotope();

/* vanilla JS */
iso.arrange({
  filter: '.metal',
  sortBy: 'number'
});
// Re-apply filtering, sorting, and layout
iso.arrange();
```

--------------------------------

### Isotope Initialization with Sorting Options

Source: https://isotope.metafizzy.co/sorting

Initializes Isotope with custom data sorting configurations. The `getSortData` option defines how to extract data for sorting, using query selectors, attribute values, or custom functions. The `sortBy` option specifies which property to sort by, and `sortAscending` controls the direction of the sort.

```javascript
var $grid = $('.grid').isotope({
  getSortData: {
    name: '.name', // text from querySelector
    category: '[data-category]', // value of attribute
    weight: function( itemElem ) { // function
      var weight = $( itemElem ).find('.weight').text();
      return parseFloat( weight.replace( /[()]/g, '') );
    }
  },
  sortBy: 'symbol' // Example: sort by symbol
});
```

--------------------------------

### Laying Out Specified Items

Source: https://isotope.metafizzy.co/methods

Introduces the `layoutItems` method, which allows for laying out a specific set of items. It accepts an array of Isotope.Item objects and a boolean to disable transitions.

```javascript
/* jQuery */
$grid.isotope( 'layoutItems', items, isStill );

/* vanilla JS */
iso.layoutItems( items, isStill );
```

--------------------------------

### Isotope Initialization with jQuery

Source: https://isotope.metafizzy.co/index

Initializes Isotope as a jQuery plugin. This method requires jQuery to be included in the project and provides a concise way to apply Isotope's functionality to selected elements, specifying item selector and layout mode.

```javascript
$('.grid').isotope({
  // options
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});
```

--------------------------------

### Define CSS for fluid grid columns

Source: https://isotope.metafizzy.co/options

Provides CSS rules for creating fluid grid columns, often used with Isotope's `masonry` layout and `columnWidth` option. The `.grid-sizer` and `.grid-item` classes are styled to create a responsive layout that adjusts to the container width.

```css
/* fluid 5 columns */
.grid-sizer, 
.grid-item { width: 20%; }
```

--------------------------------

### Configure Masonry Layout Fit Width

Source: https://isotope.metafizzy.co/layout-modes/masonry

Enables the `fitWidth` option for the Masonry layout mode in Isotope. This adjusts the container's width to fit the available number of columns based on its parent element's size. Note that `fitWidth` is incompatible with element sizing and percentage widths; fixed sizes for `columnWidth` or items are required.

```javascript
masonry: {
  columnWidth: 100,
  fitWidth: true
}
```

```javascript
/* center container with CSS */
.grid {
  margin: 0 auto;
}
```

--------------------------------

### CSS for Responsive Isotope Columns

Source: https://isotope.metafizzy.co/layout

CSS rules for creating responsive columns in Isotope. Sets the width of grid items and the `.grid-sizer` to percentages, allowing for fluid column layouts.

```css
/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns */
.grid-item--width2 { width: 40%; }
```

--------------------------------

### Packery Stamp Functionality

Source: https://isotope.metafizzy.co/layout-modes/packery

Explains how to use the 'stamp' option in Packery to fix items in place, allowing other items to lay out around them.

```APIDOC
## Stamp

Packery layout can stamp items in place. Packery will layout item elements _around_ stamped elements — even above, unlike Masonry.

**Usage:**

```javascript
$('.grid').isotope({
  layoutMode: 'packery',
  itemSelector: '.mini-item',
  stamp: '.stamp'
});
```
```

--------------------------------

### JavaScript Isotope Initialization and Sorting Logic

Source: https://isotope.metafizzy.co/sorting

This JavaScript code initializes Isotope with custom sorting data and sets up an event listener for a button group. When a sort button is clicked, it retrieves the 'data-sort-by' attribute and applies it to the Isotope instance, reordering the items accordingly. It uses jQuery for DOM manipulation and event handling.

```javascript
// init Isotope
var $grid = $grid.isotope({
  getSortData: {
    name: '.name',
    symbol: '.symbol',
    number: '.number parseInt',
    category: '[data-category]',
    weight: function( itemElem ) {
      var weight = $( itemElem ).find('.weight').text();
      return parseFloat( weight.replace( /[()]/g, '') );
    }
  }
});

// sort items on button click
$('.sort-by-button-group').on( 'click', 'button', function() {
  var sortByValue = $(this).attr('data-sort-by');
  $grid.isotope({ sortBy: sortByValue });
});
```
Tokens:
Raw