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. no-image

    JavaScript

    カードを入れ替えるような3Dアニメーションによるスライダー「stack-slider」

    stack-sliderはカードを入れ替えるような3Dアニメーションに…

  2. TabbedContent
  3. Bootstrap Navbar Sidebar

    JavaScript

    サイドに固定できるナビゲーション実装「Bootstrap Navbar Sidebar」

    Bootstrap Navbar Sidebarは、サイドに固定できる…

  4. jQuery.mousetip

    JavaScript

    マウスの動きや位置に追従してくるツールチップを実装できる「jQuery.mousetip」

    jQuery.mousetipはマウスの動きや位置に追従してくる軽量の…

  5. jQuery Lighter

    JavaScript

    優雅なフェードで拡大縮小されるLightbox系ギャラリー・jQuery Lighter

    jQuery Lighterは美しいフェードで画像を拡大縮小させること…

  6. AOS

    JavaScript

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

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

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP