Vol.17 jQueryで超簡単レスポンシブWebデザイン対応スライダーを実装する〜第2章スタート〜

2014/11/06 up カテゴリー : WEBの現場から！

前回までの「WEBの現場から！」で「レスポンシブWebデザイン」実践講座の第一章が完結した。シンプルだがなかなかクオリティーの高いサイトのトップページが完成したはずだ。今回はその続き。完成したトップページをもう少しカスタマイズしていく。当講座が初めてという人は、下記を参考にスタートしてほしい。

【→完成したトップページを見てみる】
【→実践講座の第一章から始める】
【→完成したトップページのソースをダウンロードする】

カスタマイズの手始めに、jQueryを使った簡単だが安定感のあるレスポンシブWebデザインに対応したスライドショーを、トップ画像に実装していく。このスライダーは、Internet Explorer 6,7,8,9 にも対応していて、サポートしているブラウザも幅広いので定番として安心して使えるのが特徴だ。最初にスライダーの完成形を見てみよう。
【レスポンシブWebデザイン対応スライダー完成形】
　

まずは画像を準備する

下記より2枚の画像をダウンロードしてほしい。この画像はトップ画像「topimage.jpg」と同じ大きさに調整済みである。
　
【→topimage.jpg（zip）】
【→topimage.jpg（zip）】
　
その画像を解凍して「sample」フォルダ内の「images」フォルダに入れる。

ResponsiveSlides.jsをダウンロードする

【こちら】のサイトから「ResponsiveSlides.js」をダウンロード。右サイドの下にある「Download ZIP」をクリックするとダウンロード開始。解凍してできた「ResponsiveSlides.js-master」フォルダの中にある「responsiveslides.js」と「responsiveslides.min.js」のファイルを「sample」フォルダ内の「js」フォルダの中に入れる。次に「ResponsiveSlides.js-master」フォルダの中にある「responsiveslides.css」ファイルを「sample」フォルダ内の「css」フォルダに入れてやる。

ダウンロードしたファイルを読み込む

先ほどダウンロードしたファイルを「index.html」の<head>〜</head>内にスクリプトとスタイルシートを読み込むための記述を書いていく。
　
「index.html」

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsiveslides.css">
<title>MY BLOG</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.heightLine.js"></script>
<script type="text/javascript" src="js/responsiveslides.js"></script>
<script type="text/javascript" src="js/responsiveslides.min.js"></script>

/* 省略 */

</head>

上記ハイライト部分が、 jQueryとCSSを読み込む記述である。ソース黒枠内をマウスオーバーして表示される「ソースを表示」からコピーできる。

「function.js」ファイルを作成

スライドオプションの設定のためのコードは<head>〜</head>内に書くのが一般的かもしれないが、記述量が多くなり非常に読みにくいソースになってしまう。ここでは「function.js」ファイルを新たに作成して、スライドショーのオプション設定のためのコードを記述していく。尚、前回完成したhead内に記述してあるボックスの高さを揃える「heightLine.js」の設定のためのスクリプトもこの「function.js」内に移動して、すっきりとしたコードにしよう。
　
head内の「heightLine.js」の設定のためのスクリプト

<script type="text/javascript">
$(window).on("load",function(){
    $(".news").heightLine();
});
</script>

<head>〜</head>内の上記コードを削除する。そしてテキストエディタを開き、下記のソースをコピーして貼付ける。ソース黒枠内をマウスオーバーして表示される「ソースを表示」からコピーできる。次に「function.js」と名前を付けて保存し、「sample」フォルダ内の「js」フォルダ内に入れる。
　
「function.js」

/* レスポンシブスライダーのオプション設定 */
$(function() { 
	$(".rslides").responsiveSlides({ 
	  auto: true,
	  speed: 500,
	  timeout: 4000,
	  pager: false,
	  nav: false,
	  random: false,
	  pause: false,
	  pauseControls: true,
	  prevText: "Previous",
	  nextText: "Next",
	  maxwidth: "",
	  navContainer: "",
	  manualControls: "",
	  namespace: "rslides",
	  before: function(){},
	  after: function(){}
	}); 
  });

/* ボックスの高さを揃える要素指定 */
	$(window).on("load",function(){
		$(".news").heightLine();
	});

レスポンシブスライダーのオプションは、アニメーションスピードなど以下のようなものが用意されている。

$("#slides").responsiveSlides({ 
  auto: true,             
  // ↑ trueで自動スライド、falseでページナビなどでスライド 
  speed: 500,            
  // スライドアニメーションスピード
  timeout: 4000,          
  // スライドするまでの時間（画像表示時間）
  pager: false,           
  // true でページリンクを表示する（画像枚数分のリンク）
  nav: false,             
  // true でページ送りを表示する（次へ前へのナビゲーションリンク）
  random: false,          
  // true で画像をランダム表示に
  pause: false,           
  // true で画像をマウスオーバー中スライドを止める
  pauseControls: true,    
  // ページャ等のコントローラーをマウスオーバー中スライドを止める。false で止めない。
  prevText: "Previous",   
  // ページ送りリンク（前へ）のテキスト
  nextText: "Next",       
  // ページ送りリンク（次へ）のテキスト
  maxwidth: "",           
  // スライドショーの最大横幅サイズ（px）
  navContainer: "",       
  // このオプションでセレクタ指定すると「pager: true」時のページャーのulセットを指定したセレクタへ挿入できる
  manualControls: "",     
  // ページャーのHTMLへ作成しそのセレクタを指定すると、独自ページャーを作成できる（サムネイルをページリンクにしたり等）
  namespace: "rslides",   
  // スライドに自動で付与されるクラス名を任意のものへ変更
  before: function(){},   
  // 1枚スライドする前にcallback関数
  after: function(){}     
  // 1枚スライドした後のcallback関数
});

<head>〜</head>内へのスクリプトの読み込みも忘れずに。下記ハイライト部分。
　
「index.html」

<head>
/* 省略 */
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.heightLine.js"></script>
<script type="text/javascript" src="js/responsiveslides.js"></script>
<script type="text/javascript" src="js/responsiveslides.min.js"></script>
<script type="text/javascript" src="js/function.js"></script>
/* 省略 */

「index.html」のマークアップ

スライダーを表示させるマークアップは以下のとおり。

	<header> 
		<h1><img src="images/logo.jpg" alt="俺のブログ"></h1>
		<div id="back">
		<ul class="rslides">
			<li><img src="images/topimage.jpg" alt="俺のブログ"></li>
			<li><img src="images/topimage2.jpg" alt="内容は未定"></li>
			<li><img src="images/topimage3.jpg" alt="乞うご期待"></li>
		</ul>
		</div>
	</header>

元々のトップ画像が加えて、先ほどダウンロードした画像をリスト表示する。「ul要素」のclass名を「rslides」としておく。これで完成と言いたいところだが、このままではトップ画像がセンター揃えではなく、左揃えになってしまう。そこでさきほどダウンロードした「responsiveslides.css」を少し修正していく。
　
「responsiveslides.css」

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

上記ハイライト部分の「float: left;」を削除して、

.rslides img {
  display: block;
  height: auto;
  text-align:center;
  margin:0 auto;
  width: 100%;
  border: 0;
  }

として画像をセンター揃えにしてやれば完成。それではお試しあれ。

【レスポンシブWebデザイン対応スライダー完成】
　

COMMEND