jqueryによる画像切り替えのカスタマイズ

jqueryによる画像切り替えのカスタマイズについて

こちらのサイト（http://blog.net-king.com/）で、プラグインをダウンロードし、
設置・動作確認と基本的なことは完了しました。

オプションでの設定以外のことについてカスタマイズを試みたのですが、
知識不足で上手くいかず、お知恵を拝借できればと思い投稿いたしました。

実装したいカスタマイズ内容ですが、
そのままの状態だとページを開いたときにデフォルトで表示されるのは
menu1の青い画像であるphoto01.jpgになっていますが
こちらを任意の画像での表示にしたいのです。
（その際メニューの順番は変更なしでお願いします！）

何かご不明点等があれば補足をさせていただきます。
もしお分かりになる方がいらっしゃいましたらご教授いただければ幸いです。
どうぞ宜しくお願いいたします。

No.1 ベストアンサー 回答者： LancerVII 回答日時： 2012/07/04 12:41

こんにちは。

jquery.imageNavigation.js

１．44行目から始まる
option = $.extend({
elem:this,
time: 2000,
animationTime: 500,
autoPlay: true,
rolloverImage: true,
rolloverTime: 10,
rolloutTime: 800
}, option);
を
option = $.extend({
elem:this,
time: 2000,
animationTime: 500,
autoPlay: true,
rolloverImage: true,
rolloverTime: 10,
rolloutTime: 800,
start: 0
}, option);

２．55行目の
$active = $('.navi-image a:first', option.elem);
を
$active = $('.navi-image a:eq('+option.start+')', option.elem);
に変更

３．57行目の
$(".navi a:first", option.elem).addClass("active");
を
$(".navi a:eq("+option.start+")", option.elem).addClass("active");
に変更

４．html側のoption指定にてstartを指定してあげれば好きな画像から開始します。(先頭は0)

$("#image-navigation").imageNavigation({
time:2000,
animationTime:500,
rolloverTime: 0,
rolloutTime: 500,
start: 1
});
こんな感じに。


多分これでご希望の動きになると思います。

この回答へのお礼

ズバリ希望の動きになりました！
ご親切に分かりやすい回答を下さり、本当にありがとうございました！！

お礼日時：2012/07/04 13:46