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

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  2. SimpleAccordion

    JavaScript

    シンプルなアコーディオンを実装できるjQueryプラグイン「SimpleAccordion」

    SimpleAccordionは、シンプルなアコーディオンを実装するこ…

  3. Morphext

    JavaScript

    複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」

    MorphextというjQueryプラグインを使えば、複数テキストをア…

  4. Letter Drop

    JavaScript

    雨のように文字が落ちてくるアニメーションのjQueryプラグイン「Letter Drop」

    Letter DropというjQueryプラグインを使えば、雨のように…

  5. Fly to

    JavaScript

    カートに入れた際に飛んでいくエフェクトのjQueryプラグイン「Fly to」

    Fly toは商品をカートに入れた際にカートまで飛んでいくエフェクトを…

コメント

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

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

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP