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;の下で良いですか??
よろしくお願い致しします。

回答No.2

my--

>> No.1 お礼

beforeChangeは関数を値に取りますが、animSpeed, pauseTimeと同じNivo Slider設定項目のひとつです。

　var slider = $('#slider').nivoSlider({
　　animSpeed: 1000,
　　pauseTime: 5000,
　　beforeChange: function () {
　　　...
　　}
　});

他の設定も同じように書いて下さい。それから

}, 5000); // 5秒遅延

この5秒はエフェクト開始（画像の切り替え処理）直前から次のエフェクト開始直前までの時間になります。
「他の画像より5秒延長」の5秒とういわけではなくpauseTime: 5000を設定すると、他との時差はほぼなくなります。
いずれ気付くことだと思いますけど、一応。

最後に

timerID = null; // 追記
}, 5000); // 5秒遅延

表面上の動作に関わることではないのですが、一行追記しておいて下さい。

お礼

my--様回答ありがとうございます！
>「他の画像より5秒延長」の5秒とういわけではなくpauseTime: 5000を設定すると、
>他との時差はほぼなくなります。
そうだったんですね。すみません、、てっきり5秒延長の5秒かと勘違いしてしましました。

うまく動作出来ました。本当にありがとうございました！