キャプション＆サムネイル付きギャラリーの導入

キャプション（テキスト付き）＆サムネイル付き画像ギャラリーの導入

サムネイル部分が見出しのようになり、クリックすると画像とテキストが同時に変わるJQueryです。

http://www.tam-tam.co.jp/tipsnote/javascript/post68.html
【JQuery】自動切り替え＋サムネイルクリックで画像切り替え

上記のサイトに導入の仕方が詳しく紹介されています。それを元に作成したのが下のサンプルです。

左のサムネイルをクリックすると、右のメイン画像と下のテキストがそれぞれ変化します。
これは紹介文を多く必要とするギャラリー形式のコンテンツを作ろうとサンプリングしたものです。
紹介サイトとの違いは、キャプション（テキスト部）が一つ増えているところが大きく違います。
後はスライドを停止させているところで、クリックしないと動的になりません。

このJQueryが優れているところは、シンプルでありながら、自動再生のON、OFFが出来て、テキストボックスを作成できるところです。
alt属性と連動させた簡単なキャプション付きギャラリーもありますが、テキストがメインとなるコンテンツには有効なスクリプトです。

テキスト部を二つに分けたのは、見出し部とテキスト部の差別化です。
これで、簡単なメニューコンテンツが容易にできるようになりました。
用途としては、飲食店のビジュアルメニューや旅館やホテルの施設やプラン紹介など、トップページのコンテンツとして設置することができます。

サンプルのソースまずはJQueryなので、

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

を記述してJQueryの本体を読み込んでください。
もうJQueryを導入している場合は必要ありませんが、バージョンには気をつけましょう。

続いてスクリプト部を紹介します。

<script type="text/javascript">
$(function (){
//定義
var active="active",interval=6000;//class名,切り替わる時間
var index=0, timerId=null;
var tabs=$("#plan_sam > li"), //サムネイルのリストID名
content=$("#plan_view > p"), //メイン画像のID名
cap=$("#caption_plan01 > p"),//テキスト部1のID名
cap2=$("#caption_plan02 > p");//テキスト部2のID名

tabs.each(function(){$(this).removeClass(active);});
content.hide();
cap.hide();
cap2.hide();
tabs.eq(0).addClass(active);
content.eq(0).fadeIn("fast");
cap.eq(0).fadeIn("fast");
cap2.eq(0).fadeIn("fast");
//サムネイルクリック時
tabs.click(function(){
if($(this).hasClass("active")) return;
if(timerId) clearInterval(timerId),timerId=null;
change(tabs.index(this));
setTimer();
return false;
});

//タイマーセット

//setTimer();
//function setTimer(){
//timerId=setTimeout(timeProcess,interval);
// return false;
//}

//function timeProcess(){
//change((index+1)%tabs.length);
// timerId=setTimeout(arguments.callee,interval);
//}

//サムネイルをクリックした時or指定時間がきた時の画像切り替え
//切り替わる初速と終速とfadeOutとfadeInの数値は同じにすること。
function change(t_index){
tabs.eq(index).removeClass(active);
tabs.eq(t_index).addClass(active);
//fadeout
setTimeout(function(){
content.eq(index).stop(true, true).fadeOut(500),//切り替わる速さ（終速）短いほど早い
cap.eq(index).stop(true, true).hide(),
cap2.eq(index).stop(true, true).hide()
;}, 200);//切り替わり出す速さ（初速）短いほど早い
//fadein
setTimeout(function(){
index=t_index;
content.eq(index).fadeIn(500),//切り替わる速さ（終速）短いほど早い
cap.eq(index).fadeIn(500),//切り替わる速さ（終速）短いほど早い
cap2.eq(index).fadeIn(500)//切り替わる速さ（終速）短いほど早い
;}, 200)//切り替わり出す速さ（初速）短いほど早い
}
});
</script>

コメントアウトでどこを変えれば良いのか書いてあります。
自動再生する場合は「//タイマーセット」から下のコメントアウトを外せば動き出します。
初めの方に後でHTMLで使うタグのクラスの設定も出来ます。
後半では切り替わる速さを指定することもできます。

次はCSS部です。

<style type="text/css">
<!-- 
body, p, h1, h2, h3, h4, h5, ul, li {
margin: 0px;
padding: 0px;
}
img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#plan_box{
width:550px;
position: relative;
margin-right: auto;
margin-left: auto;
height: 312px;
background-color: #FFF;
}
#plan_box #plan_view {
position: relative;
width:400px;
height:252px;
top:0px;
overflow:hidden;
left: 150px;
}
#plan_box #plan_view p {
position: absolute;
top: 0px;
}
#plan_box #plan_sam {
list-style-type: none;
top: 0px;
position: absolute;
width: 150px;
}

#plan_box #plan_sam li {
float: left;
vertical-align: bottom;
}
#plan_box #plan_sam li img {
vertical-align: bottom;
cursor: pointer;
}
#plan_box #plan_sam li.active img{
opacity:1.0;
filter:alpha(opacity=100);
-ms-filter: "alpha( opacity=100 )";
width: 150px;
height: 84px;
margin-left: -10px;
border-right-width: 10px;
border-right-style: groove;
border-right-color: #666;
}
#plan_box #plan_sam li img:hover {
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}

#plan_box #caption_plan01 {
font-weight: bold;
padding: 10px;
text-align: center;
display: block;
height: 20px;
background-color: #FFE8FF;
margin-right: auto;
margin-left: auto;
}
#plan_box #caption_plan02 {
background-color: #EBEBEB;
text-align: center;
padding: 10px;
width: auto;
margin-right: auto;
margin-left: auto;
height: 20px;
display: block;
}
-->
</style>

左にサムネイルを付けたスタイルになっています。
サムネイル部が左に突き出しているのはCSSで抑制しています。
数年前はhoverも作っていたのですが、今はopacityがあるので、簡単にマウスイン・アウトが作れますね。

次はHTML部です。

<div id="plan_box">
<!--メイン画像 -->
<div id="plan_view">
<p><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_02.jpg" width="400" height="252" alt="高台のカフェテリア"></p>
<p><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_03.jpg" width="400" height="252" alt="にこにこ園"></p>
<p><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_04.jpg" width="400" height="252" alt="嘉徳の海岸"></p>
</div>
<!--サムネイル -->
<ul id="plan_sam">
<li><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_02-150x84.jpg" width="150" height="84" alt="高台のカフェテリア"></li>
<li><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_03-150x84.jpg" width="150" height="84" alt="にこにこ園"></li>
<li><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_04-150x84.jpg" width="150" height="84" alt="嘉徳の海岸"></li>
</ul>
<!--テキスト部１ -->
<div id="caption_plan01">
<p>テキスト1 (高台のカフェテリア)</p>
<p>テキスト2(にこにこ園)</p>
<p>テキスト3(嘉徳の海岸)</p>
</div>
<!--テキスト部２ -->
<div id="caption_plan02">
<p>予備テキスト1(高台のカフェテリア)</p>
<p>予備テキスト2(にこにこ園)</p>
<p>予備テキスト3(嘉徳の海岸)</p>
</div>
</div>

ビジュアル編集する時はテキスト部が下に増えていきますので、ドリームウィーバーなどでビジュアルを確認しながら編集する時は、最初の一行しか表示されないので注意してください。

このサンプルで使っている元画像のサイズは実寸ではありませんので、ブラウザによっては線が入る場合があります。
縦横比が同じ場合は問題ありません。
むしろ実装する場合は実寸サイズにしてください。

テキスト部もタグを「ｈ1～」に変更することも出来るので、 SEO対策にもなります。

サンプル「ZIP」は、こちらからダウンロードしてください。