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

質問

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

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

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

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

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

回答No.1

LancerVII · ベストアンサー

こんにちは。

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
});
こんな感じに。

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

お礼

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