プラグインでスライドショー
    ● 導入編


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

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

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

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

Slider Pro

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

Slider Pro

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

Slider Pro

「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文書を記述しました。下の通りです。

プログラム

 

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

ページトップへ

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

コーナー