説明書は読まないタイプの人は
自動でスライド！フリック操作も可能なスマホ用横スクロール画像ギャラリーのデモ
からデモ見るかファイルダウンロードしてください。

まえがき

昨今スマートフォンが普及するにつれてスマートフォンサイトの案件が増えてきています。
スマートフォンサイトでもやっぱりトップページに画像ギャラリーを設置したいという要望は多いですね。
この前、クライアントからこんな要望を受けました。
「横スクロール型の画像ギャラリーでフリック操作可能なものを設置したい。あっあと自動再生も！」
必死に探したんですがまぁ見つからない。横スクロール型の画像ギャラリーはたくさんあるけど自動再生機能が付いてない！
なのでその辺からよさげなスクリプトを拾ってちょっと手を加えて対応しました。
折角なのでそれ公開します。

jqueryです。

スマホ用画像ギャラリーのデモとファイル

名前が長すぎるのは置いといて、せっかちさんのためにデモのリンクとダウンロードリンクおいときます。

デモ
スマホで確認して欲しいので一応QRコードもはっときます。（PCでも見れるけど）

ダウンロード(394KB)

導入方法

多分ファイルをダウンロードして中身を見てもらえれば全然分かると思うけど一応説明しておきますね。

cssファイルとjsファイルの読み込み

とりあえずファイルをダウンロード(394KB)します。
このプラグインのコアファイルはダウンロードしたファイルを解凍した中のcssフォルダの「spslider.css」とjsフォルダの「spslider-base.js」「spslider-slider.js」です。
これを自分のサイトのディレクトリにコピーしてHTMLの</head>より前で普通に読み込んでください。

また、このプラグインはjqueryで動くのでプラグインのjsよりも前でjqueryを読み込んでください。

jquery

読み込むタグはこんな感じになります。

<link rel="stylesheet" type="text/css" href="css/spslider.css" media="all" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/spslider-base.js"></script>
<script type="text/javascript" src="js/spslider-slider.js"></script>

パスは適宜変更してください。

画像ギャラリーを設置

画像ギャラリーを設置したいところにタグを挿入します。

<div id="slider_fsp" class="wide_slider_fsp">
  <div class="slider_body_fsp">
    <ul>
      <li><a href="http://google.com" target="_blank"><img src="images/page01.jpg" alt="PandY01" /></a></li>
      <li><img src="images/page02.jpg" alt="PandY02" /></li>
      <li><img src="images/page03.jpg" alt="PandY03" /></li>
      <li><img src="images/page04.jpg" alt="PandY04" /></li>
      <li><img src="images/page05.jpg" alt="PandY05" /></li>
    </ul>
  </div>
  <div class="slider_navi_fsp">
    <ul>
      <li>1</li>
    </ul>
  </div>
</div>

「slider_body_fsp」の子要素の「li」がスライドします。
画像のパスは適宜変更してください。
もちろん画像にリンクをはることも可能です。

      <li><a href="http://google.com" target="_blank"><img src="images/page01.jpg" alt="PandY01" /></a></li>

「slider_navi_fsp」はデモで画像ギャラリーの直ぐ下に表示されているナビゲーションです。
ここの「li」の数はスクリプトで画像の数と同じになるように書き換えを行います。
とりあえずで「ul」と「li」を入れておきましょう。
（「ul」と「li」を消してしまうとナビゲーションが表示されなくなります）

基本はこれだけです。

画像の大きさや自動スライド機能の有無等の設定

必要最低限の設定は簡単に出来るようにしてあります。
しかし、なんといってもKoToRiはプログラマーではないので過度な期待はしないでください笑

画像の大きさの設定

画像の大きさは「spslider.css」で変更できます。
コメントを入れてありますが分からない人用に一応コードのせときます。

.slider_body_fsp {
    height: 480px; /*画像の高さ*/
    position: relative;
    width: 100%;
	background:#000000;
}
.slider_body_fsp ul {
    display: block;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 333;
	margin-left:0;
}
.slider_body_fsp ul li {
    width: 640px; /*画像の横幅*/
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    visibility: hidden;
}

2行目で表示したい画像の高さを指定します。
そして、16行目で表示したい画像の横幅を指定します。

ナビゲーションの画像の設定

ナビゲーションの画像も「spslider.css」の最後のほうで定義してあります。

.slider_navi_fsp ul li {
    display: inline-block;
    height: 21px;
    margin: 5px 16px;
    width: 21px;
}
.slider_navi_fsp ul li.selected_fsp span {
	background: url(../images/pagenavi_ico_on.png) no-repeat 0 0;
	background-size:contain;
}
.slider_navi_fsp ul li span{
	background: url(../images/pagenavi_ico.png) no-repeat 0 0;
	background-size:contain;
	cursor: pointer;
	display: inline-block;
	height: 100%;
	overflow: hidden;
	width: 100%;
	text-indent:-9999px;
	vertical-align: top;
}

「.slider_navi_fsp ul li.selected_fsp span」に指定してある背景画像がアクティブ時の画像で
「.slider_navi_fsp ul li span」に指定してある背景画像が通常時の画像です。
ナビゲーションボタンの大きさ等は「.slider_navi_fsp ul li」に定義しているスタイルをいじってください。

自動スライド機能の有無やスライド速度等の設定

動きの部分の設定は「spslider-slider.js」の最初の方で設定します。
これもコメント入れてありますが一応コードのせときます。

var movespeed1 = 400; //自動スライド時の移動速度 msec
var movespeed2 = 400; //フリック時の移動速度 msec
var timerspan = 4000; //自動スライドの間隔 msec
var autoplay = true; //自動スライドさせる？させない場合はfalse

各プロパティの説明はほんとコメントの通りで補足すらないのですが
あえて言うと上２つのプロパティの移動速度というのは画像の移動速度です。
それくらい分かるか笑

更新履歴

2013.12.08 iPhone5cで正常に閲覧できない問題を修正しました。

まとめ

いつも思うのは次から次に出てくる新しい技術にどんどん対応していかなきゃいけないのが凄く大変ということ。
スマホ用サイトもそうだし、タブレットも視野にいれてレスポンシブでってなったらかなりメンドクサイ。
それにRetinaディスプレイは解像度が高すぎて従来の作り方で作成したサイトは画像がボケる。（Retinaで画像がぼやけることについては解決策の記事書きましたので良かったらどうぞ）
でも、本当はめんどくさがってはいけない。
技術が進歩するのは非常にすばらしいことだし、新しい技術を身につけることはすばらしいこと。
とか考えるけどやっぱり心のどっかでメンドクサイって思ってる自分がいます。
きっとこれを乗り越えて無心でただただ情熱を注げるようになったらKoToRiの次のステージが待っているのだと思います。

そうだと信じて努力を続けていこうと思いますが、とりあえず
他に横スクロール型の画像ギャラリーでフリック操作可能なものがあったら教えてください。あっあと自動再生も！笑