no-image

JavaScript

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

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

Grid Gallery

デモ

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

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

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

Grid Gallery

関連記事

  1. Emergence.js

    JavaScript

    ブラウザで要素の可視性を検出する「Emergence.js」

    Emergence.jsは、ブラウザで要素の可視性を検出することができ…

  2. spzoom

    JavaScript

    シンプルで使いやすい画像ズームを実装できるjQueryプラグイン「spzoom」

    spzoomはシンプルな操作性で使いやすい画像ズーム機能を実装できるj…

  3. okzoom

    JavaScript

    レンズで拡大するように画像の細部をマウスオーバーでズームできる「okzoom」

    okzoomは画像細部をマウスオーバーでズームすることができるjQue…

  4. Image Figure Caption effects
  5. A simple DIY responsive image slideshow
  6. Viewer

    JavaScript

    画像の拡大や縮小、回転などができるイメージギャラリー「Viewer」

    Viewerは画像の拡大や縮小、回転、上下左右の切り替えといった機能を…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP