Swipebox

JavaScript

スマホやタブレットのスワイプにも対応したLightboxを実装できるjQueryプラグイン「Swipebox」

今後かなり需要がありそうなjQueryプラグインがあったので使い方も兼ねてご紹介します。PCでの動作はもちろん、スマホやタブレットのスワイプ機能にも対応したLightboxを実装できるjQueryプラグイン「Swipebox」です。スマートフォンを使っているとやっぱりどうしてもスワイプで画像をスライドしたくなっちゃいますもんね。以下、使い方です。

[ads_center]

使い方

head内にjQuery本体とダウンロードしたプラグインを読み込みます。プラグインファイルはjquery.swipebox.js(minバージョンでもOK)の他にもswipebox.cssも読み込む必要があります。

<link rel="stylesheet" href="swipebox.css">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery.swipebox.js"></script>
<script type="text/javascript">
jQuery(function($) {
    $(".swipebox").swipebox();
});
</script>

HTMLもこのようにとてもシンプルです。

<a href="images/img01.jpg" class="swipebox" title="タイトル01">
	<img src="images/img-s-01.jpg" alt="image">
</a>
<a href="images/img02.jpg" class="swipebox" title="タイトル02">
	<img src="images/img-s-02.jpg" alt="image">
</a>
<a href="images/img03.jpg" class="swipebox" title="タイトル03">
	<img src="images/img-s-03.jpg" alt="image">
</a>

オプションは以下のように指定できます。

jQuery(function($) {
    $(".swipebox").swipebox({
        useCSS : true,
        hideBarsDelay : 6000
    });
});

hideBarsDelayはアニメーションバーが非表示になる時間を指定することができます。数値を小さくすると非表示になる時間が短くなり、数値を高くすると非表示になる時間が長くなります。

スマホやタブレットでの画像閲覧時にスワイプ機能をつけたいという方は覚えておいて損はないプラグインですね。

RefineSlide多数のエフェクトが素敵!レスポンシブ対応のjQueryスライダー「RefineSlide」前のページ

Macの定番ランチャーアプリ「Alfred」を使ってみた次のページ

関連記事

  1. Warp drive jQuery plugin
  2. fullPage.js

    JavaScript

    フルページでコンテンツごとにスクロールする「fullPage.js」

    fullPage.jsはフルページでコンテンツごとにスクロールするレス…

  3. Crosscover

    JavaScript

    多彩なアニメーションがいい!シンプルで使いやすいjQueryイメージカルーセル「Crosscover…

    Crosscoverはシンプルで多彩なアニメーションが魅力的なイメージ…

  4. Tag-it

    JavaScript

    サジェスト機能を搭載したタグ編集ウィジェット「Tag-it」

    Tag-itはサジェスト機能を搭載したjQuery UIプラグインによ…

  5. jQuery Lighter

    JavaScript

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

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

  6. Add To Cart Interaction

コメント

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

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

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP