Я бы генерировал JS на стороне сервера, в виде литеральной нотации, и вставлял бы этот кусок в HTML. Результат - когда пользователь загружает страницу, - сразу инициализировать объект с нужными путяым к фотографиям. Дабы между ссылками и фотографиями была связь - присвоить idишники ссылкам - и соответсвенно ваш сгенерированный объейт выглядел {<id1>: '<img_src1>', <id2>: '<img_src2>', ...etc... }
То есть:
<script type="text/javascript">
MYObject.init({id1: 'http://../img1.png', id2: 'http://../img2.png' });
</script>
На кажую ссылку повестиь event onclick (именно Event, а не onclick аттрибут). Общий код (очень приблизительный):
// обезопасим внешний контекст
(function() {
var MYObject = {
images: undefined,
image_html: "\
<div>\
<img src="{img_src}">\
<input type="checkbox">\
</div>\
",
init: function(obj) {
this.images = obj;
this.applyEvents();
},
_applyEvents: function() {
this._setAnchorEvents();
// ...другие евенты....
},
_setAnchorEvents: function() {
// ищем нужные тэги a и ставим event onclick на функцию _showImage
},
_showImage: function(event) {
// получить target элемент - ваш тэг a
var id = targetEl.id;
var html = this._renderImageHtml(id);
document.getElementById('КУДА ВСТАВИТЬ КОНТЕНТ') = html;
},
_renderImageHtml: function(id) {
return this.image_html.replace(
"{img_src}", this.images[id]
);
}
};
// сделаем MYObject доступным из вне
window.MYObject = MYObject;
})();