画像ギャラリーの製作

jQuery

今度は実際に使える（？）アプリケーションを作ってみる。今までまとめてきたjQueryのトピックを使って画面遷移しない画像ギャラリーアプリケーションを製作していく。

概要としては、左側にサムネイルのリストを表示し、そこで選択した画像を、右側のメインエリアに表示する。

まずはサムネイルをクリックしたらメイン画像を切り替えるところまでを作成してみる。
ここのサンプルとは一部のコードが異なっている。理由としては、

  • サンプルは横長の写真ばかりだが、自分が持っている画像は縦横がバラバラ。
  • ローカルに画像がなくても表示されるように、インターネット上の写真を参照している。
  • サムネイル用の画像がなかったので、実際の画像のURLを使い、表示サイズを対応させることでサムネイルのように表示させている。
こんなとこ。ご了承されたし。

<html>
  <head>
  </head>
  <body>
    <style>
*{
    margin:0;
    padding:0;
    border:0;
}
body{
    background:black;
}
#container{
    width:1000px;
    margin:20px auto;
}
#navi{
    width:300px;
    float:left;
}
#navi ul{
    height:460px;
}
#navi ul li{
    width:150px;
    height:150px;
    float:left;
}
#navi ul li img{
    border:3px solid white;
    max-width: 140px;
    max-height: 140px;
}
#navi ul li img:hover{
    cursor:pointer;
}
#main{
    width:500px;
    float:left;
    padding-left: 20px;
}
#main img{
    border:3px solid white;
}
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
    $(function(){
      $("#navi img").click(function(){
        var url = $(this).attr("src")
        $("#main img").attr("src", url);
        return false;
      })
    })
    </script>
    <div id="container">
      <div id="navi">
        <ul>
          <li>
            <img src="http://lh6.ggpht.com/_br4kGX1xJhM/SKfCorWsS-I/AAAAAAAAApw/3Jji63O2HqE/s800/IMG_0694.JPG" alt="" />
	  </li>
          <li>
            <img src="http://lh5.ggpht.com/_br4kGX1xJhM/R9KAiN4egbI/AAAAAAAAAhQ/B59rn3LuZMc/s576/IMG_0544.JPG" alt="" />
	  </li>
          <li>
            <img src="http://lh5.ggpht.com/_br4kGX1xJhM/R1JjathcZoI/AAAAAAAAAQ4/GcNsUdY1Mgc/s576/DSCF0035.JPG" alt="" />
	  </li>
          <li>
            <img src="http://lh5.ggpht.com/_br4kGX1xJhM/R1JjbthcZpI/AAAAAAAAARA/kqBmp6Byolo/s576/DSCF0037.JPG" alt="" />
	  </li>
          <li>
            <img src="http://lh5.ggpht.com/_br4kGX1xJhM/R1JjcthcZqI/AAAAAAAAARI/kOAARxM0AkI/s576/DSCF0038.JPG" alt="" />
	  </li>
          <li>
            <img src="http://lh6.ggpht.com/_br4kGX1xJhM/R1Jjc9hcZrI/AAAAAAAAARQ/1e4VTgKjQgk/rwick01.jpg" alt="" />
          </li>
          <li>
            <img src="http://lh3.ggpht.com/_br4kGX1xJhM/R1JjeNhcZtI/AAAAAAAAARg/LpbqDwBWfyg/s800/20031213_%E3%82%B9%E3%83%A9%E3%83%AD%E3%83%BC%E3%83%A0%E4%B8%AD2.jpg" alt="" />
	  </li>
          <li>
            <img src="http://lh5.ggpht.com/_br4kGX1xJhM/R1JjethcZuI/AAAAAAAAARo/_v3x76bL9Sc/s800/20031213_%E3%82%B9%E3%83%A9%E3%83%AD%E3%83%BC%E3%83%A0%E4%B8%AD.jpg" alt="" />
	  </li>
        </ul>
      </div>
      <div id="main">
        <img src="http://lh6.ggpht.com/_br4kGX1xJhM/SKfCorWsS-I/AAAAAAAAApw/3Jji63O2HqE/s800/IMG_0694.JPG" alt="" />
      </div>
    </div>
  </body>
</html>

これでちゃんとサムネイルをクリックするとその画像がメインのエリアに表示される。いいね〜。
次はメインエリアの画像の切り替えの際に、フェードインフェードアウトで緩やかに切り替わるようにしてみる。

<html>
  <head>
  </head>
  <body>
    <style>
