サムネイルでメイン画像切り替え

質問

下記サイトを参考に「前へ」「次へ」のテキストリンクをつけたバージョンを作成していて
以前、質問させて頂いた際に、回答者様のおかげで解決することが出来ましたが、
新たに分からない点が出来たので質問させてください。

http://awd-web.com/blog/2219

現状、サムネイルをクリックしてメイン画像が切り替わるようになっていますが、
これをマウスオーバーで切り替えるようにしたいと思っています。

「前へ」「次へ」のボタンは、クリックで動作するようにし、
サムネイルの箇所だけマウスオーバーにする方法がお分かりの方がおられましたら
ご教授頂けないでしょうか。

$(opts.thumbList, this).click(function(){
のclickをマウスオーバーにするとサムネイルの箇所はうまく行くのですが、
「前へ」「次へ」のクリックでの動作がきかなくなってしまいます。。

どうぞ宜しくお願いいたします。

上記サイトに「前へ」「次へ」をつけたバージョンでの以前お教え頂いたスクリプトです。

(function($){

$(function(){

$('body :first-child').addClass('firstChild');
$('body :last-child').addClass('lastChild');

$.fn.FadeSwitch = function(options){

var opts = $.extend({}, $.fn.FadeSwitch.defaults, options);

$(opts.hideArea + ':first-child').show();
$(opts.thumbList + ':first-child').addClass('active');

$(opts.thumbList, this).click(function(){

var parent_id = '#' + $(this).parents(opts.contentBox).attr('id');

if ($(this).hasClass('active')) return false;

$(parent_id).find(opts.thumbList).removeClass('active');
$(this).addClass('active');
$(parent_id).find(opts.hideArea).hide();
$($(this).find('a').attr('href')).fadeIn(opts.fadeSpeed);

return false;

});

jQuery( '.Next', opts.contentBox ).click( function( evt ) {
var next = jQuery( opts.thumbList + '.active', opts.contentBox ).next();
if ( next.length ) {
next.click();
} else {
jQuery( opts.thumbList + ':first', opts.contentBox ).click();
}
} );

jQuery( '.Prev', opts.contentBox ).click( function( evt ) {
var prev = jQuery( opts.thumbList + '.active', opts.contentBox ).prev();

if ( prev.length ) {
prev.click();
} else {
jQuery( opts.thumbList + ':last', opts.contentBox ).click();
}
} );
};

$.fn.FadeSwitch.defaults = {
hideArea: '.box',
thumbList: '.thumb li',
contentBox: '.showbox',
fadeSpeed: 'normal'
};

});

})(jQuery);

回答No.1

b0a0a · ベストアンサー

ソースが酷い、これでとりあえず解決したいいけどそろそろ最初から作り直した方がいい

$(opts.thumbList, this).click(function(){

↓↓↓

$(opts.thumbList, this).bind("click mouseover",function(){

お礼

ご指摘、ご回答ありがとうございます！

きれいなコードがかけるように勉強したいと思います！

どうもありがとうございました！