Dynamically add pictures using javascript.

Question

I've been working on a flowchart type program that changes various parts of the html each time a new question is posed (this question is represented by the 'state' variable below), things like Title, description and images.

Currently, my HTML for the images is:

<a id="imageLink" target="_blank" href=""><img class= 'right' id= 'imageBox' style ='max-height:50%;' src='' /></a>
<h3 id ='imageBoxText' ></h3>

and the image link and the legend for the image are found in imageArray which looks something like this:

imageArray = {'questionOne': ['www.link to image.com,'Legend for image']}

In this case 'questionOne' would be 'state'.

So far, I can load a single image asynchronously using:

document.getElementById("imageBox").src = "http://www.ktcagency.com/img/loader.gif"; // load spinner

var img = new Image(); // load image asynchronously
var newsrc = imageArray[state][0];
img.onload = function () { // onload handler
    document.getElementById("imageBox").src = newsrc;
};
img.src = newsrc;

I also add the description and link to the image while I'm at it:

document.getElementById("imageLink").setAttribute('href',imageArray[state][0])
document.getElementById('imageBoxText').innerHTML = imageArray[state][1];

OK, so now what I need to do is write a function that can do this for multiple images, side by side, reading from a modified imageArray that looks like:

imageArray = {'questionOne': [['www.linktoimage1.com,'Legend for image1'],['www.linktoimage2.com,'Legend for image2']]}    

The code should be able to handle up to three images, but I certainly wouldn't mind if it could do any more.

I tried to do it using a table to represent the images and used a for loop with the code from earlier. The image would never load, stuck on the spinner for ever and the images would all bunch up on one side of the screen.

Any help appreciated, thanks very much.

Answer 1

Well, I think I see what you're trying to do.

It sounds like you're trying to make a slideshow of some kind.

This is an example of how I would have done it.

Here's the jsfiddle so you can see what's going on. http://jsfiddle.net/VodkaTonic/4KWLr/

(function () {

var imageArray = {
    link: [['http://i.imgur.com/7OfqRbF.jpg', 'http://i.imgur.com/AHbc6zO.jpg','http://i.imgur.com/gW144OQ.jpg'],['http://i.imgur.com/v0V8hrB.jpg', 'http://i.imgur.com/9l40vIT.png','http://i.imgur.com/ZXYUttz.png']],
    label: [['Legend for image1','Legend for image2', 'Legend for image3'],['Legend for image4','Legend for image5', 'Legend for image6']]
},
    doc = document,
    question = 0,
    img = doc.getElementsByClassName('images'),
    links = doc.getElementsByClassName('links'),
    label = doc.getElementsByClassName('label'),
    button = doc.getElementById('button');


function add (state) {
        var arr = imageArray.link[state],
            arr2 = imageArray.label[state];
        arr.forEach(function(value,index,array) {
            img[index]['src'] = value;
            links[index]['href'] = value;
        });
        arr2.forEach(function(value,index,array) {
            label[index]['innerHTML'] = value;
        });
    question++;
}

window.addEventListener('load', add(question), false);
button.addEventListener('click', function () {
    add(question);
}, false)
}());