Функция подключения к изображениям, отображаемым из папки P C

Question

Я довольно плохо знаком с JS и программированием в целом, поэтому заранее извиняюсь, если объяснение немного неаккуратное, но я постараюсь сделать его как можно более понятным.

Итак то, что я пытаюсь сделать, это иметь код JS, который считывает и отображает (на странице HTML) фотографии из папки P C, делает их кликабельными и при нажатии перенаправляет вас на страницу с то же фото, но в высоком разрешении.

Теперь у меня есть этот фрагмент кода, который отображает упомянутые изображения, но дело в том, что я не могу понять, как его "подключить" к картинки и сделать их кликабельными. Что делает это более трудным, так это то, что я пытаюсь сделать весь этот код динамическим c (как вы можете видеть из приведенного ниже кода), поэтому я бы не хотел иметь никаких жестко закодированных названий изображений и т.д. на.

var index = 1;
var tempImg = new Image();
tempImg.onload = function(){
   appendImage();
}
var tryLoadImage = function(index){
   tempImg.src = 'img/' + index + '.jpg';
}
var appendImage = function(){
   var img = document.createElement('img');
   img.src = tempImg.src;
   document.body.appendChild(img)
   tryLoadImage(index++);
}
tryLoadImage(index);

Любая помощь очень ценится, большое спасибо!

Answer 1

Вы можете сделать ваши изображения кликабельными, добавив к ним функцию onclick. Попробуйте что-то вроде этого:

var appendImage = function(){
   var img = document.createElement('img');
   img.src = tempImg.src;

   img.onclick = e => {
      // do something you want to show the full picture like this maybe
      var el = document.getElementById("fullpictureid");
      if (el && e.target.src) {
         el.src = e.target.src;
         // so that it sets "src" in <img id="fullpictureid"> for example 
      }
   };
   document.body.appendChild(img)
   tryLoadImage(index++);
}