Nivo Slider ダウンロード
Nivo Sliderの特徴
ナビゲーションにサムネイルを利用することができて便利です。スライドにキャンプションを設定してリンクを貼ることもできます。
headerに下記ファイルを読み込みます
wordpressで、テーマディレクトリーのJSディレクトリーに格納している場合です。
いろいろなテーマが用意されているので、任意のテーマのCSSを読み込みます。（themes/default）
[php]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript" src="<?php bloginfo(‘template_url’); ?>/js/nivo-slider/jquery.nivo.slider.js"></script>
<link rel="stylesheet" href="<?php bloginfo(‘template_url’); ?>/js/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo(‘template_url’); ?>/js/nivo-slider/themes/default/default.css" type="text/css" media="screen" />
[/php]
header(または footer）に、JQueryコードを書きます
[php]
<script type="text/javascript">
$(function(){
var nivoObj = new Object();
//最後のスライドでSTOP
nivoObj.lastSlide = function(){
$(‘#slider’).data(‘nivoslider’).stop();
};
//ここまで
$(‘#slider’).nivoSlider(nivoObj);
});
</script>
[/php]
多彩な設定コード
（色を変えている行は、私がよく変更する行です。意味はありません）
[php highlight=”4,8,9,12,13,24″]
<script type="text/javascript">
$(window).load(function() {
$(‘#slider’).nivoSlider({
effect: ‘boxRandom,boxRain,boxRainReverse’, // 画像切り替え時のアニメーション
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 1000, // アニメーション速度(ms)
pauseTime: 5000, // 画像切り替えまでの時間(ms)
startSlide:0, // 初めに表示する画像（1枚目～表示：0）
directionNavHide:true, // マウスホバー時のみdirectionNavを表示
controlNav:true, // コントロールナビの表示
controlNavThumbs:false, // コントロールナビに画像サムネイルを使用
keyboardNav:true, // スライドをキーボードで操作
pauseOnHover: true, // マウスホバー時に切り替えを一時停止
manualAdvance: false, // 自動スライドしない
captionOpacity:0.8, // キャプションの透過度
prevText: ‘Prev’, // 前ボタンの名前
nextText: ‘Next’, // 次ボタンの名前
randomStart: false, // 最初に表示する画像をランダムに
beforeChange: function(){}, // スライド切り替え前のコールバック関数
afterChange: function(){}, // スライド切り替え後のコールバック関数
slideshowEnd: function(){}, // 全ての画像を表示した後のコールバック関数
lastSlide: function(){}, // 最後の画像が表示された後スライドショーをSTOP
afterLoad: function(){} // スライドのロードが完了したときのコールバック関数
});
});
</script>
[/php]
キャプションを表示してリンクを貼る場合
[html]
<!–HTMLコード（wordpressの場合）–>
<div id="slider" class="nivoSlider">
<img src="<?php bloginfo(‘url’); ?>/001.jpg" title="#htmlcaption1" />
<img src="<?php bloginfo(‘url’); ?>/002.jpg" title="#htmlcaption2" />
<img src="<?php bloginfo(‘url’); ?>/003.jpg" title="#htmlcaption3" />
</div>
<div id="htmlcaption1" class="nivo-html-caption">
<a href="リンク先URL">任意の文字列</a>
</div>
<div id="htmlcaption2" class="nivo-html-caption">
<a href="リンク先URL">任意の文字列</a>
</div>
<div id="htmlcaption3" class="nivo-html-caption">
<a href="リンク先URL">任意の文字列</a>
</div>
[/html]
コントロールナビをサムネイルにする場合
例は、wordpressのタグで、ドメイン直下に画像をアップロードしている場合です。
別に任意の大きさでサムネイルを用意しておく必要があります。
[html]
<!–HTMLコード（wordpressの場合）–>
<img src="<?php bloginfo(‘url’); ?>/001.jpg" width="670" height="260" data-thumb="<?php bloginfo(‘url’); ?>/001_thumb.jpg">
<img src="<?php bloginfo(‘url’); ?>/002.jpg" width="670" height="260" data-thumb="<?php bloginfo(‘url’); ?>/002_thumb.jpg">
<img src="<?php bloginfo(‘url’); ?>/003.jpg" width="670" height="260" data-thumb="<?php bloginfo(‘url’); ?>/003_thumb.jpg">
[/html]
JQueryコードの「controlNavThumbs」を「true」に設定
[php]
controlNavThumbs:true, // コントロールナビに画像サムネイルを使用
[/php]
サムネイルの位置・サイズ・装飾は、default.css内の該当箇所を変更（下記CSSは未変更の状態）
[css]
.theme-default .nivo-controlNav.nivo-thumbs-enabled {
width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
width: auto;
height: auto;
background: none;
margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
display: block;
width: 120px;
height: auto;
[/css]
エフェクト（アニメーション）の変更
下記コード内「’」～「’」に設定します。複数のエフェクトを設定したい場合は、カンマで区切ります。
[php]
effect: ‘boxRandom,boxRain,boxRainReverse’, // 画像切り替え時のアニメーション
[/php]
エフェクト（アニメーション）の種類
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- random
- slideInRight
- slideInLeft
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse