[JS]Lightbox のように画像を拡大表示して、スワイプ操作でスライドできるjQuery プラグイン「Swipebox」
スポンサード
スポンサード
スマホやiPad などのタブレット向けに最適化されたレスポンシブWEBデザイン対応のサイトで、Lightbox のような画像の見せ方を実装したい場合に便利なプラグイン「Swipebox」のご紹介です。
Swipebox は単体画像をLightbox 風に表示できるのはもちろん、複数枚の画像の切り替え表示をスワイプ操作で出来る点が秀逸です。
目次
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 枚の画像を拡大表示させるサンプルです。1 2 | <a href="./images.jpg" class="swipebox" title="Swipebox で画像を拡大表示"> <img src="./images_s.jpg"></a> |
拡大表示させたい画像のリンクタグに .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
に統一し、画像を複数枚数配置するだけです。
スワイプ操作でスライドするデモ
スポンサード
コメント