Fluidbox

JavaScript

シンプルで軽快な動作が素敵なLightbox風のjQueryプラグイン「Fluidbox」

FluidboxというjQueryプラグインを使えば、シンプルで軽快な動作が素敵なLightboxのような機能を実装することができます。この手のプラグインは色々ありますが個人的にはとても気に入りました。実際のデモはレスポンシブになっていて、画面の横幅に合わせた画像サイズに最適化されます。

[ads_center]

Fluidboxの使い方

このように見たいサムネイル画像をクリックすると。

Fluidboxの使い方

こんな感じで拡大されます。クイッとした軽快な動作です。素早く画像を確認できる点がいいですね。

Fluidboxの使い方

使い方もとてもシンプルです。

$(function () {
    $("a").fluidbox();
});

マークアップはこんな感じで。

<a href="...">
    <img src="..." alt="" />
</a>

ブログなんかにも取り入れたくなってきちゃいますね。

Fluidbox

関連記事

  1. Text Scramble Effect

    JavaScript

    テキストをスクランブルしながら表示していく「Text Scramble Effect」

    Text Scramble Effectはテキストをカシャカシャとスク…

  2. blurify

    JavaScript

    画像にぼかし効果を実装できる軽量のJSライブラリ「blurify」

    blurifyは画像にぼかし効果を実装することができるJSライブラリで…

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

    JavaScript

    jQueryのeachメソッドのお勉強

    今回はjQueryのeachメソッドを使ってみました。なんかとても便利…

  4. Sal.js

    JavaScript

    Vanilla JSによる軽量のスクロールアニメーションライブラリ「Sal.js」

    Sal.jsは軽量のスクロールアニメーションを実装できるライブラリです…

  5. no-image

    JavaScript

    高性能なイメージビューアを実装できる「PhotoViewer」

    PhotoViewerは高性能なイメージビューアを実装できるJSプラグ…

  6. Before and after slider

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP