Flex-box Gallery

JavaScript

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

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

Flex-box Gallery

デモ

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

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

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

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

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

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

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

Flex-box Gallery

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

軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」次のページTippy.js

関連記事

  1. Typed.js

    JavaScript

    プログラムを入力するようにタイプするエフェクトを実装できる「Typed.js」

    Typed.jsは、プログラムを入力するように文字をタイプしてくれるエ…

  2. Material ScrollTop Button
  3. Multipicker

    JavaScript

    要素を選択するときに直感的な操作を実現する「Multipicker」

    Multipickerは、日付や曜日、番号、その他さまざまな要素を選択…

  4. Ziehharmonika

    JavaScript

    かっこいいアコーディオンを実装できる軽量のjQueryプラグイン「Ziehharmonika」

    アニメーションがとてもクールでかっこいいアコーディオンを実装することが…

  5. no-image

    JavaScript

    シンプルなバナースライドショーを実装できる「jsslider」

    jssliderはシンプルなバナースライドショーを実装できるjQuer…

  6. Blindify

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP