Image array in HTML5

Question

so if I wanted to grab a few pictures online, put them in an array and use them on a website I am making how can I do it using Javascript.

var images = [
{caption: "Red Slate Mountain", alt: "Mountain", url:"https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Red_Slate_Mountain_1.jpg/320px-Red_Slate_Mountain_1.jpg"},

{caption: "St. Petersburg River", alt: "River", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Saint-petersburg-river-march-24-2016.jpg/320px-Saint-petersburg-river-march-24-2016.jpg"},

{caption: "Lybian Desert", alt: "Desert", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Libyan_Desert_-_2006.jpg/320px-Libyan_Desert_-_2006.jpg"},

{caption: "Azerbaijan Forest", alt: "Forest", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Azerbaijan_forest_3.JPG/320px-Azerbaijan_forest_3.JPG"},

{caption: "Indonesian Jungle", alt: "Jungle", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Indonesian_jungle3%2C_Zoo_Prague.jpg/320px-Indonesian_jungle3%2C_Zoo_Prague.jpg"}
];

Those are some pictures, i have a caption to have under the picture, the alt if it doesnt load the picture, and the url of the location.

The container i have so far is:

window.onload = function(){
  var imageContainer = document.querySelector("#image");

  for(var i=0; i < images.length; i++){ 
  var myImageStr += "<img alt='" + images[i].alt + "'" + 
                    " src='" + images[i].url + "' />";

  imageContainer.innerHTML = myImageStr;
};

It doesn't load anything, so I am assuming I am off by something here, just not sure what. Any help please :)

Is there any message in the browser console?

NineBerry
– NineBerry

2017-03-04 20:19:46 +00:00
Commented Mar 4, 2017 at 20:19 — NineBerry
– NineBerry, Commented Mar 4, 2017 at 20:19
no, just a header saying "Image Array"

Gian Nobilione
– Gian Nobilione

2017-03-04 20:21:01 +00:00
Commented Mar 4, 2017 at 20:21 — Gian Nobilione
– Gian Nobilione, Commented Mar 4, 2017 at 20:21

kind user · Accepted Answer · 2017-03-04 20:24:09Z

3

Instead of dropping a static strings into the DOM, I would suggest you to use both createElement() and appendChild() functions. It looks much clearer.

var images = [{caption:"Red Slate Mountain",alt:"Mountain",url:"https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Red_Slate_Mountain_1.jpg/320px-Red_Slate_Mountain_1.jpg"},{caption:"St. Petersburg River",alt:"River",url:"https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Saint-petersburg-river-march-24-2016.jpg/320px-Saint-petersburg-river-march-24-2016.jpg"},{caption:"Lybian Desert",alt:"Desert",url:"https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Libyan_Desert_-_2006.jpg/320px-Libyan_Desert_-_2006.jpg"},{caption:"Azerbaijan Forest",alt:"Forest",url:"https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Azerbaijan_forest_3.JPG/320px-Azerbaijan_forest_3.JPG"},{caption:"Indonesian Jungle",alt:"Jungle",url:"https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Indonesian_jungle3%2C_Zoo_Prague.jpg/320px-Indonesian_jungle3%2C_Zoo_Prague.jpg"}],

    parent = document.getElementById('box');
    window.onload = function() {
      images.forEach(function(v) {
        var img = document.createElement("img");
        img.src = v.url;
        img.alt = v.alt;
        box.appendChild(img);
      })
    }

<div id='box'></div>

edited Mar 4, 2017 at 20:24

answered Mar 4, 2017 at 20:21

kind user

42k8 gold badges69 silver badges78 bronze badges

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

1 Comment

Gian Nobilione Over a year ago

This worked :) thank you so much. Did exactly what i was looking for

Faical ARAB · Accepted Answer · 2017-03-04 20:23:59Z

2

I guess you should declare myImageStr as an empty string outside the loop . Like this var myImageStr = "";

Pls give it a try and tell us if this solved your problem

answered Mar 4, 2017 at 20:23

Faical ARAB

3853 silver badges14 bronze badges

Comments

Titus · Accepted Answer · 2017-03-04 20:37:16Z

2

You need to declare the myImageStr variable outside the loop.

Also, set the imageContainer HTML after you've constructed the string.

Like this:

var images = [{caption: "Red Slate Mountain", alt: "Mountain", url:"https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Red_Slate_Mountain_1.jpg/320px-Red_Slate_Mountain_1.jpg"}, {caption: "St. Petersburg River", alt: "River", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Saint-petersburg-river-march-24-2016.jpg/320px-Saint-petersburg-river-march-24-2016.jpg"}, {caption: "Lybian Desert", alt: "Desert", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Libyan_Desert_-_2006.jpg/320px-Libyan_Desert_-_2006.jpg"}, {caption: "Azerbaijan Forest", alt: "Forest", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Azerbaijan_forest_3.JPG/320px-Azerbaijan_forest_3.JPG"}, {caption: "Indonesian Jungle", alt: "Jungle", url: "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Indonesian_jungle3%2C_Zoo_Prague.jpg/320px-Indonesian_jungle3%2C_Zoo_Prague.jpg"}];


window.onload = function(){
   var imageContainer = document.querySelector("#image");
   var myImageStr = "";
   for(var i=0; i < images.length; i++){ 
       myImageStr += "<img alt='" + images[i].alt + "'" + " src='" + images[i].url + "' />";
       // Adding Caption (you may need to wrap the image and the caption into a container)
       // myImageStr += "<caption align='bottom'>"+images[i].caption+"</caption>"

       // Each image on its own line.
       // myImageStr += "<br>";
       
   }
   imageContainer.innerHTML = myImageStr;
}

<div id="image"></div>

edited Mar 4, 2017 at 20:37

answered Mar 4, 2017 at 20:21

Titus

22.6k1 gold badge26 silver badges36 bronze badges

3 Comments

Gian Nobilione Over a year ago

Yes this worked :) the only thing it is missing is the captions and each picture to be printed on a new line

Titus Over a year ago

@GianNobilione I've added some comments that illustrate how you could add the caption and set each image on its own line.

Gian Nobilione Over a year ago

Thank you so much for all the help :)

Collectives™ on Stack Overflow

Image array in HTML5

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related