Can javascript set attributes like links and a title based on an ID of an image?

I'm building an image gallery with 600 thumbnail photos. All the thumbnails are the same size and they should all behave in the same way. Clicking on a thumbnail will bring up a small version of the image and there's an image magnifier called jQZoom that will let visitors see the photo in more detail. ( http://www.mind-projects.it/projects/jqzoom/ )

Here's the code I'm using for a typical thumbnail (number 462):

<a  href='javascript:void(0);' title="Plate 462" rel="{gallery: 'gal1', smallimage: './Vol4/Small/tafel_462.jpg',largeimage: './Vol4/Large/tafel_462.jpg'}">
<img src="Vol4/Thumbs/tafel_462.jpg" width="94" height="150" border="0" /></a>

The problem is that it seems like a lot of code for what I'm trying to do. In particular, every time I add a thumbnail I have to type in the new image number 4 times (for the title and the sources of the 3 image sizes).

Isn't there a way I could just put in the image number once (as an ID or something) and have a javascript interpret that to assig开发者_高级运维n the title and the three links?

What you think about a function to return the desired HTML?

function getImageThumb(src, title) {
    return $('<a href="javascript:void(0);" title="' + title + '" rel="{gallery: \'gal1\', smallimage: \'./Vol4/Small/' + src + '.jpg\', largeimage: \'./Vol4/Large/' + src + '.jpg\'}">' +
             '<img src="./Vol4/Thumbs/' + src + '.jpg" alt="' + title + '" width="94" height="150" border="0" /></a>');
}

So you can create each thumb like:

$("#container").append(getImageThumb('tafel_462', 'Plate 462'));
$("#container").append(getImageThumb('another_img', 'An Example'));

Yes, you can. Your a html should have two attributes, let's say data-imgsrc, and data-gallery, and remove the a's rel attribute and the img's src attribute like this:

<a  href='javascript:void(0);' title="Plate 462" data-gallery="gal1" data-imgsrc="tafel_462.jpg">
<img width="94" height="150" border="0" /></a>

Then you'd do:

$(document).ready(function(){
  $("a[data-imgsrc]").each(function(){  //Customize your selector
     var imgsrc = $(this).attr("data-imgsrc");
     var relObj = {
        "gallery": $(this).attr("data-gallery"),
        "smallimage": "./Vol4/Small/"+imgsrc,
        "largeimage": "./Vol4/Large/"+imgsrc
     };
     $(this).attr("rel", JSON.stringify(relObj));
     $(this).find("img").attr("src", "Vol4/Thumbs/"+imgsrc);
  });
});

If your gallery isn't variable, you could remove the data-gallery attribute and just put 'gallery1' in the js.

That's it. Hope this helps. Cheers