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. Points Of Interest

    JavaScript

    各ポイントごとにクリックで詳細文を表示させるjQuery「Points Of Interest」

    Points Of Interestはサイト内に設置した各ポイントを…

  2. JavaScript

    ぼかし背景を画像から作成できるjQueryプラグイン「Blurr」

    BlurrというjQueryプラグインを使えば、ぼかし背景を画像から簡…

  3. jQuery Text Fade Delay
  4. circleChart

    JavaScript

    多彩なカスタマイズができる円形チャート「circleChart」

    circleChartは多彩なカスタマイズを実現した円形チャートを実装…

  5. Bara-Bones-Slider

    JavaScript

    優れたカスタマイズ性を有するjQueryスライダー「Bara-Bones-Slider」

    Bara-Bones-Sliderは、優れたカスタマイズ性を有するイメ…

  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでパターン化されたクラス名をループで1つずつ取り出して処理する

    どうでもいい内容なんですがちょっとやりたかったのでメモです。jQuer…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP