Question 358058 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Load multiple photos with iterative file names

I have a site I’m trying to build where I want to load about 600 photos that all have a very similar file name Slide1, Slide 2, Slide3 etc.

I’m trying to figure out how to load the picture without having to call all 600 individually.

The original code I was trying to use was.

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="Slide1.jpg">
      <img src="Slide1.jpg" alt="Forest" width="600" height="400">
    </a>
  </div>
</div>

I ended up changing it to

<div class="responsive">
  <div class="gallery">
    <div id="wrapper"></div>
  </div>
</div>

So that I could use this script

<script>
  var container = document.getElementById("wrapper");
  var urls = 590;
  for( i=1; i<urls; i++){
    container.insertAdjacentHTML('beforeend', '<img src="/slides/Slide'+[i]+'.jpg" alt="/slides/Slide'+[i]+'.jpg">');
  }
</script>

But I lose some of the original functionality. And I’m having some people tell me it breaks after Slide150 or Slide200

And I haven’t found a better way that actually works.

Tags:

3

Answers


  1. 0

    This way, you can set width, height and other properties too-

    document.body.onload = createImg;
let p = document.getElementById("parent");

function createImg() {
  let num = 599;
  for (i = 1; i < num; i++) {
    const newImg = document.createElement("img");
    newImg.src = `/slides/Slide${i}.jpg`
    newImg.alt = `/slides/Slide${i}.jpg`
    newImg.setAttribute('target', '_blank');
    newImg.setAttribute('href', `/slides/Slide${i}.jpg`);

    let newA = document.createElement("a");
    newA.setAttribute('target', '_blank');
    newA.setAttribute('href', `/slides/Slide${i}.jpg`);
    newA.appendChild(newImg);
    p.appendChild(newA);
  }
}
    <div class="responsive">
  <div id="parent" class="gallery">
    <a target="_blank" href="Slide1.jpg">
      <img src="Slide1.jpg" alt="Forest" width="600" height="400">
    </a>
  </div>
</div>
    Login or Signup to reply.
  2. 0 
    <script>
  var container = document.getElementById("wrapper");
  var urls = 590;
  for(i = 0; i < urls; i++) {
    container.innerHTML = container.innerHTML + `
      <img src="/slides/Slide${i}.jpg" alt="/slides/Slide${i}.jpg" />
    `;
  }
</script>
    <div class="responsive">
  <div class="gallery">
    <div id="wrapper"></div>
  </div>
</div>

    Try this. What I did is changed the way it adds it to the wrapper, and I added an end "/" to the img tag.

    Let me know if this works! 🙂

    Login or Signup to reply.
  3. 0

    Here is a very terse way of doing what you want:

    const container = document.getElementById("wrapper"),
      n = 120, arr=Array(n).fill(0),
      baseURL="https://picsum.photos/id/", size="/50/30"
  
container.innerHTML = arr.map((v,i)=>
 (v=baseURL+(1+i)+size,`<img src="${v}" alt="${v}">`)).join("n");
    <div class="responsive">
  <div class="gallery">
    <div id="wrapper"></div>
  </div>
</div>

    The .map() expression is at the core of the functionality:

    .map() loops over the array arr For each iteration the callback function takes the current index i adds the value 1 to it and places it into a URL-type string: baseURL+(1+i)+size. The result of this string concatenation is stored into the variabe v (which initially simply holds the value 0) and then it is used to create a part of the resulting HTML string, which is put together by .join()-ing it with a n between each image. On the page the n will appear as a simple white-space.

    The sample pictures for this snippet were taken from https://picsum.photos and, as you can see, not all picture positions are filled. In these positions you can see the alt string.

    My solution differs from the previous ones as it changes the HTML content of the page only once. This will make it much faster.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search