こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

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);

投稿日時 - 2013-03-08 02:03:21

QNo.7982121

すぐに回答ほしいです

質問者が選んだベストアンサー

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

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

↓↓↓

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

投稿日時 - 2013-03-16 08:17:17

お礼

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

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

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

投稿日時 - 2013-04-18 11:46:04

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問