*{
    margin:0;
    padding:0;
    border:0;
}
body{
    background:black;
}
#container{
    width:1000px;
    margin:20px auto;
}
#navi{
    width:300px;
    float:left;
}
#navi ul{
    height:460px;
}
#navi ul li{
    width:150px;
    height:150px;
    float:left;
}
#navi ul li img{
    border:3px solid white;
    max-width: 140px;
    max-height: 140px;
}
#navi ul li img:hover{
    cursor:pointer;
}
#main{
    width:500px;
    float:left;
    padding-left: 20px;
}
#main img{
    position:absolute;     /* 常に絶対位置を指定 */
    border:3px solid white;
}
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
    $(function(){
      $("#navi img").click(function(){
        var url = $(this).attr("src")
	//メイン画像の前に、選択したURLの新しいimgタグを挿入する。
	//挿入したimgタグは、今回CSSでposition:absolute;が指定されているので、
	//現在表示中の画像の後ろにぴったり重なって表示される。
        $("#main img").before("<img src='" + url + "' alt=''>");
	//:lastフィルタを指定しているので、クリックする前に表示していた画像をfadeOutする。
        $("#main img:last").fadeOut("slow",function(){
	    //fadeOut完了後、fadeOutした画像（imgタグ）を削除し、
	    //結果的に挿入した新しいimgタグが表示されるようにする。
            $(this).remove()
        });

        return false;
      })
    })
    </script>
    <div id="container">
      <div id="navi">
        <ul>
          <li>
            <img src="http://lh6.ggpht.com/_br4kGX1xJhM/SKfCorWsS-I/AAAAAAAAApw/3Jji63O2HqE/s800/IMG_0694.JPG" alt="" />
	  </li>
          <li>
            <img src="http://lh5.ggpht.com/_br4kGX1xJhM/R9KAiN4egbI/AAAAAAAAAhQ/B59rn3LuZMc/s576/IMG_0544.JPG" alt="" />
	  </li>
          <li>
            <img src="http://lh5.ggpht.com/_br4kGX1xJhM/R1JjathcZoI/AAAAAAAAAQ4/GcNsUdY1Mgc/s576/DSCF0035.JPG" alt="" />
	  </li>
          <li>
            <img src="http://lh5.ggpht.com/_br4kGX1xJhM/R1JjbthcZpI/AAAAAAAAARA/kqBmp6Byolo/s576/DSCF0037.JPG" alt="" />
	  </li>
          <li>
            <img src="http://lh5.ggpht.com/_br4kGX1xJhM/R1JjcthcZqI/AAAAAAAAARI/kOAARxM0AkI/s576/DSCF0038.JPG" alt="" />
	  </li>
          <li>
            <img src="http://lh6.ggpht.com/_br4kGX1xJhM/R1Jjc9hcZrI/AAAAAAAAARQ/1e4VTgKjQgk/rwick01.jpg" alt="" />
          </li>
          <li>
            <img src="http://lh3.ggpht.com/_br4kGX1xJhM/R1JjeNhcZtI/AAAAAAAAARg/LpbqDwBWfyg/s800/20031213_%E3%82%B9%E3%83%A9%E3%83%AD%E3%83%BC%E3%83%A0%E4%B8%AD2.jpg" alt="" />
	  </li>
          <li>
            <img src="http://lh5.ggpht.com/_br4kGX1xJhM/R1JjethcZuI/AAAAAAAAARo/_v3x76bL9Sc/s800/20031213_%E3%82%B9%E3%83%A9%E3%83%AD%E3%83%BC%E3%83%A0%E4%B8%AD.jpg" alt="" />
	  </li>
        </ul>
      </div>
      <div id="main">
        <img src="http://lh6.ggpht.com/_br4kGX1xJhM/SKfCorWsS-I/AAAAAAAAApw/3Jji63O2HqE/s800/IMG_0694.JPG" alt="" />
      </div>
    </div>
  </body>
</html>

い〜んじゃね？ちなみにメイン画像の枠の大きさの関係で、縦長写真を表示した状態で横長写真を表示しようとすると、後ろに出現する横長写真の重なってない部分はいきなり表示される。（隠れてないから。）jQueryのコードの動きを確認するにはちょうどいいかもね。




さて、最後にサムネイル部分の表示を拡張する処理を追加しよう。この時点ではサムネイルには8点の写真しか表示できていないが、これがもっと多くなった場合に、サムネイルを複数ページ持たせておき、次へ、前へ的なボタンを使って切り替えられるようにしたい。しかもスムーズな切り替え。
それを実現したのが次のコード。

<html>
  <head>
  </head>
  <body>
    <style>
