gpt4 book ai didi

javascript - 简单图像库的 jQuery/CSS 问题 - 第一页有加载问题

转载 作者:太空宇宙 更新时间:2023-11-04 09:49:55 25 4
gpt4 key购买 nike

我正在开发一个简单的图片库,它可以从 Flickr API 中提取信息。基本上图库的前提是每页必须放10张图片,根据每个图库有多少张图片来分页。当用户点击一张照片时,应该会弹出一个叠加层,并在框架中显示图片。

您可以在 CodePen 上找到我的代码:http://codepen.io/anfperez/pen/QEZNEZ

除了一个异常(exception),我已经能够让图库在大部分情况下成功运行:在第一页上,只加载了九张图片。我的理论是因为我有一些分页 10 <img> 的 jQuery 命令元素。在我的 HTML 中,我有一个隐藏在 #frame div 中的 img 标签,它一直隐藏到用户单击图片为止。所以我的 jQuery 将隐藏的 img 标签计为 10 个图像最大值的一部分,并将其包含在分页系统中。如何排除第一个 img 标签?我一直在尝试使用

$('img:not(:first)')

作为我的选择器,但它不起作用。

第二个问题是,如果您点击离开到另一个页面,然后返回到第一页,您现在可以看到一个大的空白框架元素。但是只要不单击图片,就应该隐藏该元素。有关如何使此代码更清晰的任何建议?

最佳答案

问题是您要将分页类添加到所有 <img>当您在第 38 行的成功循环中设置标签时。

这个:$('img').addClass("paginate")

应该是:$('#photo-list img').addClass("paginate")

这将它限制为您的照片列表 div 中的所有图像,因此它不会捕获您不可见的框架图像。这解决了一个问题和显示不可见框架的分页问题。您也可以将它移到循环之外,因为没有理由在每次循环迭代时都对所有 图像调用它。

无关,你还应该在第78行加一个分号。Chrome抛出一个错误,认为第一个匿名方法的返回值正在调用下一个方法。否则代码看起来不错。

关于javascript - 简单图像库的 jQuery/CSS 问题 - 第一页有加载问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39186930/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com