建立简单的照相馆，需要jQuery的建议

Question

这是我对堆栈溢出的第一个问题。 我正在尝试为裸露的代码，个人照片项目的图库站点编写代码，而我对jquery还是陌生的。

站点已设置（垂直堆叠）：标题，导航（按城市过滤缩略图），显示div（显示：在加载时隐藏），缩略图。

单击缩略图会在显示div中加载较大的图像以及图像数据（标题，日期，说明）。 图片的左右箭头会在城市中的其他图片中循环显示。

弄清楚了我最初提出的大部分问题（如何使图像数据加载图像以及如何使后退箭头起作用）并添加了新的.js。

尚待解决的问题：图像末尾的下一个箭头再次开始，这很好，它再次加载了第一张图像，但没有加载第一张图像的数据，而是出现“未定义”错误。 向后箭头到达下一个图像（第一个图像）后不会加载下一个图像，并显示数据错误“未定义”。 我想停下来写些东西，或者骑自行车继续不间断。

任何帮助将不胜感激！ 在此先感谢您的光临！

的HTML：

<!DOCTYPE html> <html lang="en">
<head>      
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="js/jquery.js"></script>
<script src="move.js"></script>

<title>Untitled Document</title>
</head>
<body>
<header>
<h1>The Photo Project</h1>
    <nav>
    <ul>
     <li id="ny-filter">NY</li>
     <li id="la-filter">LA</li>
     <li id="dc-filter">dc</li>
     <li id="chicago-filter">Chicago</li>
    </ul>
    </nav>
  </header>

  <div id="content">
  <div id="display">
    <img class="prev-big-image" src="img/arrow-88-512.png" width="40px"/>
    <img class="currentImg" src="" width="300px" alt="" title="" date="" />
    <img class="next-big-image" src="img/arrow-88-512-right.png" width="40px"/>
    <h4>Name</h4>
    <h5>Year</h5>
    <p>Description</p>
  </div>
  <div id="thumbs">
    <img src="thumbs/01.jpg" id="1" class="ny" title="Maria" date="2009"     description="found, 6th ave, by 43rd st">
    <img src="thumbs/02.jpg" id="2" class="ny" title="Jesse" date="2009" description="found, Prospect Park ">
    <img src="thumbs/03.jpg" id="3" class="la" title="Catie" date="2009" description="friend, at MoMA">
    <img src="thumbs/04.jpg" id="4" class="dc" title="Albert" date="2009" description="my dry cleaner">
    <img src="thumbs/05.jpg" id="5" class="chicago" title="Lola" date="2009" description="friend, at her boutique, Minji">
  </div>

  </div>
</body>
</html>

JS：

        $(document).ready(function() {

   $('#thumbs img').click(function() {
       var thisThumbURL=$(this).attr('src');
           mainImageURL= thisThumbURL.replace(/thumbs/,'images');
           thisDate=$(this).attr('date');
           thisDesc=$(this).attr('description');

    $('.currentImg').attr('src',mainImageURL).fadeIn("slow");

    $('#display h4').html ($('<strong></strong>').text(this.title)).fadeIn("slow");
    $('#display h5').html( " " + (thisDate) ).fadeIn("slow");
    $('#display p').html( " " + (thisDesc) ).fadeIn("slow");

    $('.next-big-image').fadeIn("slow");
    $('.prev-big-image').fadeIn("slow");
  });

 $('.next-big-image').click(function(){
     var self = $('.currentImg')
            file = self[0].src,
            common = file.substr(0, file.length-6)
            currentId =  +file.substr(-6,2)
            self.title = $('img#' + (currentId+1)).attr('title')
            self.desc = $('img#' + (currentId+1)).attr('description')
            self.date = $('img#' + (currentId+1)).attr('date') 
    $('#display h4').html ($('<strong></strong>').text(self.title)).fadeIn("slow");
    $('#display h5').html( " " + (self.date) ).fadeIn("slow");
    $('#display p').html( " " + (self.desc) ).fadeIn("slow");
            id = ('0' + (currentId+1)).substr(-2),
            nextimage= new Image();

            nextimage.onload = function(){
       // image was preloaded so it exists
      var img = this;

    $(self).fadeOut(300, function(){self[0].src = img.src; $(self).fadeIn(300)}); 
};

            nextimage.onerror = function(){
       // error occured while preloading. we assume image does not exist
    $(self).fadeOut(300, function(){self[0].src = common+ '01.jpg'; $(self).fadeIn(300)});
};
            nextimage.src = common + id + '.jpg';                
});

   $('.prev-big-image').click(function(){
     var self = $('.currentImg')
        file = self[0].src,
        common = file.substring(0, file.length-6)
        currentId =  +file.substr(-6,2),
        self.title = $( 'img#' + (currentId-1)).attr('title')
        self.date = $('img#' + (currentId-1)).attr('date')
        self.desc = $('img#' + (currentId-1)).attr('description')
        $('#display h4').html ($('<strong></strong>').text(self.title)).fadeIn("slow");
        $('#display h5').html( " " + (self.date) ).fadeIn("slow");
        $('#display p').html( " " + (self.desc) ).fadeIn("slow");
        id = ('0' + (currentId-1)).substr(-2),
        nextimage= new Image();

        nextimage.onload = function(){
       // image was preloaded so it exists
     var img = this;

   $(self).fadeOut(300, function(){self[0].src = img.src; $(self).fadeIn(300)});
    };

        nextimage.onerror = function(){
       // error occured while preloading. we assume image does not exist
    $(self).fadeOut(300, function(){self[0].src = common+ '01.jpg'; $(self).fadeIn(300)});
    };
        nextimage.src = common + id + '.jpg';   
  });
   });

CSS：

@charset "UTF-8";
/* CSS Document */

body {
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    display: inline; margin-right:60px;

}

.content{   clear: both;
            width: 700px;
            margin: 10px;}

#thumbs img{
  margin-right:3px;
  margin-top:3px;
  width:148px;
  float:left;
}


#display{
                width: 530px;
                margin: 0;
            }

img {
                margin: 10px 0 10px 0;
}

.currentImg, .prev-big-image, .next-big-image, #display p, #display h5, #display h4 {
    display: none;
}