Question

I am using Lightbox 2 and I was wondering if you could give me some pointers. Right now this is how I am adding images:

<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.......

The idea with Lightbox is that all the images that have the same ‘gallery1’ tag in the rel will show up in the Lightbox gallery. My problem is that I don’t want to have to continually add images like this to the gallery one at a time. Is there a quicker, more efficient way to do this? Thanks in advance.

Answer 1

You can put the file names in an array and loop through them in JS. Assuming you have jQuery, try this. Note, it would depend on the path to your files. Here’s a working 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>"); 
}