jQuery/CSS 简单图片库存在问题 - 第一页存在加载问题
jQuery/CSS issues with simple image gallery - first page has loading issues
我正在开发一个简单的图片库，它可以从 Flickr API 中提取信息。基本上图库的前提是每页必须放10张图片，根据每个图库有多少张图片来分页。当用户点击一张照片时，应该会弹出一个叠加层，并在框架中显示图片。
您可以在此处的 CodePen 上找到我的代码：http://codepen.io/anfperez/pen/QEZNEZ
除了一个例外，我已经能够让图库成功运行大部分时间：在第一页上，只加载了九张图片。我的理论是因为我有一些 jQuery 命令分页 10 <img> 元素。在我的 HTML 中，我有一个隐藏在 #frame div 中的 img 标签，直到用户点击图片时它才会隐藏。所以我的 jQuery 将隐藏的 img 标签计为 10 个图像最大值的一部分，并将其包含在分页系统中。如何排除第一个 img 标签？我一直在尝试使用
$('img:not(:first)')
作为我的选择器，但它不起作用。
第二个问题是，如果您单击转到另一个页面，然后 return 转到第一页，您现在可以看到一个大的空白框架元素。但是只要不单击图片，就应该隐藏该元素。关于如何使此代码更清晰的任何建议？
问题是当您在第 38 行的成功循环中设置所有 <img> 标签时，您将分页 class 添加到它们。
这个：$('img').addClass("paginate")
应该是：$('#photo-list img').addClass("paginate")
这将它限制为您的照片列表中的所有图像 div，因此它不会捕捉到您不可见的框架图像。这解决了一个问题和显示不可见框架的分页问题。您也可以将其移出循环，因为没有理由在每次循环迭代时都对 all 图像调用它。
无关，你还应该在第78行加一个分号。Chrome抛出一个错误，认为第一个匿名方法的return值正在调用下一个方法。否则代码看起来不错。
我正在开发一个简单的图片库，它可以从 Flickr API 中提取信息。基本上图库的前提是每页必须放10张图片，根据每个图库有多少张图片来分页。当用户点击一张照片时，应该会弹出一个叠加层，并在框架中显示图片。
您可以在此处的 CodePen 上找到我的代码：http://codepen.io/anfperez/pen/QEZNEZ
除了一个例外，我已经能够让图库成功运行大部分时间：在第一页上，只加载了九张图片。我的理论是因为我有一些 jQuery 命令分页 10 <img> 元素。在我的 HTML 中，我有一个隐藏在 #frame div 中的 img 标签，直到用户点击图片时它才会隐藏。所以我的 jQuery 将隐藏的 img 标签计为 10 个图像最大值的一部分，并将其包含在分页系统中。如何排除第一个 img 标签？我一直在尝试使用
$('img:not(:first)')
作为我的选择器，但它不起作用。
第二个问题是，如果您单击转到另一个页面，然后 return 转到第一页，您现在可以看到一个大的空白框架元素。但是只要不单击图片，就应该隐藏该元素。关于如何使此代码更清晰的任何建议？
问题是当您在第 38 行的成功循环中设置所有 <img> 标签时，您将分页 class 添加到它们。
这个：$('img').addClass("paginate")
应该是：$('#photo-list img').addClass("paginate")
这将它限制为您的照片列表中的所有图像 div，因此它不会捕捉到您不可见的框架图像。这解决了一个问题和显示不可见框架的分页问题。您也可以将其移出循环，因为没有理由在每次循环迭代时都对 all 图像调用它。
无关，你还应该在第78行加一个分号。Chrome抛出一个错误，认为第一个匿名方法的return值正在调用下一个方法。否则代码看起来不错。