jQuery 「swipebox.js」を使ってスマホにも対応している画像切り替えをする方法(サンプル付き)

jQuery 「swipebox.js」を使ってスマホにも対応している画像切り替えをする方法(サンプル付き)

LightBox系のプラグインを今まで使っていましたが、Swipeboxは画像を表示しているときにキーボードの矢印で画像を切り替えることが出来るので便利です。

Swipebox

URLhttp://brutaldesign.github.io/swipebox/

photo credit: sinkdd via photopin cc

jQueryを動かすために STEP1

head内にいつもおなじみののコードを書いてください。

ファイルをダウンロード STEP2

ファイルをダウンロード

「Download」がありますのでクリックしてください。
「Download」をクリックするとファイル一式をダウンロードできます。

データを解凍します STEP3

「Download」をサイトからダウンロードして、zipファイルを解凍します。

データを解凍します

データが入っています。

HTMLに実際に動く記述を書きます STEP4

非常にシンプルです。

HTMLを設置します STEP5

<div class=”box”>で一枚一枚の画像を囲って、aタグの中に「class=”swipebox”」をつけてください。

CSSを少し変えます STEP6

自分の環境で作る場合、パスが変わる場合があります。

今回は、icons.pngとloader.gifの画像のパスが変わったので

CSSを少し変えます

imgフォルダのなかに「icons.png」「loader.gif」が入っているのでswipebox.cssの中に記述があるのでパスを変えてください。サンプルと同じフォルダ構成で構築する場合は、パスの変更は必要ありません。

CSSファイルとjsファイルをつけます STEP6

こちらもパスはご自身の環境に合わせてください。

まとめ

[サンプル] Litebox以外の画像切り替えjQuery

スマホにも対応している画像切り替えのプラグインは重宝しそうですね、ぜひ試してみてください。

jQuery 「swipebox.js」を使ってスマホにも対応している画像切り替えをする方法(サンプル付き)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*