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

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

関連記事

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

    JavaScript

    jQueryのbindメソッドとliveメソッドの簡単な違いや使い方

    bindとliveの違いがちょっとわかりずらかったのでまとめてみました…

  2. Jquery Line Progress Bar
  3. megamenu.js

    JavaScript

    レスポンシブでスマートなメガメニューを実装できる「megamenu.js」

    megamenu.jsはjQueryを使ったレスポンシブでスマートなメ…

  4. jcSlider

    JavaScript

    CSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」

    jcSliderは、アニメーションを使用しないスライダーのプラグインで…

  5. notifit

    JavaScript

    多彩なカスタマイズができるシンプルなjQuery通知プラグイン「notifit」

    notifitは多彩なカスタマイズが可能なシンプルな通知機能を実装でき…

  6. no-image

    JavaScript

    軽量・高速でレスポンシブ対応のjQueryスライダー「partialViewSlider」

    partialViewSliderは左右にスライドする軽量・高速でレス…

コメント

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

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

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP