no-image

JavaScript

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

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

Grid Gallery

デモ

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

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

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

Grid Gallery

Jquery-Slider水平の画像タイムラインを実装できる「Jquery-Slider」前のページ

シンプルで可愛いCSSローディングアニメーション「Three Dots」次のページThree Dots

関連記事

  1. jQuery Responsive Tabs
  2. ScrollPress

    JavaScript

    スムーズなアニメーションのスクロールトップ実装「ScrollPress」

    ScrollPressは、スムーズなアニメーションによるスクロールトッ…

  3. Holmes

    JavaScript

    ページ内で特定のテキストを高速に検索してくれるライブラリ「Holmes」

    Holmesは、ページ内部を簡単にかつ高速に検索してくれるライブラリで…

  4. jQuery Equal Height

    JavaScript

    異なる要素の高さを揃えてくれる「jQuery Equal Height」

    jQuery Equal Heightは、異なる要素の高さをキレイに揃…

  5. JavaScript

    1つのテキストリンクから複数のリンク先が表示される「μllinx」

    μllinx(mullinx)は1つのテキストリンクから複数のリンク先…

  6. no-image

    JavaScript

    立体的なナビゲーションメニューを実装できる「Sidebar Menu Concept」

    Sidebar Menu Conceptは立体的なナビゲーションメニュ…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6

アーカイブ

PAGE TOP