Nivo Sliderのエフェクトについて

質問

書き込みさせていただきます。
Nivo Sliderで画像のスライドを作成したいのですが
エフェクトはそれぞれの画像に設定できないのでしょうか？

また、画像が4枚ありますが、最後の画像のみ
表示を長めに設定できませんか。

よろしくお願い致します。

回答No.1

my-- · ベストアンサー

//Defaults are below
var settings = $.extend({}, $.fn.nivoSlider.defaults, options);
this.settings = settings; // 追記行

まずjquery.nivo.slider.jsの初めにある上記箇所に1行追記して下さい。
これはエフェクト処理に使われるsettings.effectプロパティに外部からアクセスできるようにするための記述です。
jquery.nivo.slider.pack.jsを使っていたら、1行追記したjquery.nivo.slider.jsに変更するのを忘れずに。

以下、画像を切り替える前に呼出されるbeforeChangeイベントを利用した実装例です。

<script type="text/javascript">
$(window).load(function() {
　var effects = [ 'sliceDown', 'sliceDownLeft', 'sliceUp', 'sliceUpLeft' ]; // 任意のエフェクト（画像数用意）
　var timerID = null;

　var slider = $('#slider').nivoSlider({
　　beforeChange: function () {
　　　var nivoslider = slider.data('nivoslider');
　　　var vars = slider.data('nivo:vars');
　　　var total = vars.totalSlides;
　　　var current = vars.currentSlide + 1;
　　　if (current < 0 || current >= total) current = total - Math.abs(current);

　　　// それぞれの画像に任意のエフェクト設定
　　　var effect = effects[current];
　　　if (effect) nivoslider.settings.effect = effect; // settings.effectに任意のエフェクト設定
　　　$('#debug1').text('[' + current + ']：' + effect); // デバッグ用コード（削除）
　　　// それぞれの画像に任意のエフェクト設定ここまで

　　　// 最後の画像のみ表示を長めに設定
　　　if (timerID) { // 待機中ならクリアして始動
　　　　　clearTimeout(timerID);
　　　　　timerID = null;
　　　　　nivoslider.start();
　　　　　$('#debug2').text('move'); // デバッグ用コード（削除）
　　　} else if (current === total - 1) { // 最後の画像
　　　　nivoslider.stop(); // 停止
　　　　$('#debug2').text('wait'); // デバッグ用コード（削除）
　　　　timerID = setTimeout(function () {
　　　　　nivoslider.stop();
　　　　　nivoslider.start(); // 始動
　　　　　$('#debug2').text('move'); // デバッグ用コード（削除）
　　　　}, 5000); // 5秒遅延
　　　}
　　　// 最後の画像のみ表示を長めに設定ここまで

　　}
　});

});
</script>
<!-- デバッグ用（削除） -->
<p>effects<span id="debug1"></span></p><p>slide：<span id="debug2">move</span></p>

※本来、初期設定以外では触れない値を書き換えています。あらゆる場面で正常に動くとは限らないので念のため。

jQuery Plugin Usage | Nivo Slider
http://nivo.dev7studios.com/support/jquery-plugin-usage/

設定オプション、エフェクト一覧など。

お礼

my--様
本当にありがとうございます！でっ出来ました！
画像1枚１枚に指定のエフェクトがかかっています！

あの、、もう一つだけよろしいでしょうか。
}, 5000); // 5秒遅延で
最後の画像を、他の画像より5秒延長している(?)と思いますが
その他の画像のanimSpeed : 1000,とpauseTime : 5000,は
どこに書いたら良いでしょうか。

var timerID = null;の下で良いですか??
よろしくお願い致しします。