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

    jQueryの基本的なセレクターを適当に試してみる

    自分の勉強用としてちょっと適当に試してみました。jQueryの基本のセ…

  2. Auto-Text-Scroll

    JavaScript

    自動でテキストが垂直にスクロールしていく「Auto-Text-Scroll」

    Auto-Text-Scrollは自動でテキストが垂直でスクロールして…

  3. Hero slider

    JavaScript

    レスポンシブで横幅フルサイズのスライダーを実装できる「Hero slider」

    Hero sliderはレスポンシブに対応した横幅フルサイズのスライダ…

  4. Flex-Slider-jQuery

    JavaScript

    シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

    Flex-Slider-jQueryは、フレキシブルなスライダーを実装…

  5. ClickSpark.js

    JavaScript

    美しいパーティクルエフェクトを実装できる「ClickSpark.js」

    ClickSpark.jsは画像を用いたたくさんの粒子が放出されるよう…

  6. Fixit

    JavaScript

    要素を特定の位置に固定できるjQueryプラグイン「Fixit」

    Fixitは要素を特定の位置に固定することができるjQueryプラグイ…

コメント

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

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

最近の記事

  1. RICOH THETA SC2
  2. 簡易アクセス
  3. SOUNDLINK MINI II Special Edition

アーカイブ

PAGE TOP