導入編ここまでスライドショーを作って来ましたが、よりスマートで楽チンな方法としてjQueryのプラグインに挑戦します。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タグ内には、通常の記述に加えて、以下を記述します。>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></div>次はheadタグ内に戻ってsscriptタグを作ります。Proは多くのパラメーターを持っていて、それらは、このsscriptタグの中で指定します。今回はexample2をほぼ丸写しし、以下の様に指定します。’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文書を記述しました。動きは右のボタンから確認して下さい。