Nivo Sliderの使い方とサンプル

Nivo Sliderのサンプル動作デモ

Image Overlay Pluginの概要

概要

Nivo Sliderは多数のアニメーション効果を持ったスライドショーを実現するjQueryプラグインです。画像切り替え時に現れる16種類のアニメーションがスライドショーをより魅力的にしてくれます。スライドの制御はボタン、ナビの他にキーボードからも行うことができます。

特徴

・16種類のアニメーションを使ったスライドショー

・ボタンやナビを使ったスライドショーの操作

・キーボードでもスライドショーの操作が可能

・スライド画像の下部にキャブションを設定可能

使った感想・評価

メインはスライドショーで付加機能としてキャプションを備えられるプラグインです。デフォルト状態でスライドショーとして十分な機能を持っており、更に詳細な設定が可能なので自分好みにカスタマイズできます。アニメーション種類が豊富で、見ていて飽きないスライドショーが作れそうです。

Nivo Sliderの使い方

jQueryライブラリー、Nivo Sliderソースファイル、Nivo Sliderスタイルシートファイルを読み込みます。

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" >
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" >

jQueryコードを書きます。

<script type="text/javascript">
  $(window).load(function() {
      $('#slider').nivoSlider({
      });
  });
</script>

コンテンツ部分を書きます。キャプションを設定する場合は、<img>タグにtitle属性を加えそこに記述します。キャプションにHTMLタグを使いたいときは、title属性に対象セレクタを書き、別に用意した<div id=”xxxx” class=”nivo-html-caption”>～</div>に記述します。

<div id="slider" class="nivoSlider">
<img src="img/320x240_01.jpg" alt="" />
<a href="http://webhako.net/jquery/"><img src="img/320x240_02.jpg" alt="" title="キャプションサンプルです" /></a>
<img src="img/320x240_03.jpg" alt="" />
<img src="img/320x240_04.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
An example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

Nivo Sliderで使用可能なオプション説明

<script type="text/javascript">
  $(window).load(function() {
      $('#slider').nivoSlider({
        effect:'random', // 画像切り替え時のアニメーション
        slices:15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed:500, // アニメーション速度(ms)
        pauseTime:3000, // 画像切り替えまでの時間(ms)
        startSlide:0, // 初めに表示する画像位置
        directionNav:true, // 前/次ボタンを表示
        directionNavHide:true, // マウスホバー時のみdirectionNavを表示
        controlNav:true, // コントロールナビの表示
        controlNavThumbs:false, // コントロールナビに画像サムネイルを使用
        controlNavThumbsFromRel:false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav:true, // スライドをキーボードで操作
        pauseOnHover:true, // マウスホバー時に切り替えを一時停止
        manualAdvance:false, // 自動スライドしない
        captionOpacity:0.8, // キャプションの透過度
        prevText: 'Prev', // 前ボタンの名前
        nextText: 'Next', // 次ボタンの名前
        beforeChange: function(){}, // スライド切り替え前のコールバック関数
        afterChange: function(){}, // スライド切り替え後のコールバック関数
        slideshowEnd: function(){}, // 全ての画像を表示した後のコールバック関数
        lastSlide: function(){}, // 最後の画像が表示される後のコールバック関数
        afterLoad: function(){} // スライドのロードが完了したときのコールバック関数
      });
  });
</script>

設定可能なeffectプロパティの値

random
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse

CSS各セレクタの設定

#slider {}

スライドショーのサイズ、位置。スライドに使う写真のサイズを変更した場合には、それに合わせてwidth/heightプロパティも変更しておく。

.nivo-controlNav {}

ナビゲーションの位置。#sliderの位置を基準にleft/topプロパティ等を使って設定。

カスタマイズサンプル

サンプル2

directionNavHideプロパティを「false」で常に次前ボタンを表示、manualAdvanceプロパティを「true」で自動スライドしない、captionOpacityプロパティを「1.0」でキャプションの透明度を0に,afterChangeプロパティに別に用意した関数「test()」を設定し画像が切り替わるごとにtest()を実行。

<script type="text/javascript">
  $(window).load(function() {
      $('#slider').nivoSlider({
        directionNavHide: false,
        manualAdvance:true,
        captionOpacity:1.0,
        afterChange: test,
      });
  });

function test() {
  alert('done');
}
</script>

Nivo Sliderのサンプルコード/ダウンロード

Nivo Slider公式ページ

サンプルソースファイルダウンロード