Nivo Sliderのカスタマイズについて

質問

Nivo Sliderのエフェクトについて
書き込みさせていただきます。
Nivo Sliderで複数枚の画像のスライドを作成したいのですが
写真によってエフェクトの種類、エフェクトの切り替わる時間、切り替わり後の表示時間を
それぞれ変えたいと考えています。
これを実現させる方法を伝授頂ければと思います。

他の方法で、上記のようなエフェクトや設定ができるのであれば、
Nivo Sliderでなくてもかまいません。

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

回答No.1

my--

とりあえず変更手順だけ。

Nivo Slider - The world's most awesome jQuery & WordPress Image Slider
http://dev7studios.com/nivo-slider/

jQuery Nivo Slider v3.2 117行目
...
// In the words of Super Mario "let's a go!"
//var timer = 0;
settings.timer = 0; // 書き換え
...

以降の「timer」も「settings.timer」にすべて書き換えて下さい。（エディタの置き換え機能を使うといいです）

jQuery Nivo Slider v3.2 302行目
...
// Trigger the beforeChange callback
// settings.beforeChange.call(this);
settings.beforeChange.call(slider, settings); // 書き換え
...

beforeChange関数呼出しのthis値をslider（jQueryオブジェクト）。引数をsettingsに書き換えます。

<script>
$(window).load(function() {

$('#slider').nivoSlider({
pauseTime: 2000, // ページ読み込み時、最初の表示時間（以降はmyListを参照）
myList: [
// エフェクトの切り替わる時間と切り替わり後の表示時間（img要素定義順に適用）
{ speed: 500, pause: 2000 },
{ speed: 1000, pause: 5000 },
{ speed: 2000, pause: 7000 },
{ speed: 3000, pause: 10000 }
],
beforeChange: function (settings) {
var vars = this.data('nivo:vars');
var n = (vars.currentSlide + 1) % settings.myList.length; // 次番号の取得
settings.animSpeed = settings.myList[n].speed; // エフェクトの切り替わる時間設定
settings.pauseTime = settings.myList[n].pause; // 切り替わり後の表示時間設定
clearInterval(settings.timer); // タイマー呼出し解除
settings.timer = '';
// settings.timerの値が空文字になっていると、settings.pauseTimeの間隔でタイマー呼出し（setInterval）が再設定されます
}
});

});
</script>

HTMLのスクリプトは上記を参考に。「エフェクトの種類」は

<div id="slider">
<img data-transition="エフェクト" ... >
...
</div>

img要素にdata-transition属性があれば、その値が適用されます。