Jquery 用缩略图制作一个美丽的画廊

我正在尝试制作一个具有固定html标记的图库，我无法更改该标记。我对这个图库所做的所有修改都应该使用javascript

我的目标：

要从其href中包含图像较大版本的缩略图创建图库，并在单击缩略图时将其显示在缩略图上方

简言之，我想谈谈： 为此：

限制：

我的jQuery知识非常有限

到目前为止我拥有的：

您可以在这个live jsbin中看到我迄今为止开发的内容：

整件事都有一些bug在起作用。为了更好地理解，我为每个动作添加了注释

错误：

第二图像具有标题；只有在单击第二个缩略图时，第二个图像的标题才可见。但是，在加载页面时，标题显示在第一幅图像上

我在lazyload中添加的ajax gif似乎不会在加载页面时结束加载

如果有人能帮我解决这个问题，我将不胜感激。我也想知道你会怎么写这整件事

---

谢谢

在创建了这样的#主映像之后，您需要启动lazyload

//Prepend the big image area. and load the src image of the first thumbnail. The.ast_full is for fancybox integration.
jQuery(".thn_post_wrap .gallery").prepend("<div class='ast_gall'>    
        <a href='"+first_image+"' class='ast_full' title='See larger version of this image'>
        </a><span class='ast_cap'></span>    
        <img id='mainImage' src='"+base+"/wp-content/themes/asteria_lite/images/newloader.gif' data-original='"+first_image+"' class='gallery_full'/>
        </div>");
//lazyload the big images
jQuery("#mainImage").lazyload();    

//if the first thumbail image has caption inside of it, add the caption text to our empty .ast_cap span tag that we appended earlier.
jQuery(".ast_cap").html(jQuery('.has_cap:eq(0) .gallery-caption').html());    

为此

if(jQuery('.gallery-item:eq(0) .gallery-caption').length>0){
  jQuery(".ast_cap").html(jQuery('.gallery-item:eq(0) .gallery-caption').html());
}else{
  jQuery(".ast_cap").css("display","none");//hide .ast_cap if it is empty 
}    

---

我建议您提出一个特定的编码问题，而不是展示您拥有的内容并要求任何改进。您需要在预处理#main image后开始lazyload，并检查第一个拇指。库项：eq（0）像这样可爱！工作完美无瑕。你能加上这个作为答案，让我把你的答案标记为正确答案吗？谢谢：）