スマホやiPadなどのタブレット向けに最適化されたレスポンシブWEBデザイン対応のサイトで、Lightboxのような画像の見せ方を実装したい場合に便利なプラグインSwipeboxのご紹介です。
Swipeboxは単体画像をLightbox 風に表示できるのはもちろん、複数枚の画像の切り替え表示をスワイプ操作で出来る点が秀逸です。
Swipebox のインストール
以下のページよりSwipeboxのファイルをダウンロードします。Swipebox
Swipebox の設置
<head> 内にjquery ファイルと一緒にjquery.swipebox.jsファイルを設置します。|
1 2 3 4 5 6 7 8 |
<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> |
セレクタの.swipeboxは何でも構いませんが、HTML側で記述するリンクタグのクラス名と同じモノにしておきます。
Swipebox で画像単体を拡大表示
まずは1 枚の画像を拡大表示させるサンプルです。
拡大表示させたい画像のリンクタグに.swipeboxを指定します。
Swipebox で画像単体を拡大表示
Swipebox で複数枚の画像を拡大表示させて、スワイプ操作でスライドさせる
続いてiPhone やiPad での閲覧時に、複数枚の画像を拡大表示させて「スワイプ操作」でスライドさせるサンプルです。|
1 2 3 4 5 6 |
<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> |
基本的にはリンクのクラスを.swipeboxに統一し、画像を複数枚数配置するだけです。
スワイプ操作でスライドするデモ
コメント