画像の拡大表示はLightBoxのプラグインを使えば簡単に実装できますが、
ECサイトなどによくある「サムネイルをクリックするとその画像に切り替わるようにしたい」ということもあるはずです。
実はこれ、jQueryを使うと実現できるんです。
今回はjQueryでサムネイルを切り替える方法をご紹介します。
こちらのサイトを参考にさせていただきました！
コードの詳しい解説等はこちらをご覧ください。
WEBZARU：jQueryでサムネイル切り替え表示のプラグイン
使うコード
プラグインのコード
;(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;
});
};
// デフォルト値
$.fn.FadeSwitch.defaults = {
hideArea: '.box', // 切り替えセレクタ
thumbList: '.thumb li', // サムネイルのリストセレクタ
contentBox: '.showbox', // 切り替えセレクタの親要素
fadeSpeed: 'normal' // 変化させるスピード
};
});
})(jQuery);
これを「fadeswitch.js」というファイル名で保存します。
HTML
<script type="text/javascript" src="./js/fadeswitch.js"></script>
<script type="text/javascript">//
$(function(){
$('#targetarea01').FadeSwitch({
hideArea: '.box', // 切り替えセレクタ
thumbList: '.thumb li', // サムネイルのリストセレクタ
contentBox: '.showbox', // 切り替えセレクタの親要素
fadeSpeed: 'slow' // 変化させるスピード
});
$('#targetarea02').FadeSwitch({
fadeSpeed: 'fast'
});
});
</script>
↑これを＜/head＞より上に記述。
jqueryより下においてあげてくださいね。
</pre> <div class="showbox" id="targetarea01"> <div class="box clearfix" id="show01"><img src="https://awd-web.com/wp/wp-content/uploads/123.jpg" /> <div> 某ケーキ屋さんのいちごタルト。 いちごたっぷりでとってもおいしい！</div> </div> <!-- / #show01 --> <div class="box clearfix" id="show02"><img src="https://awd-web.com/wp/wp-content/uploads/32.jpg" /> <div> キティちゃんのかぶりものをしたモンハンのアイルー。 ペンホルダーにつけてるけど、ほとんどこれは使わないのでほぼ飾り状態。</div> </div> <!-- / #show02 --> <div class="box clearfix" id="show03"><img src="https://awd-web.com/wp/wp-content/uploads/12.jpg" /> <div> 桜の香りがする入浴剤。桜は春のあったかさを感じるので大好きです。</div> </div> <!-- / #show03 --> <ul class="thumb clearfix" id="thumb01"> <li><a href="#show01"><img src="https://awd-web.com/wp/wp-content/uploads/123.jpg" /></a></li> <li><a href="#show02"><img src="https://awd-web.com/wp/wp-content/uploads/32.jpg" /></a></li> <li><a href="#show03"><img src="https://awd-web.com/wp/wp-content/uploads/12.jpg" /></a></li> </ul> <!-- / #thumb01 --></div> <pre> <!-- / #targetarea01 -->
これを表示したい場所に記述します。
サムネイルの個数も増減可能です。
CSS
.showbox {
width: 650px;
margin:0px auto;
overflow:hidden;
}
.box {
display: none;
width:580px;
margin:0px auto 20px auto;
}
.box img {
padding: 0px;
}
.box div {
float: right;
width:250px;
}
.thumb {
padding: 10px 0 0 0;
width: 600px;
border-top: dashed 1px #cabf97;
}
.thumb li {
list-style: none;
float: left;
border: solid 1px #e4ebdc;
width:150px;
height:115px;
text-align:center;
padding:5px;
margin:0px 5px 0px 0px;
}
.thumb li img{
width:150px;
text-align:center;
}
.thumb li.lastChild {
margin-right: 0;
}
.thumb li.active {
border: solid 1px #719a48;
}
.thumb li.active a {
cursor: text;
}
.thumb a {
display: block;
width: 60px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
そしてスタイルシートにこれ↑を追加します。
これでサムネイルの切り替えができるようになります！
画像のところにカスタムフィールドのタグを入れれば、
カスタムフィールドで使用した画像を引っ張ってくることもできて便利！
写真やイラストなど扱うサイトではとっても使い勝手が良いと思います。
ぜひお試しください！
1980年6月生まれ。
秋田県在住。
地元のIT関連会社や市の機関でweb制作に携わり、2011年1月にフリーランスに。現在は子育てしながら日々業務にあたっています。