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

フォトギャラリーNo2はフェード効果を付けることで、
jQueryらしいコンテンツにしましたが、
今度はサムネイルのリストを固定配列ではなく、
スライド式で切り替えられるようにしてみましょう。

【基本設計】
サムネイルを並べたリストをパネルとしてまとめておき、
 1.class=”next”のボタンがクリックされた時にはパネルを左へスライド
 2.class=”prev”のボタンがクリックされた時にはパネルを右へスライド
⇒ click()イベントの中でanimate()を使って、
  パネルのmarginLeftをパネル1つ分スライドさせる。

【jQuery】
<script type=”text/javascript”>
$(function(){
 $(“#navi a”).click(function(){
  //フェードで切り替える
  $(“#main img”).before(“<img src='” + $(this).attr(“href”) + “‘ alt=”>”);
  $(“#main img:last”).fadeOut(“fast”,function(){
  $(this).remove();
 });
 return false;
 });
 
 //パネルを次へ切り替え
 $(“img.next”).click(function(){
  $(“#navi .pagewrap”).animate({
  marginLeft : parseInt($(“#navi .pagewrap”).css(“margin-left”)) – 309 + “px”
  },”fast”);
  });
 
 //パネルを前へ切り替え
 $(“img.prev”).click(function(){
  $(“#navi .pagewrap”).animate({
  marginLeft : parseInt($(“#navi .pagewrap”).css(“margin-left”)) + 309 + “px”
  },”fast”);
  });
});
</script> 

【HTML】
<div id=”container”>
    <div id=”navi”>
        <div>
            <div>
                <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>
                <p><img src=”images/next.jpg” alt=”次へ” class=”next” /></p> 
            </div>
       
            <div>
                <ul>
                    <li><a href=”images/image09.jpg”>
                    <img src=”images/image09_thum.jpg” alt=”” /></a></li>
                    <li><a href=”images/image10.jpg”>
                    <img src=”images/image10_thum.jpg” alt=”” /></a></li>
                    <li><a href=”images/image11.jpg”>
                    <img src=”images/image11_thum.jpg” alt=”” /></a></li>
                    <li><a href=”images/image12.jpg”>
                    <img src=”images/image12_thum.jpg” alt=”” /></a></li>
                    <li><a href=”images/image13.jpg”>
                    <img src=”images/image13_thum.jpg” alt=”” /></a></li>
                    <li><a href=”images/image14.jpg”>
                    <img src=”images/image14_thum.jpg” alt=”” /></a></li>
                    <li><a href=”images/image15.jpg”>
                    <img src=”images/image15_thum.jpg” alt=”” /></a></li>
                    <li><a href=”images/image16.jpg”>
                    <img src=”images/image16_thum.jpg” alt=”” /></a></li>
                </ul>
                <p><img src=”images/prev.jpg” alt=”前へ” class=”prev” /></p> 
            </div>  
        </div>
    </div>
       
 <div id=”main”><img src=”images/image01.jpg” alt=”” /></div>
</div>

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

This entry was written by admin , posted on 日曜日 6月 12 2011at 08:06 pm , 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>