*{
    margin:0;
    padding:0;
    border:0;
}
body{
    background:black;
}
#container{
    width:1000px;
    margin:20px auto;
}
#navi{
    overflow:hidden;
    width: 300px;
}
#pageWrap{
    width:980px;
}
#pageWrap .page{
    width:300px;
    float: left;
}
#navi p{
    clear: both;
    width: 300px;
    padding: 10px 0;
    text-align: center;
}
#navi p img{
    cursor: pointer;
}
#navi ul{
    height:460px;
}
#navi ul li{
    width:150px;
    height:150px;
    float:left;
}
#navi ul li img{
    border:3px solid white;
    max-width: 140px;
    max-height: 140px;
}
#navi ul li img:hover{
    cursor:pointer;
}
#main{
    width:200px;
    position:absolute;
    top: 20px;
    left: 450px;
}
#main img{
    position:absolute;
    border:3px solid white;
}
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
    $(function(){
      $("ul li img").click(function(){
        var url = $(this).attr("src")

        $("#main img").before("<img src='" + url + "' alt=''>");
        $("#main img:last").fadeOut("slow",function(){
            $(this).remove()
        });

        return false;
      })

      $("img.next").click(function() {
        var tmp = $("#pageWrap").css("margin-left");
        $("#pageWrap").animate({
          marginLeft : parseInt(tmp) - 300 + "px"
        }, "fast")
      })
      $("img.prev").click(function() {
        var tmp = $("#pageWrap").css("margin-left");
        $("#pageWrap").animate({
          marginLeft : parseInt(tmp) + 300 + "px"
        }, "fast")
      })
    })
    </script>
    <div id="container">
      <div id="navi">
	<div id="pageWrap">
	  <div class="page">
            <ul>
              <li>
		<img src="http://lh6.ggpht.com/_br4kGX1xJhM/SKfCorWsS-I/AAAAAAAAApw/3Jji63O2HqE/s800/IMG_0694.JPG" alt="" />
	      </li>
              <li>
		<img src="http://lh5.ggpht.com/_br4kGX1xJhM/R1JjbthcZpI/AAAAAAAAARA/kqBmp6Byolo/s576/DSCF0037.JPG" alt="" />
	      </li>
              <li>
		<img src="http://lh5.ggpht.com/_br4kGX1xJhM/R1JjcthcZqI/AAAAAAAAARI/kOAARxM0AkI/s576/DSCF0038.JPG" alt="" />
	      </li>
              <li>
		<img src="http://lh6.ggpht.com/_br4kGX1xJhM/R1Jjc9hcZrI/AAAAAAAAARQ/1e4VTgKjQgk/rwick01.jpg" alt="" />
              </li>
              <li>
		<img src="http://lh3.ggpht.com/_br4kGX1xJhM/R1JjeNhcZtI/AAAAAAAAARg/LpbqDwBWfyg/s800/20031213_%E3%82%B9%E3%83%A9%E3%83%AD%E3%83%BC%E3%83%A0%E4%B8%AD2.jpg" alt="" />
	      </li>
              <li>
		<img src="http://lh5.ggpht.com/_br4kGX1xJhM/R1JjethcZuI/AAAAAAAAARo/_v3x76bL9Sc/s800/20031213_%E3%82%B9%E3%83%A9%E3%83%AD%E3%83%BC%E3%83%A0%E4%B8%AD.jpg" alt="" />
	      </li>
              <li>
		<img src="http://lh5.ggpht.com/_br4kGX1xJhM/R1JjgthcZyI/AAAAAAAAASI/wsmsWl2s2Rw/s800/MyPhoto_3.jpg" alt="" />
	      </li>
              <li>
		<img src="http://lh6.ggpht.com/_br4kGX1xJhM/R1Jjg9hcZzI/AAAAAAAAASQ/vly92v-6VRA/s800/MyPhoto_2.jpg" alt="" />
	      </li>
            </ul>
	    <p>
	      <img src="http://editors.ascii.jp/m-kobashigawa/jquery_sample/013/images/btn_next.jpg" alt="次へ" class="next" />
	    </p>
	  </div>
	  <div class="page">
            <ul>
              <li>
		<img src="http://lh4.ggpht.com/_br4kGX1xJhM/R1JjhdhcZ0I/AAAAAAAAASY/5_xGSk1h54s/s800/MyPhoto_1.jpg" alt="" />
	      </li>
              <li>
		<img src="http://lh6.ggpht.com/_br4kGX1xJhM/R1Jjh9hcZ1I/AAAAAAAAASg/Ak7KXaYA4co/s800/MyPhoto_7.jpg" alt="" />
              </li>
              <li>
		<img src="http://lh3.ggpht.com/_br4kGX1xJhM/R1JjiNhcZ2I/AAAAAAAAASo/l-yeElMUG5k/s800/MyPhoto_6.jpg" alt="" />
	      </li>
              <li>
		<img src="http://lh6.ggpht.com/_br4kGX1xJhM/R1Jji9hcZ3I/AAAAAAAAAS0/0pJbGe-S9Iw/s800/20040429_AG1.jpg" alt="" />
	      </li>
              <li>
		<img src="http://lh4.ggpht.com/_br4kGX1xJhM/R1JjjdhcZ4I/AAAAAAAAAS8/WSY6shdcMtI/s800/BeforeAfter.JPG" alt="" />
	      </li>
              <li>
		<img src="http://lh6.ggpht.com/_br4kGX1xJhM/R1Jjj9hcZ5I/AAAAAAAAATE/xLAp6u1ZpYA/s720/314.jpg" alt="" />
	      </li>
              <li>
		<img src="http://lh3.ggpht.com/_br4kGX1xJhM/R1JjkNhcZ6I/AAAAAAAAATM/Kp95Byz-WKc/s720/315.jpg" alt="" />
	      </li>
              <li>
		<img src="http://lh3.ggpht.com/_br4kGX1xJhM/R1JjlNhcZ7I/AAAAAAAAATU/W3TwW9Q6U_s/s800/5122404.jpg" alt="" />
	      </li>
            </ul>
	    <p>
	      <img src="http://editors.ascii.jp/m-kobashigawa/jquery_sample/013/images/btn_prev.jpg" alt="前へ" class="prev" />
	      <img src="http://editors.ascii.jp/m-kobashigawa/jquery_sample/013/images/btn_next.jpg" alt="次へ" class="next" />
	    </p>
	  </div>
	  <div class="page">
            <ul>
              <li>
		<img src="http://lh4.ggpht.com/_br4kGX1xJhM/R1JjmdhcZ8I/AAAAAAAAATc/pMAY0KUJ3IE/s800/5122405.jpg" alt="" />
	      </li>
              <li>
		<img src="http://lh5.ggpht.com/_br4kGX1xJhM/R1JjothcaAI/AAAAAAAAAT8/HW8yal1Iwp0/s912/MyPhoto.dll.jpg" alt="" />
              </li>
              <li>
		<img src="http://lh5.ggpht.com/_br4kGX1xJhM/SHmzpwWA8RI/AAAAAAAAAkw/aBYffTgWYro/s800/PICT0003.JPG" alt="" />
	      </li>
              <li>
		<img src="http://lh3.ggpht.com/_br4kGX1xJhM/SHmzrDcpN0I/AAAAAAAAAk4/BiZc8HD_Ta4/s800/PICT0004.JPG" alt="" />
	      </li>
              <li>
		<img src="http://lh6.ggpht.com/_br4kGX1xJhM/SHmzsd9nxrI/AAAAAAAAAlA/eqNt185JwgU/s800/PICT0005.JPG" alt="" />
	      </li>
              <li>
		<img src="http://lh3.ggpht.com/_br4kGX1xJhM/SHmztW1kj3I/AAAAAAAAAlI/GjSnxbXMYVg/s800/PICT0006.JPG" alt="" />
	      </li>
              <li>
		<img src="http://lh3.ggpht.com/_br4kGX1xJhM/SHmzuugj6RI/AAAAAAAAAlQ/dVNkV6gi2fU/s800/PICT0007.JPG" alt="" />
	      </li>
              <li>
		<img src="http://lh5.ggpht.com/_br4kGX1xJhM/SHmzv-so1nI/AAAAAAAAAlY/Om8yEpk-Xfo/s800/PICT0008.JPG" alt="" />
	      </li>
            </ul>
	    <p>
	      <img src="http://editors.ascii.jp/m-kobashigawa/jquery_sample/013/images/btn_prev.jpg" alt="前へ" class="prev" />
	    </p>
	  </div>
	</div>
      </div>
      <div id="main">
        <img src="http://lh6.ggpht.com/_br4kGX1xJhM/SKfCorWsS-I/AAAAAAAAApw/3Jji63O2HqE/s800/IMG_0694.JPG" alt="" />
      </div>
    </div>
  </body>
</html>

かなり長くなったけど、とりあえずこんな感じ。ちなみにこれもサンプルのコードに少し変更をかけている。サンプルのままだとどーも動作しなかった。
参考にしているURLではpageWrapをクラスとして指定しているが、これだと結果的にサムネイルのスライドの動きがちゃんと動作しない。
でいろいろ試していたら、IDとしてpageWrapを指定してやるとちゃんと期待通りの動作をしてくれた。なんでだろうbody内にはpageWrapクラスを指定した要素は一つしかないのに。。フツーに動くはずなんだがな〜。。