Flex-box Gallery

JavaScript

ランダムサイズの画像をかっこいいギャラリーにしてくれる「Flex-box Gallery」

Flex-box Galleryは、ランダムサイズによる画像たちをかっこいいギャラリーにしてくれるjQueryプラグインです。使い方もこれ以上ないくらいシンプルなので、手軽にいい感じのギャラリーを実装することができます。

Flex-box Gallery

デモ

デモではサイズがバラバラの複数の画像がキレイに整列されています。各サムネイルの縦サイズが統一されているので、無駄なスペースも生まれずとてもキレイにまとまっていますね。

Googleの画像検索で出てくる一覧に近い感じです。

サムネイルをクリックすると、大きい画像を単体で見ることができます。背景にはオーバーレイがかかるので、じっくり画像に集中することが可能です。拡大された画像は、再度クリックすることで元のギャラリーの一覧に戻ります。

また、デモはレスポンシブにも対応しています。ブラウザ幅を縮小していくと、それに合わせて横に並ぶ画像の数も変化していきます。

さまざまなデバイスからでも最適なレイアウトになるように可変するので、とても便利ですね。

それから、デモページには実際のコードも記述されています。コードを見ると分かると思いますが、マークアップや使い方はとても簡単です。画像群は「container」というid名を付与したdivで括り、各imgタグをfigureタグで括ります。

あとはプラグインをセットするだけという手軽さです(jQueryやプラグインなどのファイルは読み込んでおく必要があります)。

Flex-box Gallery

関連記事

  1. Monthly.js

    JavaScript

    レスポンシブに対応したカレンダーを実装できる「Monthly.js」

    Monthly.jsはレスポンシブに対応したシンプルで美しいカレンダー…

  2. Holmes

    JavaScript

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

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

  3. InlineTweet.js

    JavaScript

    Webページのテキストにツイートリンクを作成できる「InlineTweet.js」

    InlineTweet.jsはWebページのテキストにツイートリンクを…

  4. jQuery Equal Height

    JavaScript

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

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

  5. no-image
  6. plusGallery

    JavaScript

    Google+のような画像ギャラリーを実装できる「plusGallery」

    plusGalleryはGoogle+のような画像ギャラリーを実装する…

最近の記事

  1. ACC-TRBX
  2. ピスタチオ クリスマス ツリー フラペチーノ
  3. SF-G64T
  4. USB Type-C搭載ドッキングステーション

Facebookページ

PAGE TOP