FilterizR

레이어팝업 이미지겔러리로 유용한 library
FilterizR 공식사이트 바로가기 GitHub

Demo

install

npm

# NPM
npm install filterizr
# Yarn
yarn add filterizr

간단한 사용법

html

<div class="filter-container">
  <div class="filtr-item" data-category="1" data-sort="value">
    <img src="img/sample1.jpg" alt="sample" />
  </div>
  <div class="filtr-item" data-category="2, 1" data-sort="value">
    <img src="img/sample2.jpg" alt="sample" />
  </div>
  <div class="filtr-item" data-category="1, 3" data-sort="value">
    <img src="img/sample3.jpg" alt="sample" />
  </div>
</div>

controller

<ul>
  <!-- For filtering controls add -->
  <li data-filter="all"> All items </li>
  <li data-filter="1"> Category 1 </li>
  <li data-filter="2"> Category 2 </li>
  <li data-filter="3"> Category 3 </li>
  <!-- For a shuffle control add -->
  <li data-shuffle> Shuffle items </li>
  <!-- For sorting controls add -->
  <li data-sortAsc> Ascending </li>
  <li data-sortDesc> Descending </li>
</ul>
<!-- To choose the value by which you want to sort add -->
<select data-sortOrder>
  <option value="index"> Position </option>
  <option value="sortData"> Custom Data </option>
</select>
<!-- To create a search control -->
<input type="text" name="filtr-search" value="" placeholder="Your search" data-search="">

Instantiate Filterizr

import Filterizr from 'filterizr'

// Configure your options
const options = { /* check next step for available options */ };

// Adjust the CSS selector to match the container where
// you set up your image gallery
const filterizr = new Filterizr('.filter-container', options);