サムネイルでメイン画像切り替え
下記サイトを参考に「前へ」「次へ」のテキストリンクをつけたバージョンを作成していて
以前、質問させて頂いた際に、回答者様のおかげで解決することが出来ましたが、
新たに分からない点が出来たので質問させてください。
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);
お礼
導入する事ができました。 javascript無しでも出来たんですね！ありがとうございます！