no-image

JavaScript

グリッドレイアウトによるシンプルで軽量なギャラリー「Grid Gallery」

Grid Galleryはグリッドレイアウトによるシンプルで軽量なイメージギャラリーを実装できます。レスポンシブにも対応し、スッキリしたデザインが見やすく操作性もシンプルでとても良好です。Lightbox機能も備えています。

Grid Gallery

デモ

デモでは美しい画像がグリッドレイアウトで綺麗に並べられています。レスポンシブに対応しているので画面の横幅を縮小・拡大していくと、それに合わせて1列に並べられる画像の数も変わっていきます。

任意のサムネイル画像をクリックすると、その画像が拡大表示されます。拡大時には前後の画像に移動できる左右矢印ボタンやクローズボタンが設置されています。矢印ボタンからだけではなく、キーボードの左右キーからでも前後の画像に移動することが可能です。

クリーンでミニマルなデザインなので、画像がとても映えますね。マークアップ・使い方ともにこちらもシンプルで実装しやすいので、気になる人はぜひチェックしてみてください。

Grid Gallery

関連記事

  1. characterCounter

    JavaScript

    文字数のカウントや制限ができるjQueryプラグイン「characterCounter」

    characterCounterは文字数をカウントしてくれるシンプルな…

  2. jQuery Resizable Columns

    JavaScript

    テーブルの列の幅をドラッグでサイズ変更できる「jQuery Resizable Columns」

    じっくりテーブル内の情報を見たい時なんかに便利そうですね。テーブルの列…

  3. Granim.js

    JavaScript

    流れるように変化するグラデーションのアニメーションを実装できる「Granim.js」

    Granim.jsは美しく変化するグラデーションのアニメーションを実装…

  4. MoveTo

    JavaScript

    軽量なスムーススクロールを実装できるJSライブラリ「MoveTo」

    MoveToは軽量(圧縮版で1KBほど)なスムーススクロールを実装する…

  5. no-image

    JavaScript

    シンプルで軽量なスクロールアニメーション実装「animateMePlz」

    animateMePlzはシンプルで軽量なスクロールアニメーションを実…

  6. Timeliny

    JavaScript

    レスポンシブ対応の年ベースによるjQueryタイムライン「Timeliny」

    Timelinyはレスポンシブに対応した年ベースによるタイムラインを実…

最近の記事

  1. NIB2600
  2. Anker PowerPort Atom PD 4
  3. USB-2H401BKN
  4. Dyson Pure Cool Me
  5. ルック セレクション

アーカイブ

PAGE TOP