CODEWITHSUNDEEP
javascripthtmlarraysimagefor-loop
RodNICE
RodNICE

Reputation: 25

Javascript: Using Loop to Fill Array with URL's for Images

I wanted to display a list of images from a local folder. I guess I should check out a javascript book from the library as my understanding has become rusty.

What I want to accomplish:
1. Fill an array with all of the URL's for each image file
2. Instead of writing all of those img tags, loop through the array and append img tags to parent elements.

I keep approaching this in a sloppy manner. Can anyone help? (By the way, the script tag contains code that does nothing as that is as far as I got).

<!DOCTYPE html>
<html>
<head>
<title> Quick View Gallery </title> 

<script>
var maxPages = 23;
var arr = [];
for (var i = 1; i <= maxPages; i++) {
arr.push(i);
}
</script>

<style>
    img {
        height: 100%;
        width: 100%;
        border: 1px solid #66ccff;
    } 
</style>
</head>
<body bgcolor="#333333">

<div id="comicPages">
    <img src="1.jpg"></img> <p>
    <img src="2.jpg"></img> <br>
    <img src="3.jpg"></img> <br>
    <img src="4.jpg"></img> <br>
    <img src="5.jpg"></img> <br>
    <img src="6.jpg"></img> <br>
    <img src="7.jpg"></img> <br>
    <img src="8.jpg"></img> <br>
    <img src="9.jpg"></img> <br>
    <img src="10.jpg"></img> <br>
    <img src="11.jpg"></img> <br>
    <img src="12.jpg"></img> <br>
    <img src="13.jpg"></img> <br>
    <img src="14.jpg"></img> <br>
<img src="15.jpg"></img> <br>
<img src="16.jpg"></img> <br>
<img src="17.jpg"></img> <br>
<img src="18.jpg"></img> <br>
<img src="19.jpg"></img> <br>
<img src="20.jpg"></img> <br>
<img src="21.jpg"></img> <br>
<img src="22.jpg"></img> <br>
<img src="23.jpg"></img> <br>
</div>
</body>
</html>

Upvotes: 1

Views: 4089

Answers (5)

RodNICE
RodNICE

Reputation: 25

Here is what the final code looks like:

<!DOCTYPE html>
<html>
<head>
    <title> Quick View Comic Gallery </title>

<style>
    #comicPages img {
        height: 100%;
        width: 100%;
        display: block;
        border: 1px solid #66ccff;
    } 
</style>
</head>
<body bgcolor="#333333">

<div id="comicPages"></div>

<script>
    var container = document.getElementById('comicPages');
    var images = 23;
    for (var i = 0; i <= images; i++) {
        var node = new Image();
        node.setAttribute('src', i + '.jpg');
        container.appendChild(node);
    }
</script>

</body>

Upvotes: 0

gyre
gyre

Reputation: 16777

You can use document.createElement, Node#cloneNode, and Node#appendChild to populate your image gallery with comic book pages. You might also want to style your images as display: block instead of using line break elements (<br>) to separate them.

var maxPages = 23
var comicPages = document.getElementById('comicPages')
var img = document.createElement('img')

for (var i = 1; i <= maxPages; i++) {
  img.src = i + '.jpg'
  img.alt = 'Comic Page (' + i + '/' + maxPages + ')'
  comicPages.appendChild(img.cloneNode())
}
<!DOCTYPE html>
<html>

<head>
  <title> Quick View Gallery </title>
  <style>
    #comicPages img {
      height: 100%;
      width: 100%;
      display: block;
      color: #fff;
      border: 1px solid #66ccff;
    }
  </style>
</head>

<body bgcolor="#333333">

  <div id="comicPages">
  </div>
</body>

</html>

Upvotes: 0

GottZ
GottZ

Reputation: 4947

if your filenames are always like n+.jpg you could do the following:

var container = document.getElementById('comicPages');

var images = 23;

for (var i = 0; i < images; i++) {
    // this will create and insert the corresponding image
    // new Image() creates a new <img> element. there is not much of a difference
    // to document.createElement('img'). additional you can call it as:
    // new Image(width, height) in case you already know its dimensions.
    var node = new Image();
    // additional you can also do the following as: node.src = i + '.jpg';
    node.setAttribute('src', i + '.jpg'); // but i like conventions
    container.appendChild(node);

    // this will ensure to insert a line break between each image
    if (i < images - 1) {
        container.appendChild(document.createElement('br'));
    }
}

keep in mind you have to run this after you inserted <div id="comicPages"></div> into your body.

Upvotes: 2

ryan.wise
ryan.wise

Reputation: 479

Here is a non JQuery answer as the question didn't call for it.

You could go through and create an image element for every page and then append that to the comic book pages. For example:

var arr = [];
for (int i = 1; i <= 23; i++) {
    var ele = document.createElement("img");
    ele.src = i+".jpg";
    arr[i] = ele.src;
    document.getElementById("comicPages").appendChild(ele);
}

Here is a fiddle: https://jsfiddle.net/zwg5gLfu/1/

Upvotes: 2

forethought
forethought

Reputation: 3253

If you have the list of images name in the array then you can achieve like this;

jQuery

var imageUrlCollection = new Array(); //image URL collection
var parentElement = $('#comicPages');
for (var item = 0; item < imageUrlCollection.length; item++) {
       parentElement.append($('<img>',{id:item,src:imageUrlCollection[item]}));
}

Vanilla JS

var imageUrlCollection = new Array(); //image URL collection
var parentElement = document.getElementById('comicPages');
for (var item = 0; item < imageUrlCollection.length; item++) {
    var image = document.createElement("img");
     image.id = item;
     image.className = "img";
    image.src = imageUrlCollection[item];   
    parentElement.appendChild(image);
}

Upvotes: 0

Related Questions