ImageNavigation：画像の切り替え方法

質問

設置とCSSカスタマイズはできますが、プログラムの修正はできないため皆様のお知恵をお貸しください。

現在、下記URLにあるImageNavigationというjQueryプラグインを使用したいと考えています。
http://blog.net-king.com/

別画像のサムネイル使用でIE6でも動作可能という希望を満たしているスライドショーがあまりないためできればこちらを使用したいのですが、当方してはマウスオーバーでの画像切り替えではなく画像クリックでの画像切り替えを希望しているため、何とかこちらを修正できないかと思っています。

作者にお尋ねするのが良いと思うのですが、しばらくサイトが更新がされていないようなのでこちらで教えていただけないかと思った次第です。
どの部分を修正すればよいのでしょうか？
アドバイスよろしくお願いします。

回答No.2

LancerVII · ベストアンサー

こんにちは。

中途半端なクリック対応をしてしまいました。失礼致しました。
先ほどの修正は元に戻してください。

76行目～101行目を以下の内容にします。

$(".navi a",option.elem).mouseover(function(){
$active = $('.navi-image a.active', option.elem);
$next = $(".navi-image a."+$(this).attr("rel")+"");
$('.navi a', option.elem).removeClass("active");
$(this).addClass("active");
//rolloverImage_on(this, option);
rolloverImage_chenge(this, option);
}).mouseout(function(){
rolloverImage_out(this, option);
$activeING = $(".navi-image a.active:animated",option.elem);
if($activeING.length !=0 ) {
$activeING.stop().css({opacity: 1.0});
$(".navi-image a.last-active").each(function(){
$(this).removeClass("last-active");
});
}
}).click(function() {
$active = $('.navi-image a.active', option.elem);
if($active.attr("rel") != $next.attr("rel") ) {
$active.addClass('last-active');
$active.removeClass('active');
$next.stop().css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, option.animationTime, function() {
$active.removeClass('active last-active');
});
}
});

これでお望みの動きになると思います。

お礼

早速のお返事ありがとうございます^^
まさにまさに、思ったとおりの動きになりました！
感謝いたします、本当にありがとうございました^^

回答No.1

LancerVII

こんにちは。

jsフォルダにあるjquery.imageNavigation.jsファイル内の76行目を変更します。
$(".navi a",option.elem).mouseover(function(){
のmouseoverをclickに変更
$(".navi a",option.elem).click(function(){

これでマウスオーバーの動きがクリックしたときになるはずです。

補足

ご指摘部分を修正したところ、思ったとおりの動きになりました！
こんなに早くお答えいただきありがとうございました^^

ずうずうしいのを承知でもうひとつお伺いしたいのですが、本来の「マウスオーバーでサムネイルの画像が変化」するのは変わらずに、「画像の切り替えをマウスクリック」にすることは可能でしょうか？
難しいのであればあきらめますが、そうするとまさに理想の動きになるのです・・・。