【応用編】フォトギャラリーNo1

HTML、CSS、イベントによる制御方法を元に、
応用例としてスワップ式フォトギャラリーを作りましょう。
Dreamweaverなどのコーディング用のソフトを使えば、
Javascriptのコードを自分で書かなくても実装することは可能ですが、
jQueryを使えば非常にシンプルに実装できます。
jQueryやJavascriptでWEBサイトを作る場合、

  1. 何をしたとき
  2. どうするか?

を整理しておき、id名やclass名を設計してからHTMLを書くことがポイントです。

【基本設計】
もっとも簡単なフォトギャラリーとして

  1. サムネイル画像をクリックしたとき
  2. メイン画像を切り替える

これを素直にjQueryで記述します。そのための工夫として、
サイズを縮めたサムネイル画像、元のサイズのメイン画像を用意しておき、
サムネイル画像がクリックされたらメイン画像を差し替えます。
 ⇒click()イベントの中でメイン画像のsrc属性をattr()で差し替える。
  メイン画像のファイルパスは、サムネイル画像のhref属性から取得する。

【jQuery】
<script type=”text/javascript”>
$(function(){
 $(“#navi a”).click(function(){
  $(“#main img”).attr(“src”,$(this).attr(“href”));  //メイン画像を差し替える
  return false;
 });
});
</script>
 
【HTML】
<div id=”container”>
 //サムネイル画像のリスト
 <div id=”navi”>
  <ul>
   <li><a href=”images/image01.jpg”>
    <img src=”images/image01_thum.jpg” alt=”” /></a></li>
   <li><a href=”images/image02.jpg”>
    <img src=”images/image02_thum.jpg” alt=”” /></a></li>
   <li><a href=”images/image03.jpg”>
    <img src=”images/image03_thum.jpg” alt=”” /></a></li>
   <li><a href=”images/image04.jpg”>
    <img src=”images/image04_thum.jpg” alt=”” /></a></li>
   <li><a href=”images/image05.jpg”>
    <img src=”images/image05_thum.jpg” alt=”” /></a></li>
   <li><a href=”images/image06.jpg”>
    <img src=”images/image06_thum.jpg” alt=”” /></a></li>
   <li><a href=”images/image07.jpg”>
    <img src=”images/image07_thum.jpg” alt=”” /></a></li>
   <li><a href=”images/image08.jpg”>
    <img src=”images/image08_thum.jpg” alt=”” /></a></li>
  </ul>
 </div>
 //メイン画像
 <div id=”main”><img src=”images/image01.jpg” alt=”” /></div>
</div>

フォトギャラリーサンプル

This entry was written by admin , posted on 金曜日 6月 10 2011at 10:06 am , filed under 応用例 and tagged , . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

コメントを残す

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>