スライド式イメージギャラリー

jQuery を使って、サムネイルの一覧から画像を選んで拡大表示するイメージギャラリーを作ります。

目次

内容	デモ
イメージギャラリーの基本部分を作成する	Demo_jq09_01.html
画像の切り替えにアニメーション効果を加える	Demo_jq09_02.html
サムネイル画像の追加に対応するスライドパネルを作成する	Demo_jq09_03.html

イメージギャラリーの基本部分を作成する

シンプルなイメージギャラリーのページを作成します。ページ左側に８枚のサムネイル画像、右側に１枚のメイン画像（拡大画像）を配置し、サムネイル画像がクリックされるとメイン画像が切り替わるギャラリーです。

画像サイズは、メイン画像が 640 x 480、サムネイル画像が 140 x 105 となるように用意します。

Demo: クリック ⇒ Demo_jq09_01.html

HTML と CSS

• 解説
  • サムネイルの一覧は ul/li 要素で記述し、サムネイル要素はそれぞれ a 要素で包みます。a 要素の href 属性にはサムネイルに対応するメイン画像のパスを指定します。
  • メイン画像は div#main 内に img 要素として配置し、デフォルトでは、１番目のサムネイル画像に対応するメイン画像を表示しておきます。

• HTML
  • <div id="container">
  •  <div id="navi">
  •   <ul>
  •    <li><a href="imgs/jq09_01.jpg"><img src="imgs/jq09_01_thum.jpg" alt=""></a></li>
  •    <li><a href="imgs/jq09_02.jpg"><img src="imgs/jq09_02_thum.jpg" alt=""></a></li>
  •    <li><a href="imgs/jq09_03.jpg"><img src="imgs/jq09_03_thum.jpg" alt=""></a></li>
  •    <li><a href="imgs/jq09_04.jpg"><img src="imgs/jq09_04_thum.jpg" alt=""></a></li>
  •    <li><a href="imgs/jq09_05.jpg"><img src="imgs/jq09_05_thum.jpg" alt=""></a></li>
  •    <li><a href="imgs/jq09_06.jpg"><img src="imgs/jq09_06_thum.jpg" alt=""></a></li>
  •    <li><a href="imgs/jq09_07.jpg"><img src="imgs/jq09_07_thum.jpg" alt=""></a></li>
  •    <li><a href="imgs/jq09_08.jpg"><img src="imgs/jq09_08_thum.jpg" alt=""></a></li>
  •   </ul>
  •  </div>
  •  <div id="main">
  •    <img src="imgs/jq09_01.jpg" alt="">
  •  </div>
  • </div>

• CSS
  • * { margin: 0; padding: 0; border: 0; }
  • body { background: black; }
  • #container { width: 1000px; margin: 20px auto; }
  • #navi { width: 300px; float: left; }
  • #navi ul { height: 460px; list-style-type: none; }
  • #navi ul li {width: 150px; float: left; }
  • #navi ul li img { border: 3px solid white; }
  • #main { width: 650px; float: right; }
  • #main img { border: 3px solid white; }

JavaScript

• JavaScript
  • $(function(){
  •   $("navi a").click(function(){
  • 　　$("#main img").attr("src",$(this).attr("href"));
  • 　　return false;
  • 　});
  • });

• 解説
  • サムネイル画像を含む a 要素に対して click() で click イベントを設定します。
  • サムネイルがクリックされると、クリックされた a 要素の href 属性の値を attr() で読み出し、メイン画像（#main img）の src 属性の値を変更します。これで、サムネイルをクリックするとメイン画像が切り替わるようになります。
  • なお、a 要素に click イベントを設定する場合は、最後に return false; を記述し、a 要素のリンクを無効にしています。

画像の切り替えにアニメーション効果を加える

サムネイル画像がクリックされてメイン画像が切り替わるとき、アニメーション効果を付けて滑らかに画像を切り替えるように変更します。

Demo: クリック ⇒ demo_jq09_02.html

• HTML
  • <div id="container">
  •  <div id="navi">
  •   <ul>
  •    <li><a href="imgs/jq09_01.jpg"><img src="imgs/jq09_01_thum.jpg" alt=""></a></li>
  •    <li><a href="imgs/jq09_02.jpg"><img src="imgs/jq09_02_thum.jpg" alt=""></a></li>
  •    <li><a href="imgs/jq09_03.jpg"><img src="imgs/jq09_03_thum.jpg" alt=""></a></li>
  •    <li><a href="imgs/jq09_04.jpg"><img src="imgs/jq09_04_thum.jpg" alt=""></a></li>
  •    <li><a href="imgs/jq09_05.jpg"><img src="imgs/jq09_05_thum.jpg" alt=""></a></li>
  •    <li><a href="imgs/jq09_06.jpg"><img src="imgs/jq09_06_thum.jpg" alt=""></a></li>
  •    <li><a href="imgs/jq09_07.jpg"><img src="imgs/jq09_07_thum.jpg" alt=""></a></li>
  •    <li><a href="imgs/jq09_08.jpg"><img src="imgs/jq09_08_thum.jpg" alt=""></a></li>
  •   </ul>
  •  </div>
  •  <div id="main">
  •    <img src="imgs/jq09_01.jpg" alt="">
  •  </div>
  • </div>

• JavaScript
  • $(function(){
  •   $("#navi a").click(function(){
  •     $("#main img").before("<img src='"+$(this).attr("href")+"' alt=''>");
  •     $("#main img:last").fadeOut("slow",function(){
  •       $(this).remove();
  •     });
  •     return false;
  •   });
  • });

