おすすめグッズや役立つ情報ブログ

Sedori Plan

jQuery

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

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

スポンサーリンク
  • この記事を書いた人
  • 最新記事

toney

サイトの構築、プログラムを制作をしていますtoneyと申します。中小企業、個人のホームページの制作、更新作業も承ります。 筋トレで自分を追い込んでいくのが楽しみです。最近マラソンにはまって2年連続名古屋シティマラソンに出ました。

-jQuery

Copyright© Sedori Plan , 2018 All Rights Reserved.