Filterizr

JavaScript

ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」

Filterizrはソートやシャッフルができるレスポンシブに対応したギャラリーを実装するjQueryプラグインです。CSS3 トランジションが使われています。プラグイン自体が軽量になっているところもうれしいですね。

Filterizr

デモ

デモでは全部で9枚の写真が並んでおり、ALL、CITIES、NATURE、INDUSTRIAL、DAYLIGHT、NIGHTSCAPEのどれかのボタンをクリックすると、それに合う写真が絞り込まれます。

また、SHUFFLEボタンをクリックすると、写真がシャッフルされます。そのほか、ASCで昇順、DESCで降順に写真を並べ替えることも可能です。

写真を並べ替えたり絞り込んだりするときのアニメーションも滑らかでとてもいい感じですね。

レスポンシブに対応していることから、PCをはじめスマフォやタブレットにも最適なレイアウトで表示されるところもGoodです。

Chrome、Firefox、Safari、Opera、Android、iOS、Edge、IE(v.10+)がサポートされているとのこと。

軽量でレスポンシブに対応したソートやシャッフルができるギャラリーを実装したい方は、ぜひチェックしてみてください。

Filterizr

Ink Transition Effectインクをこぼしたようなエフェクトを実装できる「Ink Transition Effect」前のページ

最大1.92TBのサンディスク エクストリーム900 ポータブルSSD次のページサンディスク エクストリーム900 ポータブルSSD

関連記事

  1. stacky

    JavaScript

    スライドダウン・スライドアップしてコンテンツを整理できるjQueryプラグイン「stacky」

    stackyというjQueryプラグインを使えばコンテンツをスライドダ…

  2. Presentation Slideshow
  3. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

  4. sticky-items

    JavaScript

    HTML要素をページ上部に固定させれるjQueryプラグイン「sticky-items」

    sticky-itemsは指定したHTML要素をWebページの上部に付…

  5. basicScroll

    JavaScript

    モバイル・デスクトップに対応したパララックススクロール実装「basicScroll」

    basicScrollはモバイル・デスクトップに対応したスタンドアロー…

  6. Changing Background Color while scrolling

最近の記事

  1. ハンガリー産 純粋アカシアはちみつ
  2. COMOLI ダブルレイヤー L/Sクルー
  3. メキシコ オアハカ
  4. ドリップ
  5. チェリー

アーカイブ

PAGE TOP