• RSS

[JS]Lightbox のように画像を拡大表示して、スワイプ操作でスライドできるjQuery プラグイン「Swipebox」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

Swipebox のインストール

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


Swipebox の設置

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

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


Swipebox で画像単体を拡大表示

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

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

Swipebox で画像単体を拡大表示


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

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

基本的にはリンクのクラスを .swipebox に統一し、画像を複数枚数配置するだけです。

スワイプ操作でスライドするデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください