今後かなり需要がありそうな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はアニメーションバーが非表示になる時間を指定することができます。数値を小さくすると非表示になる時間が短くなり、数値を高くすると非表示になる時間が長くなります。
スマホやタブレットでの画像閲覧時にスワイプ機能をつけたいという方は覚えておいて損はないプラグインですね。
