仅用缩略图制作漂亮的画廊答案

【问题标题】：Making a beautiful gallery from just thumbnails仅用缩略图制作漂亮的画廊
【发布时间】：2013-11-20 01:22:47
【问题描述】：

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

我的目标：

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

简而言之，我想转这个：http://i.imgur.com/2EqVjiS.png 进入这个：http://i.imgur.com/wu000lu.jpg

限制：

我的jQuery知识非常有限。

我目前所拥有的：

你可以在这个 live jsbin 中看到我到目前为止开发的内容：http://jsbin.com/eYubAdOy/1

整个事情正在部分解决一些错误。我为每个动作添加了 cmets 以便更好地理解。

错误：

第二张图片有标题；只有在单击第二个缩略图时，才能看到第二个图像的标题。但是，在加载页面时，标题会显示在第一张图片上。
当您加载页面时，我使用延迟加载添加的 ajax gif 似乎没有结束加载。

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

谢谢

【问题讨论】：

我建议你问一个特定的编码问题，而不是展示你有什么并要求任何改进..
您需要在添加 #mainImage 之后启动延迟加载，并且对于第一个拇指，您需要像这样检查 .gallery-item:eq(0) http://jsbin.com/adaQATa/1/edit
可爱！完美无缺。您可以将此添加为答案并让我将您的答案标记为正确答案吗？谢谢:)

标签： jquery gallery

【解决方案1】：

你需要在像这样创建#mainImage 后启动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 
}

http://jsbin.com/adaQATa/1/edit

【讨论】：