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});

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

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

Daily Dish写真が映える2カラムのシンプルでスッキリしたWordPressテーマ「Daily Dish」前のページ

円形スライダーで進捗度などを分かりやすく表示できるjQueryプラグイン「Circular Slider」次のページCircular Slider

関連記事

  1. jQuery PieTimer

    JavaScript

    時間の経過とともに円形が欠けていくタイマー「jQuery PieTimer」

    jQuery PieTimerは時間の経過とともに円形のデザインが欠け…

  2. ax5ui-menu

    JavaScript

    カスタマイズしやすいコンテキストメニューを実装できる「ax5ui-menu」

    ax5ui-menuはカスタマイズしやすいシンプルなコンテキストメニュ…

  3. Unicorn.js

    JavaScript

    ホバーするとテキストがレインボーに光るjQueryプラグイン「Unicorn.js」

    おもしろいプラグインがあったのでご紹介します。テキストにホバーするとレ…

  4. Scrolltab

    JavaScript

    スクロール移動させるタブを追加できるjQueryプラグイン「Scrolltab」

    ScrolltabというjQueryプラグインを使えばスクロール移動さ…

  5. jQuery Tooltip Basic

    JavaScript

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

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

  6. Easy Responsive Tabs to Accordion

    JavaScript

    レスポンシブ対応のタブとアコーディオンで切り替わるjQueryプラグイン「Easy Responsi…

    今すぐにでも使いたいjQueryプラグインを見つけたので備忘録。レスポ…

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP