Question

我正在为我的网站创建一个典型的照片库。简单的东西：一个显示缩略图的页面和一个显示照片的页面，上面有照片详细信息，评论等...

但是，我想为用户提供一个选项，通过使用模态窗口来遍历缩略图，而不必单击缩略图来查看照片，然后返回，单击另一个缩略图以查看下一张照片等等。某种照片预览，快速查看。

我的问题不是如何进行，我会做我的研究并弄明白，并在这个社区提问。我的问题更多的是用于遍历缩略图的策略。

拇指在我的页面上显示使用典型的ul列表，如此

<ul>
<li><a href=""><img src="" width="" height="" title="" alt=""></a></li>
<li><a href=""><img src="" width="" height="" title="" alt=""></a></li>
<li><a href=""><img src="" width="" height="" title="" alt=""></a></li>
<li><a href=""><img src="" width="" height="" title="" alt=""></a></li>
...
</ul>

我将使用jquery在模态窗口上显示图像，带有短标题（可能是标记的标题）。我将有next和prev按钮来遍历照片，还有一个关闭按钮来关闭模态窗口。简单的事情。

我的问题是遍历缩略图的最佳策略是什么？我应该使用ul列表并遍历照片，还是应该将所有照片信息分配到一个数组中（使用jquery）并使用该数组来遍历照片？

那里的标准是什么，最好的方法是什么？然后我会弄清楚如何从那里开始，但在继续之前我绝对需要有一个良好的基础。

由于

Answer 1

为每个图像添加一个类（thumbnail？）

现在您可以轻松抓取该集合，例如

$(".thumbnail").each(function() {
   // do whatever
});

在属性中保留其他信息：

<img class="thumbnail" data-caption="Front View" data-id="123" ... />

设计为水平显示而没有项目符号的列表很好而且非常典型。

在模态窗口中遍历缩略图的最佳策略是什么（jQuery）

1 个答案: