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. plusGallery

    JavaScript

    Google+のような画像ギャラリーを実装できる「plusGallery」

    plusGalleryはGoogle+のような画像ギャラリーを実装する…

  2. JavaScript

    シンプルで軽量のレスポンシブなjQueryスライダー「ResponsiveSlides.js」を使っ…

    とてもシンプルで使いやすそうなレスポンシブのjQueryスライダー「R…

  3. Fluidbox

    JavaScript

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

    FluidboxというjQueryプラグインを使えば、シンプルで軽快な…

  4. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2013年上半期に紹介したjQueryプラグイン50選まとめ

    気づいたらあっという間に2013年上半期が終わってしまいましたね。とい…

  5. no-image
  6. Grasp Mobile Progress Circle

コメント

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

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

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP