[JS]Lightboxのように画像を拡大表示してスワイプ操作でスライドできるjQueryプラグインSwipebox

jQueryプラグイン・ライブラリ

2013.11.25

スマホやiPadなどのタブレット向けに最適化されたレスポンシブWEBデザイン対応のサイトで、Lightboxのような画像の見せ方を実装したい場合に便利なプラグインSwipeboxのご紹介です。

Swipeboxは単体画像をLightbox 風に表示できるのはもちろん、複数枚の画像の切り替え表示をスワイプ操作で出来る点が秀逸です。

Swipebox のインストール
Swipebox の設置
Swipebox で画像単体を拡大表示
Swipebox で複数枚の画像を拡大表示させて、スワイプ操作でスライドさせる

Swipebox のインストール

以下のページよりSwipeboxのファイルをダウンロードします。
Swipebox

Swipebox の設置

<head> 内にjquery ファイルと一緒にjquery.swipebox.jsファイルを設置します。

<link rel="stylesheet" href="./swipebox.css">
<script src="./jquery.min.js"></script>
<script src="./jquery.swipebox.js"></script>
<script>
$(window).load(function() {
	$('.swipebox').swipebox();
});
</script>

$(window).load(function() {

$('.swipebox').swipebox();

});

</script>

セレクタの.swipeboxは何でも構いませんが、HTML側で記述するリンクタグのクラス名と同じモノにしておきます。

Swipebox で画像単体を拡大表示

まずは1 枚の画像を拡大表示させるサンプルです。

拡大表示させたい画像のリンクタグに.swipeboxを指定します。

Swipebox で画像単体を拡大表示

Swipebox で複数枚の画像を拡大表示させて、スワイプ操作でスライドさせる

続いてiPhone やiPad での閲覧時に、複数枚の画像を拡大表示させて「スワイプ操作」でスライドさせるサンプルです。

<a href="./images1.jpg" class="swipebox" title="スワイプ操作でスライド">
<img src="./images1_s.jpg"></a>
<a href="./images2.jpg" class="swipebox" title="スワイプ操作でスライド">
<img src="./images2_s.jpg"></a>
<a href="./images3.jpg" class="swipebox" title="スワイプ操作でスライド">
<img src="./images3_s.jpg"></a>