Fluidbox

JavaScript

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

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

[ads_center]

Fluidboxの使い方

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

Fluidboxの使い方

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

Fluidboxの使い方

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

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

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

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

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

Fluidbox

WordPressでパンくずリストを設置WordPressでパンくずリストをプラグインなしで設置する簡単なやり方前のページ

jQueryを使わないでコードを書くTips集次のページjQueryを使わないコード集

関連記事

  1. Custom Carousel

    JavaScript

    カードスタイルのカルーセル・スライダー実装「Custom Carousel」

    Custom Carouselはカードスタイルによるシンプルなカルーセ…

  2. jsPanel

    JavaScript

    高度なセッティングができるフローティングパネルやモーダルウィンドウ実装「jsPanel」

    jsPanelは高度なセッティングができるフローティングパネル、モーダ…

  3. Schedule Template

    JavaScript

    シンプルなスケジュール表を実装する「Schedule Template」

    スッキリしたデザインのシンプルなスケジュールテンプレートを実装するため…

  4. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

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

    JavaScript

    jQueryでJavaScriptのfor…inを使ってオブジェクトから値を1つずつ取り…

    JavaScriptにはfor...inというプロパティの数だけ繰り返…

  6. Materialize Tags

    JavaScript

    マテリアルデザインのタグ管理を実装できる「Materialize Tags」

    Materialize Tagsは、マテリアルデザインのタグ管理を実装…

最近の記事

  1. Anker PowerWave Pad Alloy
  2. Anker Bolder LC30
  3. BG-R10

アーカイブ

PAGE TOP