javascript - 将图像从 Flickr 加载到 Lightbox 2 的更有效方法是什么？

Question

我正在使用 Lightbox 2，我想知道您是否可以给我一些指示。现在这就是我添加图像的方式：

<a href="IMAGE URL GOES HERE" rel="lightbox[gallery1]" title="TITLE HERE"></a>
<a href="IMAGE URL GOES HERE" rel="lightbox[gallery1]" title="TITLE HERE"></a>
<a href="IMAGE URL GOES HERE" rel="lightbox[gallery1]" title="TITLE HERE"></a>
<a href="IMAGE URL GOES HERE" rel="lightbox[gallery1]" title="TITLE HERE"></a>
<a href="IMAGE URL GOES HERE" rel="lightbox[gallery1]" title="TITLE HERE"></a>
<a href="IMAGE URL GOES HERE" rel="lightbox[gallery1]" title="TITLE HERE"></a>
etc.......

Lightbox 的想法是所有在 rel 中具有相同“gallery1”标签的图像都将显示在 Lightbox 库中。我的问题是我不想一次又一次地不断地将这样的图像添加到画廊中。有没有更快、更有效的方法来做到这一点？提前致谢。

Answer 1

您可以将文件名放在一个数组中并在 JS 中循环它们。假设你有 jQuery，试试这个。请注意，这取决于文件的路径。这是一个工作小提琴。

HTML：

<ul id="photos-ul"></ul>

JS：

var fileNames = ["1","2","3"]; // put the filenames in an array and make the url correct in the loop
for (i=0; i < fileNames.length; i++){
    $('#photos-ul').append("<li><a href='http://flicker.com/photo" + fileNames[i] + "'>Photo " + fileNames[i] + "</a></li>"); 
}