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. roundSlider

    JavaScript

    値の範囲を円形スライダーで表示できる「roundSlider」

    roundSliderは値の範囲を円形スライダーで表示できるjQuer…

  2. ContentTools

    JavaScript

    画面内でそのまま編集できるWYSIWYGエディタ「ContentTools」

    ContentToolsは画面内でそのままコンテンツを編集できるWYS…

  3. Cavendish.js

    JavaScript

    CSS transitionsを活用したシンプルなスライドショーを実装できるjQueryプラグイン「…

    CSS transitionsを活用したシンプルなスライドショーを実装…

  4. jQuery Tooltip Basic

    JavaScript

    カスタマイズしやすいツールチップ実装「jQuery Tooltip Basic」

    jQuery Tooltip Basicは、カスタマイズしやすいツール…

  5. JavaScript

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラグイン「SHARDS」

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラ…

  6. Listt

    JavaScript

    リストをiOSのようにアニメーションできるjQueryプラグイン「Listt」

    ListtはリストをiOSのセレクトボックスのようにアニメーションさせ…

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP