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

    シンプルでカスタマイズも簡単にできるjQueryプラグイン「Twitter Follow Box W…

    とてもシンプルでカスタマイズもしやすいjQueryプラグイン「Twit…

  2. Erge Drop Down Menu Control
  3. Intense Images
  4. JavaScript

    サムネイルをクリックして拡大画像が見れるレスポンシブ対応のjQuery画像ギャラリー「Superbo…

    綺麗に並んだサムネイル画像をクリックして拡大画像を見ることができるjQ…

  5. JavaScript

    画像をボックス単位に分割してスライドさせていくjQueryプラグイン「Maskify Slider」…

    とてもお洒落なjQueryのイメージスライダーがあったのでご紹介します…

  6. jQuery Resizable Columns

    JavaScript

    テーブルの列の幅をドラッグでサイズ変更できる「jQuery Resizable Columns」

    じっくりテーブル内の情報を見たい時なんかに便利そうですね。テーブルの列…

最近の記事

  1. 梅しば
  2. BM-IBCDH13RD
  3. 雪
  4. ホットのドリップ
  5. めんたいこ&チーズ味 海老せんべい

アーカイブ

PAGE TOP