Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

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内にいつもおなじみののコードを書いてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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

ファイルをダウンロード

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

データを解凍します STEP3

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

データを解凍します

データが入っています。

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

<script type="text/javascript">
$(function () {
    $(".swipebox").swipebox();
});
</script>

非常にシンプルです。

HTMLを設置します STEP5

<div class="box">
    <a href="images/023/01.jpg" class="swipebox">
        <img src="images/023/01.jpg" width="68" height="51">
    </a>
</div>
<div class="box">
  <a href="images/023/02.jpg" class="swipebox">
        <img src="images/023/02.jpg" alt="leap" width="68" height="51">
    </a>
</div>
<div class="box">
  <a href="images/023/03.jpg" class="swipebox">
        <img src="images/023/03.jpg" alt="leap" width="68" height="51">
    </a>
</div>

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

CSSを少し変えます STEP6

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

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

CSSを少し変えます

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

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

<script src="js/023/jquery.swipebox.min.js"></script>
<link rel="stylesheet" href="css/023/swipebox.css">

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

まとめ

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

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

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

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-jQuery

Copyright© Sedori Plan , 2019 All Rights Reserved.