flipLightBox

JavaScript

フリップ効果が特徴的なレスポンシブ対応のLightbox風jQueryプラグイン「flipLightBox」

レスポンシブ対応のLightbox風jQueryプラグイン「flipLightBox」がよさそうだったのでメモがてらご紹介します。クリックした画像はフリップで表示されます。違和感のないさりげないエフェクトがとても素敵ですね。画面の下部には上に向かってテキストバーがスライド表示されます。

[ads_center]

使い方

flipLightBox

見た目もシンプルで使いやすそうですね。前後のナビゲーションリンクはテキストバーのところに表示されます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="fliplightbox/fliplightbox.min.js"></script>
<script type="text/javascript">
$('body').flipLightBox()
</script>

aタグにはflipLightBoxというクラス名を付与します。

<a href="lightbox-image.jpg" class="flipLightBox">サムネイル画像など<span>サンプルテキスト</span></a>

オプションではフリップのスピードやボーダーカラーを設定できます。

$('body').flipLightBox({
    lightbox_flip_speed: 500,
    lightbox_border_color: '#666666'
})

レスポンシブな画像ギャラリーを作る際によさそうですね。

関連記事

  1. CollagePlus

    JavaScript

    画像を綺麗に整列させるjQueryプラグイン「CollagePlus」

    画像を綺麗に整列させる便利なjQueryプラグイン「CollagePl…

  2. Skitter

    JavaScript

    豊富なアニメーションでカスタマイズ性に優れたスライドショーを実装できる「Skitter」

    Skitterは豊富なアニメーションでカスタマイズ性に優れたスライドシ…

  3. Tabby

    JavaScript

    軽量でシンプルなタブメニューを実装できるjQueryプラグイン「Tabby」

    とても軽量でシンプルなタブメニューを実装できるjQueryプラグイン「…

  4. jQuery Seat Charts
  5. jQuery toTop()

    JavaScript

    シンプル・軽量でカスタマイズもできる滑らかなスクロール「jQuery toTop()」

    jQuery toTop()はトップへ行くための滑らかなスクロールを実…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP