jQuery イメージスライダーNivo Slider で画像ごとに停止時間を変える

Nivo Slider は 多彩なトランジションを繰り出すスライドショーを簡単に作ることができる高性能 jQuery イメージスライダー。jQuery プラグイン版は無料で使うことができます。

使用方法は下記を参考にしてもらえば好いと想います。
Nivo Sliderの使い方とサンプル | jQueryプラグイン集

トランジションのタイプは、img タグの data-transition 属性でトランジション名を指定することで画像ごとに簡単に変更できるのですが、例えば文字を読ませたい場合に少し長めに止めておきたい、といったように画像毎に停止時間を指定できる機能はデフォルトでは現在(2012/12/27)のところないようです。探してみたところ以下のページでやり方が紹介されていました。
Can I get different pauseTime’s for different slides? / Nivo Slider jQuery Plugin / Discussion Area – Nivo Slider Support

以下のコードを nivoRun function の中のカスタムトランジションに関するコードの後に入れます。圧縮前の jquery.nivo.slider.js (v2.7.1) で言うと 614 行目あたりかな。

if(vars.currentImage.attr('data-timing')){ 
    settings.pauseTime = vars.currentImage.attr('data-timing'); 
    window.clearInterval(timer); 
    timer = ''; 
    if(timer == '' && !settings.manualAdvance){ 
    timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime); 
    } 
}

default の pauseTime が 3000 として、以下のように記述すると、3、4枚目の画像で pauseTime が1500と半分になり、5枚目の画像ではまた3000に戻ります。data-timing 属性を持っている時のみ上記のコードは適用されるので、何も指定しない場合は最後に指定した pauseTime が適用されます。

<img src="001.jpg" alt="" />
<img src="002.jpg" alt="" />
<img src="003.jpg" alt="" data-timing="1500" />
<img src="004.jpg" alt="" />
<img src="005.jpg" alt="" data-timing="3000" />

今回は pauseTime を弄っていますが、お望みとあらば同様の方法で slices でも boxCols でも画像毎に指定できるようにカスタムできます。

Los Angels 旅記(後) – Santa Monica 編 –

土曜日は自由行動の日。前日はお仕事関係の方と飲みに行きホテルに戻ったのが1時半過ぎだったため、朝は9時半くらいまでのんびり寝て、ホテルの近くのバス亭から Santa Monica 行きの高速バスに。1時間くらいで着きました。

ビーチです。青く澄んだ空に美しい砂浜(足あとだらけだけど)、無邪気に砂浜で裸足になって海を目指して駆け出す俺を待ってる人は今日はいなそうだったので、砂浜には少し足を踏み入れる程度にちょっかいを出しつつ海沿いを歩きました。帰宅後同じアパートのドイツ人に「暖かいっておまえさん、30度くらいだったの?」と聞かれて「うん、そんな感じ」とか適当に答えましたが、滞在中の気温は平均20度強だったのかな。12月の平均最高気温6度の Vancouver から来たせいもあって評価も甘くなってしまいますよね。
Continue reading “Los Angels 旅記(後) – Santa Monica 編 –”

Los Angels 旅記(前) – Downtown 編 –

Los Angels に行ってきました。人生初の出張が L.A.で、しかもワーホリ中とは予想だにしませんでした。人生楽しいですね。余談ですが、先日エレベータで60代くらいのおっちゃんが “Life is beautiful” というフレーズを連発していて、これが日本語で言うところの「いやァ人生って楽しいよねー」に近いような気がしました。

出発前バタバタしていてあまり準備ができていなかったのですが、アメリカ好きな友人に相談したところ、以前行った L.A. 旅行の緻密な行動予定表とおすすめリストを見せてくれて、旅に対する姿勢を反省するとともにこれは見習わなければいかんと想い、自由時間に撮った写真とともに振り返ってみるとします。
Continue reading “Los Angels 旅記(前) – Downtown 編 –”