Display images from array in HTML

Question

I need create a load-on-demand image gallery, and I start from a JSON that defines all the images in the gallery in a format like:

var GALLERY_JSON = {
   "size" : "200x200",
   "images": [ 
      {
         "src" : "http://aws.netclime.net/Images/1.png",
         "text" : "This is an image1",
         "link" : "http://cnn.com"
      },
      {
         "src" : "http://aws.netclime.net/Images/2.png",
         "text" : "This is an image2",
         "link" : "http://google.com"            
      },
      …,
      {
         "src" : "http://aws.netclime.net/Images/3.png",
         "text" : "This is an imageN",
         "link" : "http://yahoo.com"            
      }
   ]
};

I tried this:

function getArticleImage() {
    var image = new Image;
    image.className = 'banner-img';
    image.src = 'aws.netclime.net/Images/1.png';
    image.setAttribute("height", "200px");
    image.setAttribute("width", "200px");
    image.onload = function() {
        image.classList.remove();
    };
    return image;
}

I need an advice, which is the proper way to display those images with text and link in HTML?

Answer 1

You should loop over your array, create a link element containing an image and append it to the DOM. Here are two links providing documentation and examples :

• createElement
• appendChild

Answer 2

This should get you started...

 var GALLERY_JSON = { "size" : "200x200", "images": [ { "src" : "http://aws.netclime.net/Images/1.png", "text" : "This is an image1", "link" : "http://cnn.com" }, { "src" : "http://aws.netclime.net/Images/2.png", "text" : "This is an image2", "link" : "http://google.com" }, { "src" : "http://aws.netclime.net/Images/3.png", "text" : "This is an imageN", "link" : "http://yahoo.com" } ] }; function getArticleImage(data) { var image = new Image; image.className = 'banner-img'; image.src = data.src; image.setAttribute("height", data.height); image.setAttribute("width", data.width); image.onload = function() { image.classList.remove(); }; return image; } GALLERY_JSON.images.forEach(function(data){ data.width = GALLERY_JSON.size.match(/^[0-9]+/); data.height = GALLERY_JSON.size.match(/[0-9]+$/); document.body.appendChild( getArticleImage(data) ); }) 

Answer 3

I would recommend templating.

IMHO it's a much more powerful solution, you can easily change the template to embed your data in any third party gallery/carousel you want and it's more legible.

Example

Here is an example with the template embeded in the HTML (you could have it out there for better organization)

It relies on

• MustacheJS for the templating
• JQuery just for getting divs by id (you could easily remove that JQuery dependency with DOM if you don't need JQuery anywhere else)

The hacky .match() part is to extract the width and height, if you could provide those 2 values as variables at GALLERY_JSON you wouldn't need that.

 var GALLERY_JSON = { "size" : "200x200", "images": [ { "src" : "http://aws.netclime.net/Images/1.png", "text" : "This is an image1", "link" : "http://cnn.com" }, { "src" : "http://aws.netclime.net/Images/2.png", "text" : "This is an image2", "link" : "http://google.com" }, { "src" : "http://aws.netclime.net/Images/3.png", "text" : "This is an imageN", "link" : "http://yahoo.com" } ] }; var width = GALLERY_JSON.size.match(/^[0-9]+/); var height = GALLERY_JSON.size.match(/[0-9]+$/); GALLERY_JSON.width = width; GALLERY_JSON.height = height; var template = $('#template').html(); var gallery = Mustache.render(template, GALLERY_JSON); $('#gallery').html(gallery); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script> <div id="gallery"></div> <script id="template" type="template/mustache"> <ul> {{#images}} <li> <a href="{{link}}"> <img src="{{src}}" alt="{{text}}" height="{{height}}" width="{{width}}"> <p>{{text}}</p> </a> </li> {{/images}} </ul> </script>