• CSS （追加分のみ）
  • #main img {
  •   position: absolute;
  •   border: 3px solid white;
  • }

• 解説
  • サムネイルがクリックされると before() を使って、メイン画像（#main img）の前に新たな img 要素を挿入します。挿入される img 要素の src 属性には、クリックされた a 要素の href 属性から読みだした値（クリックされたサムネイルに対応するメイン画像）を設定します。
  • #main 内の img 要素は、CSS で position: absolute を設定しているので、もともと表示されていたメイン画像と、後からスクリプトで追加した画像はぴったり重なった状態になります。
  • 次に fadeOut() を使って、もとの画面をすこしずつ非表示にしていきます。すると、手前のメイン画像が非表示になることで、奥にあった新しい画像が出現します。
  • div #main 内には、もとのメイン画像とスクリプトで追加した画像しかないので、セレクターで #main img:last と指定すれば、もとのメイン画像を選択します。フェードアウトが完了しても、元の img 要素は display プロパティが none になって見えなくなっただけで HTML 要素として存在するので、クリック要素を繰り返すと img 要素が次々と増えてしまいます。そこでコールバック関数ないで remove() を使い、フェードアウトが終わったらもとの img 要素を完全に削除します。

サムネイル画像の追加に対応するスライドパネルを作成する

画像を増やしたい場合の対応です。
サムネイル部分を複数のパネルとして用意し、各パネルを横にスライドして切り替えるようにします。

Demo: クリック ⇒ demo_jq09_03.html

HTML

• HTML （追加部分は青色文字）
  • <div id="containers">
  •   <div id="navi">
  •     <div class="pageWrap">
  •       <div class="page">
  •          <ul>
  •             <li><a href="imgs/jq09_01.jpg"><img src="imgs/jq09_01_thum.jpg" alt=""></a></li>
  •             （中略）
  •             <li><a href="imgs/jq09_08.jpg"><img src="imgs/jq09_08_thum.jpg" alt=""></a></li>
  •          </ul>
  •          <p><img src="imgs/btn_next.jpg" alt="次へ" class="next"></p>
  •       </div>
  •       <div class="page">
  •          <ul>
  •             <li><a href="imgs/jq09_09.jpg"><img src="imgs/jq09_09_thum.jpg" alt=""></a></li>
  •             （中略）
  •             <li><a href="imgs/jq09_16.jpg"><img src="imgs/jq09_16_thum.jpg" alt=""></a></li>
  •          </ul>
  •          <p><img src="imgs/btn_prev.jpg" alt="前へ" class="prev" />
  •                   <img src="imgs/btn_next.jpg" alt="次へ" class="next"></p>
  •       </div>
  •       <div class="page">
  •          <ul>
  •             <li><a href="imgs/jq09_17.jpg"><img src="imgs/jq09_17_thum.jpg" alt=""></a></li>
  •             （中略）
  •             <li><a href="imgs/jq09_19.jpg"><img src="imgs/jq09_19_thum.jpg" alt=""></a></li>
  •          </ul>
  •          <p><img src="imgs/btn_prev.jpg" alt="前へ" class="prev"></p>
  •       </div>
  •     </div>
  •   </div>
  •   <div id="main">
  •     <img src="imgs/jq09_01.jpg" alt="">
  •   </div>
  • </div>

• 解説
  • 一度に表示する ul 要素ごとに、１パネルとし、page という class 属性をつけた div 要素（div.page）で囲みます。１つの div.page では、８枚の画像を表示しますので、div.page の数は、表示する画像の数によります。
  • 最初の div.page には「次へ」ボタンを、最後の div.page には「前へ」ボタンを配置し、間の div.page には「次へ」「前へ」両方のボタンを配置します。
  • 「次へ」ボタンの img 要素には class="next" を、「前へ」ボタンの img 要素には class="prev" を設定します。

CSS

• CSS （追加分のみ）
  • #navi {
  •   overflow: hidden;
  • }
  • #navi .pageWrap{
  •   width: 900px;
  • }
  • #navi .pageWrap .page {
  •   width: 300px;
  •   float: left;
  • }
  • #navi p{
  •   clear: both;
  •   width: 300px;
  •   padding: 10px 0;
  •   text-align: center;
  • }
  • #navi p img{
  •   cursor: pointer;
  • }

• 解説
  • １パネル div.page の幅を 300px としているので、すべてのパネルを包む #navi .pageWrap の幅 width は div.page の数によって変化します。ここでは #navi .pageWrap {width: 900px;} としています。
  • 複数の div.page が横に並んでいますが、div.page を含んでいる div#navi には overflow: hidden を設定していて、特定の div.page のみが画面上に表示されます。

JavaScript

• JavaScript （追加分のみ）
  • &(function(){
  •   $("img.next").click(function(){
  •     $("#navi .pageWrap"}.animate({
  •       "margin-left" : parseInt($("#navi .pageWrap").css("margin-left"))-300+"px"
  •     },"fast");
  •   });
  •   $("img.prev").click(function(){
  •     $("#navi .pageWrap"}.animate({
  •       "margin-left" : parseInt($("#navi .pageWrap").css("margin-left"))+300+"px"
  •     },"fast");
  •   });
  • });

• 解説
  • 「次へ」ボタンがクリックされると、animate() を使って div.pageWrap の margin-left プロパティの値を、現在の値から３００ピクセルを引いた値へ徐々に変化します。「前へ」ボタンがクリックされると、逆に３００ピクセルを足した値に変更します。これによりパネル部分が左右にスライド移動します。