jQueryでの画像ビューアー用プラグインはたくさん公開されていますが、
単純にサムネイルを並べて、クリックしたらメインビジュアルが切り替わる
シンプルなスライドショー的ビューアーを作ってみたので紹介してみます。
まずは動作のサンプルから。
サムネイル画像をクリックしてください。
jQuery SIMPLE IMAGE VIEWER【SAMPLE】
「jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法」サンプルを別枠で表示
下部に並べてあるサムネイルをクリックすると
メインビジュアル部分がクロスフェードして切り替わります。
（自動でスライドする動作などは今回は付けていません。）
サムネイルは透過具合でアクティブ状態か、
そうでないかを変化させています。
全体構成についてHTMLから。
◆HTML <div id="viewer"> <div> <img src="img/photo01.jpg" width="400" height="300" alt="" /> <img src="img/photo02.jpg" width="400" height="300" alt="" /> <img src="img/photo03.jpg" width="400" height="300" alt="" /> <img src="img/photo04.jpg" width="400" height="300" alt="" /> </div> <ul> <li><a href="#"><img src="img/photo01.jpg" width="100" height="75" alt="" /></a></li> <li><a href="#"><img src="img/photo02.jpg" width="100" height="75" alt="" /></a></li> <li><a href="#"><img src="img/photo03.jpg" width="100" height="75" alt="" /></a></li> <li><a href="#"><img src="img/photo04.jpg" width="100" height="75" alt="" /></a></li> </ul> </div><!--/#viewer-->
大枠をID「#viewer」で覆い（ID名は任意）
画像が切り替わるメインビジュアル部分は＜div＞で囲んで、
サムネイルは＜li＞リストで形成しています。
メインビジュアルとサムネイルの並び（順序）は
同じにしておく必要があります。
メインビジュアルで使用する画像も、サムネイル画像に対しても
HTML側ではIDやクラスはつけていません。
そしてこのHTMLソースに対してのCSSは以下の様に。
◆CSS
#viewer {
margin: 0 auto;
width: 400px;
text-align: left;
}
#viewer div {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
}
#viewer div img {
top: 0;
left: 0;
position: absolute;
}
#viewer ul {
width: 400px;
}
#viewer ul li {
width: 100px;
float: left;
display: inline;
}
#viewer .active {
filter:alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}
/* =======================================
ClearFixElements
======================================= */
#viewer ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#viewer ul {
display: inline-block;
overflow: hidden;
}
メインビジュアル部分の「#viewer div」と「#viewer div img」と
サムネイルの透過具合を制御する「#viewer .active」以外に書かれている
各プロパティは今回のサンプルのレイアウトを形成するものなので
あまり重要視しなくていいものになります。
そして実際に動作を実行させるスクリプトは以下の様になります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#viewer div img').each(function(i){
$(this).css({opacity:'0'}).attr('id','view' + (i + 1).toString());
$('#viewer div img:first').css({opacity:'1',zIndex:'99'});
});
$('#viewer ul li').click(function(){
var connectCont = $('#viewer ul li').index(this);
var showCont = connectCont+1;
$('#viewer div img#view' + (showCont)).siblings().stop().animate({opacity:'0'},1000);
$('#viewer div img#view' + (showCont)).stop().animate({opacity:'1'},1000);
$(this).addClass('active');
$(this).siblings().removeClass('active');
});
$('#viewer ul li:not(.active)').hover(function(){
$(this).stop().animate({opacity:'1'},200);
},function(){
$(this).stop().animate({opacity:'0.5'},200);
});
$('#viewer ul li').css({opacity:'0.5'});
$('#viewer ul li:first').addClass('active');
});
</script>
まずメインビジュアル部分の＜div＞に入っている画像の数を数えて
それぞれ順番にIDを付けます。
そしてサムネイルの＜li＞をクリックした際に、
そのクリックされた＜li＞の順序番号を判断して、
同じ数のメインビジュアルID番号を表示させる構成になっています。
スクリプト実行後のHTMLソースについては
イメージとして以下の様になっています。
◆HTML（スクリプト実行後） <div id="viewer"> <div> <img src="img/photo01.jpg" width="400" height="300" alt="" id="view1" style="z-index:99;" />【ID="view1"とz-index="99"が付与】 <img src="img/photo02.jpg" width="400" height="300" alt="" id="view2" />【ID="view2"が付与】 <img src="img/photo03.jpg" width="400" height="300" alt="" id="view3" />【ID="view3"が付与】 <img src="img/photo04.jpg" width="400" height="300" alt="" id="view4" />【ID="view4"が付与】 </div> <ul> <li><a href="#"><img src="img/photo01.jpg" width="100" height="75" alt="" /></a></li>【クリックでメインビジュアルID="view1"を表示】 <li><a href="#"><img src="img/photo02.jpg" width="100" height="75" alt="" /></a></li>【クリックでメインビジュアルID="view2"を表示】 <li><a href="#"><img src="img/photo03.jpg" width="100" height="75" alt="" /></a></li>【クリックでメインビジュアルID="view3"を表示】 <li><a href="#"><img src="img/photo04.jpg" width="100" height="75" alt="" /></a></li>【クリックでメインビジュアルID="view4"を表示】 </ul> </div><!--/#viewer-->
ECサイトなどのサイトで商品を紹介する写真がたくさんある場合など
シンプルな構成の画像ビューアーが便利に使えるかな、と思います。
画像の切り替えビューアーが必要になった際に是非。。。