flexImages

JavaScript

軽量でFlickrやGoogle画像検索のようなギャラリーのjQueryプラグイン「flexImages」

flexImagesというjQueryプラグインを使えば、軽量でレスポンシブに対応したギャラリーを実装することができます。FlickrやGoogle画像検索のようなレイアウトが可能です。画像や動画などを並べることができます。

[ads_center]

flexImagesの使い方

ダウンロードや詳細、もしくは実際のデモは以下から確認することができます。

flexImages

flexImages

使い方は、必要なファイルを読み込んだ状態で以下のようにHTMLを記述します。

<div class="flex-images">
    <div class="item" data-w="200" data-h="150"><img src="img1.jpg"></div>
    <div class="item" data-w="300" data-h="150"><img src="img2.jpg"></div>
    <div class="item" data-w="100" data-h="150"><img src="img3.jpg"></div>
    <!-- 中略 -->
</div>

JSを記述してプラグインをセット。

$('.flex-images').flexImages({rowHeight: 140});

これで高さが揃ったフレキシブルなグリッドレイアウトを簡単に実装することができます。

レスポンシブ対応で画像や動画を綺麗に整列させたギャラリーを表示させたい時には覚えておきたいですね。

関連記事

  1. JavaScript

    360度画像を回転させるjQueryプラグイン10

    画像を360度回転させて見せることができる素敵なjQueryプラグイン…

  2. AOS

    JavaScript

    スクロールに合わせていろんなアニメーションで表示できる「AOS」

    AOSはスクロールに合わせてフェードやフリップ、ズームなどのアニメーシ…

  3. zelect

    JavaScript

    セレクトボックスをカスタマイズして使いやすくしてくれる「zelect」

    zelectはセレクトボックスをユーザーが使いやすくなるようにカスタマ…

  4. evol-colorpicker

    JavaScript

    マイクロソフト オフィス2010のようなカラーピッカー「evol-colorpicker」

    evol-colorpickerは、マイクロソフト オフィス2010の…

  5. jquery-backToTop

    JavaScript

    カスタマイズ性に優れたトップへ戻るボタンを実装できる「jquery-backToTop」

    jquery-backToTopはカスタマイズ性に優れた「トップへ戻る…

  6. Vertical Timeline

    JavaScript

    垂直型のシンプルなタイムラインを実装できるjQueryプラグイン「Vertical Timeline…

    Vertical Timelineは、垂直型のシンプルなタイムラインを…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP