JavaScriptのabc

ﾌﾟﾗｸﾞｲﾝでｽﾗｲﾄﾞｼｮｰ
　　　　●　導入編

ここまでスライドショーを作って来ましたが、よりスマートで楽チンな方法としてｊQueryのプラグインに挑戦します。

探してみると結構数有るもので、ネット上で評判が良い「Slider Pro」に挑戦です。

「Slider Pro」はbqworksが提供しているもので、こちら→のホームページから入ります。

下の画像はホームページのトップです。

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

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

「examples」フォルダの中にexample1～example5の５つのサンプルがありますので開いてみます。作ってみたいスライドショーのお手本に出くわしたら、作業開始です。

最初の作業として、必要なJavascriptファイルやCSSファイルのコピーを、自分のホームページ用フォルダーに移動します。移動対象は、

「jquery.sliderPro.min.js」（「dist」フォルダー＞「js」フォルダー＞）。

「slider-pro.min.css」（「dist」フォルダー＞「css」フォルダー＞）。

です。もしｊQueryのファイルをまだ持っていなかったら、次もコピーします。

「jquery-1.11.0.min.js」（「libs」フォルダー＞）。

「slider-pro-master」フォルダーの中には多くのファイルがありますが、最初はここまでのコピーで十分です。

では、自分のホームページ用HTML文書に記述していきます。

headタグ内には、通常の記述に加えて、以下を記述します。

さて作りたいスライドショーのお手本になるのは「example2」（３枚画像が横スライドして順次入れ替わっていく）です。

bodyタグ内に自分で考えたID名で、クラス名がslider-proのdivを作ります。

このdivの中には、クラス名がsp-slidesのdivを作ります。

このクラス名sp-slidesのdivの中にスライドショーに使用する画像を順番に並べて行きます。ただし画像一つ一つはクラス名がsp-slideで囲っておきます。

bodyタグ内の記述を整理すると、下の通りです。

次はheadタグ内に戻ってsscriptタグを作ります。

Slider Proは多くのパラメーターを持っていて、それらは、このsscriptタグの中で指定します。今回はexample2をほぼ丸写しし、以下の様に指定します。

$（function(){
    $（’自分で考えたID名’).slidePro({
        width: ’50%’,
        height: 500,
        aspectRatio: 1.5,
        visibleSize: ’100%’,
        forceSize:  ’fullSize’
    })
});

設定したパラメーターを一つづつ確認します。

・widthで、スライドする画像の幅を指定しています。

「’50%’」は、画像１枚の幅が画面幅の半分である事を意味します。

％でも数値（px値）でも指定できます。

・heightで、画像の高さを指定しています。

「500」は、画像１枚の高さが500pixelである事を意味します。

％でも数値（px値）でも指定できます。

・aspectRaioで、画像の縦横比を指定しています。

「1.5」は、縦１に対して横1.5である事を意味します。

widthとaspectRaioの組み合わせがheightより優先される様に思われます。

（確かではありませんが）

・visibleSizeで、表示しているスライドの前後を見える様に指定しています。

％で指定します。

ただし「’100%’」の値を変えても画面の動きは何も変化しません。

このサンプルでは意味を持たないパラメータかも。

・forceSizeSizeで、スライドの全幅を、画面全幅かウインドウ全幅に強制的に

抑え込みます。

fullWidth指定で、ウインドウ縮小時の幅に合わせてスライド表示します。

fullWindow指定では、ウインドウ縮小時でも、ディスプレイ全画面幅表示

のスライドの大きさを維持します。

fullWindow指定はaspectRaio指定よりも優先する様です。

良く理解できていない部分が多いのですが、とにかくHTML文書を記述しました。下の通りです。

動きは右のボタンから確認して下さい。

ページトップへ

←前ページへ　　　　　　　　　　　　　　　目次へ戻る　　　　　　　　　　　　　　　 →次ページへ

手間ひまかけても金かけない作戦・・・ホームページ作りで実践しました！！

ﾌﾟﾗｸﾞｲﾝでｽﾗｲﾄﾞｼｮｰ ● 導入編

ﾌﾟﾗｸﾞｲﾝでｽﾗｲﾄﾞｼｮｰ
　　　　●　導入編