【jQuery Slider Pro】レスポンシブに画像のサイズを切り替えるオプションの操作

Slider Proはオプション設定を使えば、レスポンシブに画像そのものを切り替えることができる。

しょっちゅう使わせてもらうプラグインなので備忘録。

画像のスライダー機能を搭載するためのjQueryプラグインのひとつ「Slider Pro」は、とても高機能だけど設置は簡単ってこともあってリッチなサイトを制作するのにすごく重宝します。
当サイトでもトップページでも、なにげに使わせていただいてます^_^;

設置のためのノウハウや、様々な表示オプションなどについての解説をしてくださってるサイトも多いので、導入自体に困ることはそんなにないでしょう。

Slider Proについてや設置方法の参考サイト例：

クールでカッコイイいろんな機能満載のスライダ

で、このプラグインすごくたくさんのオプション機能もついてるので高機能なんですが、そのオプション設定などについて日本語の解説ってまだあんまり情報がないんですよね。

さしあたって困ったのが、PC版で作ったバナー画像をスマホでレスポンシブに見た場合にそのまんま縮小されちゃうので文字とか入ってると判読しにくくなっちゃうこと。
リアルに老眼になってもたボクは常に目をショボショボしなくてはいけなくなる（泣）

でオプションで画像を切り替えることはできるであろうーということはわかったんですが、実際にどのように設定したらいいのかまったくわからん。

で、いろいろ調べた結果（本家のドキュメントでたまたまRetinaディスプレイの対応をつらつら見てた時に偶然見つけたんですが（笑）…）、ブレークポイントをオプションで設定し、そのサイズに対応する画像をdata-○○で指定すれば良いのだーということがわかりました。

以下、具体例です。

画像をレスポンシブに切り替える書き方

手順1.画像をPC用、スマホ用の2種類用意する。

タブレットなどでさらに区別したいときには3種類とか増やせばいいです。
ま、でもスマホと2種類作っておけばユーザビリティの面でもそんなに問題ないかとは思いますが。

画像には「○○（ファイル名）_pc.jpg」、「○○（ファイル名）_sp.jpg」とかのわかりやすいフォーマットにしておくと管理しやすいでしょうね。

画像のサイズはお好みで。
スマホ用には現在では画面幅400pxくらいのものが多いのでそれくらいのサイズで作成すれば良いかと思いますが、縦横のビュー切り替えもあるし、ま、400～480px程度の幅で可読性が良ければいいんじゃないかと。
基本的に今作ってるサイトはだいたいレスポンシブデザインなので、1サイズ固定で閲覧していただけるわけでもないので^_^;。

もっと画像サイズにこだわる必要があるーというヒトはターゲットデバイスなども考慮して厳密に作っていただければ。

デバイス別の画面サイズについての情報を提供してくれてるサイトもあります。

参考：様々なデバイスの画面サイズ情報を提供してくれているサイト

screensiz.es

手順２.Slider Proのオプション設定のコードに画像切り替えのサイズ指定（ブレークポイント）を追加する。

どの画面サイズ（幅）になったときにスマホ対応画面に切り替えるのか？をオプション内に追加書き込みします。

例えば当サイトのトップページで設定しているのは下記のようなオプションの組み合わせとなります。

<script>
jQuery(function(){
	jQuery('#slider1').sliderPro({
	  width: "70%",
	  height: 600,
	  smallsize:480,//★ここでスマホ←→PCの画像切り替えブレークポイントを設定
	  aspectRatio: 2,
	  arrows: true,
	  buttons: true,
	  autoplay: true,
	  loop: true,
	  visibleSize: '100%',
	  forceSize: 'fullWidth',
	  responsive:true
	});
  });
</script>

smallsize切り替えサイズの設定は、手順1.で作成したスマホ用画像の幅サイズです。
ちなみに480px幅はデフォルト設定。

例えば、タブレットなどでも切り替えたいや！という方は、オプションにmediumsize:””;を追加すれば、さらに画像切り替えのブレークポイントを増やすことができます。

切り替えられるサイズは、

• smallsize //このサイズ未満でスモール版の画像を使用 初期:480
• mediumsize //このサイズ未満でミディアム版の画像を使用 初期:768
• largesize //このサイズ未満でラージ版の画像を使用 初期:1024

の3種があります。

手順3.それぞれの画像に切り替え用ファイルの設定を追加する。

さて、いよいよ最後のステップ、PC→スマホへと画面サイズが変わった時点で切り替える画像を指定します。

この設定方法がわからんために延々とグーグル先生に相談しなければならないという回り道をさせられました（苦笑）

基本的には、<img>タグの中に読み込むデータを指定するための属性data-small=””（スマホ用のみの場合）を追加します。

<img class="sp-image" src="親ディレクトリ/images/デフォルト読み込みファイル名" 
data-small="親ディレクトリ/images/スマホ用画像ファイル名" /></a>

タブレットなどのミディアムサイズ以下になったときに切り替えたければ、

data-midium=”画像ファイル名（タブレット用）”

を、PCの最大表示も切り替えたければ

data-large=”画像ファイル名（PC以上用）”

をそれぞれファイル名指定して、手順2のブレークポイントのオプションも指定すればOKです。

まとめ

Slider Proのオプションでタブレットやスマホごとに画面サイズが小さくなったときに切り替える手順としては、

①それぞれのサイズ用に摘要する画像を用意

②オプションで①の画像サイズにも合わせた切り替えのためのブレークポイントを設定追加する。

③スライダー表示するための画像ファイルリンクのタグの中に”data-○○”でレスポンシブ対応したい画像ファイルを指定

ーという手順を踏めばOKということになります。

画像の切り替えオプションについての本家サイトの解説（英文）はこちらです。

Slider Pro ：6. Conditional Images