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 でも画像毎に指定できるようにカスタムできます。

SWFObject+ExternalInterfaceでのGoogle Analytics設定

FlashとJavaSrciptの連携をするにはExternalInterfaceを使うと便利です。過去記事で面倒なやり方をエントリーしましたが今後はこちらのやり方で行こうと想います。

先日「Google Analytics」がFlashコンテンツのアクセス解析に対応しましたが、こちらのやり方は後でやってみるとして、とりあえずExternalInterfaceを使ってJavaSrciptと連携しGoogle Analyticsを使えるようにしてみます。

こんな感じです。



CONTINUE READING

Flash JavaScript Integration Kitを使ってFlashからJavaScriptを操作する

今回やりたいことは、
ボタンを押すと別ウィンドウでFlashのスペシャルサイト表示。
開いたスペシャルサイトから元のページを操作(ページ遷移、focusを当て前面に出す)。
個人的には同じウィンドウで全て遷移して欲しいところですが、これでやってみたいと想います。

サンプル

CONTINUE READING