プラグインでスライドショー
● 導入編
ここまでスライドショーを作って来ましたが、よりスマートで楽チンな方法としてjQueryのプラグインに挑戦します。
探してみると結構数有るもので、ネット上で評判が良い「Slider Pro」に挑戦です。
「Slider Pro」はbqworksが提供しているもので、こちら→のホームページから入ります。
下の画像はホームページのトップです。

画面を下の方にスクロールしてページの中断あたりに下の様な案内がありますので、赤丸で囲んだ「Download」をクリックします。 クリック後、画面下でファイルhを開くか保存するか聞かれますので、どちらかをクリックします。

ダウンロードしたファイル、フォルダーは下の一式です。slider-pro-masterと言うフォルダーに入っています。

「examples」フォルダの中にexample1~example5の5つのサンプルがありますので開いてみます。作ってみたいスライドショーのお手本に出くわしたら、作業開始です。
最初の作業として、必要なJavascriptファイルやCSSファイルのコピーを、自分のホームページ用フォルダーに移動します。移動対象は、
「jquery.sliderPro.min.js」(「dist」フォルダー>「js」フォルダー>)。
「slider-pro.min.css」(「dist」フォルダー>「css」フォルダー>)。
です。もしjQueryのファイルをまだ持っていなかったら、次もコピーします。
「jquery-1.11.0.min.js」(「libs」フォルダー>)。
「slider-pro-master」フォルダーの中には多くのファイルがありますが、最初はここまでのコピーで十分です。
では、自分のホームページ用HTML文書に記述していきます。
headタグ内には、通常の記述に加えて、以下を記述します。
<link rel="stylesheet" href="slider-pro.min.css" type="text/css">
(コピーしたslider-pro.min.cssへの関連付け)
<script src="jquery-1.11.0.min.js"></script>
(jQueryを新規にコピーした場合のみ追加記述)
<script type="text/javascript" >src="jquery.sliderPro.min.js"></script>
(コピーしたjquery.sliderPro.min.jsへの関連付け)
さて作りたいスライドショーのお手本になるのは「example2」(3枚画像が横スライドして順次入れ替わっていく)です。
bodyタグ内に自分で考えたID名で、クラス名がslider-proのdivを作ります。
このdivの中には、クラス名がsp-slidesのdivを作ります。
このクラス名sp-slidesのdivの中にスライドショーに使用する画像を順番に並べて行きます。ただし画像一つ一つはクラス名がsp-slideで囲っておきます。
bodyタグ内の記述を整理すると、下の通りです。
<div id="自分で考えたID名" class="slider-pro">
<div class="sp-slides">
<div class="sp-slide">
<img class="sp-image" scr="1枚目の画像">
</div>
<div class="sp-slide">
<img class="sp-image" scr="2枚目の画像">
</div>
・
・
</div>
</div>
次はheadタグ内に戻ってsscriptタグを作ります。
Slider Proは多くのパラメーターを持っていて、それらは、このsscriptタグの中で指定します。今回はexample2をほぼ丸写しし、以下の様に指定します。
$(function(){
$(’自分で考えたID名’).slidePro({
width: ’50%’,
height: 500,
aspectRatio: 1.5,
visibleSize: ’100%’,
forceSize: ’fullSize’
})
});
設定したパラメーターを一つづつ確認します。
・widthで、スライドする画像の幅を指定しています。
「’50%’」は、画像1枚の幅が画面幅の半分である事を意味します。
%でも数値(px値)でも指定できます。
・heightで、画像の高さを指定しています。
「500」は、画像1枚の高さが500pixelである事を意味します。
%でも数値(px値)でも指定できます。
・aspectRaioで、画像の縦横比を指定しています。
「1.5」は、縦1に対して横1.5である事を意味します。
widthとaspectRaioの組み合わせがheightより優先される様に思われます。
(確かではありませんが)
・visibleSizeで、表示しているスライドの前後を見える様に指定しています。
%で指定します。
ただし「’100%’」の値を変えても画面の動きは何も変化しません。
このサンプルでは意味を持たないパラメータかも。
・forceSizeSizeで、スライドの全幅を、画面全幅かウインドウ全幅に強制的に
抑え込みます。
fullWidth指定で、ウインドウ縮小時の幅に合わせてスライド表示します。
fullWindow指定では、ウインドウ縮小時でも、ディスプレイ全画面幅表示
のスライドの大きさを維持します。
fullWindow指定はaspectRaio指定よりも優先する様です。
良く理解できていない部分が多いのですが、とにかくHTML文書を記述しました。下の通りです。

