Dynamically adding list of hyperlinked images to web document

Question

I was working on organizing a bunch of images into folders and then creating a web page so I can views them all in a nice little package. I've normalized all files and folders to be named by a basic numeric pattern. I was able to display all of the images nicely but now I want to have them all link to their respective folders.

I may not be understanding the problem well enough to be able to do an appropriate search for the answer. I'm thinking all I need to do is append my image node to an anchor node somehow.

Here is what I have so far:

<body>

<div id="volumeCovers"></div>
<script>
  var container = document.getElementById('volumeCovers');
  var images = 12;
  for (var i = 1; i <= images; i++) {
    var img = new Image();
    img.setAttribute('src', 'volumes/pics/v' + i + '.jpg');
    container.appendChild(img);
  }
</script>

<body>

sorry, i writed 'link' in create tag instant of 'a'; i rewrite my code, i hope that all right. — Petrashka Siarhei
– Petrashka Siarhei, Commented Jan 21, 2018 at 18:37
If a link goes to a respective folder...does this folder have a page.html? — zer00ne
– zer00ne, Commented Jan 21, 2018 at 18:53

Petrashka Siarhei · Accepted Answer · 2018-01-21 18:53:22Z

1

You can insert your image in links and add to container:

   for (var i = 1; i <= images; i++) {
        var img = new Image();
        let link = document.createElement('a');
        link.setAttribute('href','url');
        link.append(img);    
        img.setAttribute('src', 'volumes/pics/v' + i + '.jpg');
        container.appendChild(link);
      }

'url' replace to necessary adress. Maybe also necessary edit of css.

edited Jan 21, 2018 at 18:53

answered Jan 21, 2018 at 11:00

Petrashka Siarhei

73210 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RodNICE Over a year ago

Thank you for the prompt response but the code you provided yielded a blank screen. I reviewed for typos and still no success. You guys are great. Is there perhaps something you may have missed?

RodNICE Over a year ago

I had to modify the following line to get this to work: let link = document.createElement('link') was changed to let link = document.createElement('a')

Collectives™ on Stack Overflow

Dynamically adding list of hyperlinked images to web document

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related