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. Cube-jQuery-Slider

    JavaScript

    3Dキューブなスライダーを実装できる「Cube-jQuery-Slider」

    Cube-jQuery-Sliderは、3Dキューブなスライダーを実装…

  2. Stretchy Navigation

    JavaScript

    ナビゲーションメニューが伸び縮みする「Stretchy Navigation」

    Stretchy Navigationはクリック、タップをすることで伸…

  3. Background Blur

    JavaScript

    画像をボカしてくれるクロスブラウザ対応の「Background Blur」

    Background Blurは画像をカッコよくボカしてくれるクロスブ…

  4. no-image
  5. miSlider

    JavaScript

    複数の画像を表示したりスライドしたりできるスライダー「miSlider」

    miSliderは複数の画像やスライドの表示を可能にするスライダーを実…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP