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

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

iAntivirus(アイアンチウイルス)Macのウイルス対策ソフトにノートンの「iAntivirus(アイアンチウイルス)」を入れてみた前のページ

iPhoneでWebサイトのソースコードを閲覧・編集できる便利なアプリ「ScriptBrowserPlus」次のページ

関連記事

  1. JavaScript

    スライドアニメーションが素敵なjQueryスライダー「Slideshow with jmpress.…

    とても素敵なスライドアニメーションを実装することができるjQueryス…

  2. StellarNav.js

    JavaScript

    レスポンシブで多階層に対応したドロップダウンメニュー「StellarNav.js」

    StellarNav.jsはjQueryによるレスポンシブで多階層に対…

  3. NavSync

    JavaScript

    ナビゲーションとコンテンツが連動するjQueryプラグイン「NavSync」

    NavSyncはナビゲーションとコンテンツが連動してアニメーションする…

  4. anchor.js

    JavaScript

    ページ内リンクをスムーズにスクロール移動できるjQueryプラグイン「anchor.js」

    anchor.jsはページ内リンクをスムーズなスクロールで移動すること…

  5. Bootstrap Mobile FullScreen Modal

コメント

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

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

最近の記事

  1. ライオン システマ 超コンパクト ふつう
  2. タリーズ ハムチーズ&サラダサンド
  3. クリニカのY字タイプのフロス
  4. 日和山公園の桜
  5. 成城石井 フレンチロースト

アーカイブ

PAGE TOP