Nivo Sliderの概要
Nivo Sliderを使うと以下のように画像をスライドさせて切り替えて表示出来ます。
Nivo SliderはMIT Lisenceというライセンスを採用していて、自由にダウンロードして無料で利用出来ます。
Nivo Sliderは画像をスライダーさせるjQueryのプラグインです。本ページではNivo Sliderのダウンロード方法や使い方について説明しています。
Nivo Sliderを使うと以下のように画像をスライドさせて切り替えて表示出来ます。
Nivo SliderはMIT Lisenceというライセンスを採用していて、自由にダウンロードして無料で利用出来ます。
Nivo Sliderは「gilbitron/Nivo-Slider」から必要なファイルをダウンロードして使います。
ダウンロードは画面右下の「Download ZIP」をクリックすると一括でダウンロード出来ます。ダウンロード後は圧縮されているため、解凍が必要です。
最低限利用するファイルは以下の2つです。
アップロード後、「jQueryの利用」でjQueryを利用出来るようになっている場合、htmlファイルで<head>と</head>の間に以下の記述を追加してアップロードしたファイルを読み込ませます。
<script src="js/jquery.nivo.slider.pack.js"></script> <link rel="stylesheet" href="css/nivo-slider.css" /> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ directionNav: false, controlNav: false }); }); </script>
赤字部分はアップロードしたディレクトリに合わせて変更して下さい。
directionNav: falseやcontrolNav: falseはオプションを記述する部分です。
又、<body>と</body>の間で実際に配置する部分に以下を記述すると、記述した部分に画像が切り替わりながら表示されます。
<div class="slider-wrapper"> <div id="slider" class="nivoSlider"> <img src="画像ファイル名a" alt="画像a説明" title="タイトルa" /> <img src="画像ファイル名b" alt="画像b説明" title="タイトルb" /> <img src="画像ファイル名c" alt="画像c説明" title="タイトルc" /> </div> </div>
赤字部分は利用する画像に合わせて変更して下さい。例えば画像ファイル名a〜cは表示する画像で、ディレクトリがない場合はtest.jpg、ディレクトリがある場合はimage/test.jpg等と指定します。
画像の説明は通常のimgタグで使うaltと同じです。又、タイトルは画像の左下に表示されます。
Nivo SliderはJavaScriptを無効にしていると画像が表示されません。
JavaScriptを無効にしている人は今では1%未満らしいですが、JavaScriptが無効な場合でも画像を表示させるには、<div id="slider" class="nivoSlider">部分を<div id="slider" class="nivoSlider" style="height:XXXpx;">と高さを指定します。XXX部分は画像の高さをpxで指定します。
これで記述した最後の画像が表示されます。上の例では画像ファイル名cが表示される事になります。
又、JavaScriptが有効な訪問者に一番見て貰いたい画像を1番目に表示するようにした場合、デフォルトではJavaScriptを無効にしている人にはこの画像が表示されません。最後の画像が表示されるためです。
この場合は、一番見て貰いたい画像を最後に記述します。その後、以下のように一番最初に表示する画像をオプションで指定します。
<script src="js/jquery.nivo.slider.pack.js"></script>
<link rel="stylesheet" href="css/nivo-slider.css" />
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
startSlide: 2,
directionNav: false,
controlNav: false
});
});
</script>
赤字のstartSlide: 2,は一番最初に表示する画像の番号を指定しています。0から始まる事に留意して最後の画像を指定して下さい。このようにすると、JavaScriptが有効な訪問者に対しては一番見て貰いたい画像を最初に表示し、無効な訪問者に対しても一番見て欲しい画像だけ表示させる事が出来ます。
画像を拡大・縮小して表示するためには、スタイルシートで以下のように幅と高さを記述します。
480pxと360px部分は指定したい幅と高さに変更して下さい。
又、JavaScriptが無効な時に最後の画像を表示するようにしている場合、その画像のimgタグに対しても以下のように幅と高さの指定が必要です。
<img src="画像ファイル名c" alt""画像c説明" title="タイトルc" style="width:480px;height:360px;" />
画像をセンタリングする場合はスタイルシートで以下のように指定します。
0の部分は上下余白のため、余白を持たせたい場合は例えば12px等と指定します。
以下のように自動的に切り替えないようにする事も出来ます。画像の上にマウスを乗せて表示される矢印ボタンで切り替えるか、画像の下のナビゲーションをクリックして切り替える事が出来ます。
指定はオプションで行います。以下はオプションの例で、それぞれの説明とデフォルトの設定を示します。
オプション | 説明 | デフォルト |
---|---|---|
animSpeed | 画像を切り替える時の速さをmsで指定 | animSpeed: 500 |
pauseTime | 1枚の画像を表示する時間をmsで指定 | pauseTime: 3000 |
startSlide | 最初に表示する画像。デフォルトでは1番目の画像から表示。 | startSlide: 0 |
directionNav | 次、戻るを表示するかしないか指定。デフォルトでは表示。 | directionNav: true |
controlNav | 画像の下に1,2,3等ナビゲーションを付けるか指定。デフォルトは表示。 | scontrolNav: true |
controlNavThumbs | 縮小画像をナビゲーション表示する指定。デフォルトは表示しない。 | controlNavThumbs: false |
pauseOnHover | 画像上にマウスがある場合、切り替わりしない指定。デフォルトは切り替えない。 | pauseOnHover: true |
manualAdvance | 自動切り替わりするかどうか指定。デフォルトでは切り替える。 | manualAdvance: false |
prevText | 戻るをどのように表示するか指定 | prevText: 'Prev' |
nextText | 次へをどのように表示するか指定 | nextText: 'Next' |
例で示した表示は、以下のようにオプションを定義しています。
<script type="text/javascript"> $(window).load(function() { $('#slider2').nivoSlider({ controlNavThumbs: true, manualAdvance: true }); }); </script>
ナビゲーションを表示し、自動切り替えしないように設定しています。
このように複数オプションを指定する場合、「,」で区切って記述します。
又、縮小画像のナビゲーションを表示する場合は、htmlで以下の赤字部分を追加する必要があります。
<div class="slider-wrapper"> <div id="slider" class="nivoSlider"> <img src="画像ファイル名a" alt="画像a説明" data-thumb="画像ファイル名a" title="タイトルa" /> <img src="画像ファイル名b" alt="画像b説明" data-thumb="画像ファイル名b" title="タイトルb" /> <img src="画像ファイル名c" alt="画像c説明" data-thumb="画像ファイル名c" title="タイトルc" /> </div> </div>
data-thumbで指定する画像は小さい画像を用意しますが、別途用意しない場合はsrcで指定する画像と同じファイルを指定する事も出来ます。
この場合、デフォルトではナビゲーション画像も大きく表示されてしまいますが、後述のテーマを利用する事で自動的に縮小されます。
Nivo Sliderを1ページ2箇所以上で利用する場合、スクリプトを以下赤字部分のように書き換えて追加します。
<script type="text/javascript">
$(window).load(function() {
$('#slider2').nivoSlider({
directionNav: false,
controlNav: false
});
});
</script>
又、<body>と</body>の間で2箇所目は以下のように記述します。
<div class="slider-wrapper">
<div id="slider2" class="nivoSlider">
<img src="画像ファイル名d" alt="画像d説明" title="タイトルd" />
<img src="画像ファイル名e" alt="画像e説明" title="タイトルe" />
<img src="画像ファイル名f" alt="画像f説明" title="タイトルf" />
</div>
</div>
赤字部分を合わせる事でスクリプトと表示する画像が対応付けられます。
このため、オプションを変えて1ページ内で異なる動作をさせる事が可能です。
ダウンロードしたnivo-slider\themesフォルダにはテーマ別のスタイルシートや画像があります。例えばdarkだと周囲が黒の背景になります。
テーマを適用するためには、最初にフォルダ配下のファイルをサーバーのスタイルシートを配置するディレクトリにアップロードします。次にhtmlで<head>と</head>の間に<link rel="stylesheet" href="css/dark.css" />等テーマ用のスタイルシートを読み込ませるようにします。
又、<body>と</body>の間で<div class="slider-wrapper">部分は<div class="slider-wrapper theme-dark">のように赤字部分を追加してテーマを指定します。
尚、本ページの例ではtheme-defaultを指定し、defaultテーマを利用しています。