Question

这是我关于Stack Overflow的第一个问题。我正在尝试为个人照片项目制作一个裸骨的代码，图库网站，我是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;
}

建立简单的照片库，需要jquery建议

0 个答案: