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

时间:2013-02-03 03:18:29

标签: javascript html lightbox

我正在使用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库中。我的问题是我不想一次一个地向画廊添加这样的图像。有没有更快,更有效的方法来做到这一点?提前谢谢。

1 个答案:

答案 0 :(得分:0)

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

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>"); 
}