2

I'm trying to create an array of image objects, but struggling. Each object will hold an image and a caption for the image.

The following code works fine when I paste it into Firebug for checking:

Example 1

var imageArray = new Array();

imageArray[0] = new Image();
console.log(imageArray[0]);  //result is <img>

imageArray[0].src = "my-image-01.png";
console.log(imageArray[0]); // result is <img src="my-image-01.png"/>

imageArray[0] = {imageCaption: "A caption for the image"};  //an object
console.log(imageArray[0].imageCaption) //result is: A caption for the image

imageArray[1] = new Image()

... etc

However, I thought the following would make more sense, but it keeps throwing an error and I can't understand why.

Example 2

var imageArray = new Array();

imageArray[0]= {
    image01: new Image(),
    image01.src: "my-image-01.png",  //"SyntaxError: missing : after property id"
    imageCaption: "An image caption"
    };

imageArray[1] = {
    image02: new Image().
    image02.src: "my-image-02.png",
    imageCaption: "Another image caption"
    }

Can anyone explain what's wrong with the code above? Is the first example I posted, the approach I should use? Many thanks

Chestnut Tree
  • 21
  • 1
  • 1
  • 2

5 Answers5

6

Your best bet is to use a sort of factory and .push to the images array.

Try something like this

// Image factory
var createImage = function(src, title) {
  var img   = new Image();
  img.src   = src;
  img.alt   = title;
  img.title = title;
  return img; 
};

// array of images
var images = [];

// push two images to the array
images.push(createImage("foo.jpg", "foo title"));
images.push(createImage("bar.jpg", "bar title"));

// output
console.log(images);

Output

[
  <img src=​"foo.jpg" title=​"foo title" alt="foo title">​, 
  <img src=​"bar.jpg" title=​"bar title" alt="bar title">​
]
maček
  • 76,434
  • 37
  • 167
  • 198
  • This works great - many thanks. I'm not familiar with the factory method, so time for me to brush up on some extra reading :-) – Chestnut Tree Oct 14 '13 at 18:47
1

In your first example you have

var imageArray = new Array();
imageArray[0] = new Image(); // an image object
imageArray[0].src = "my-image-01.png"; // src set in image object

// Here you are completely destroying the image object and creating a new object
imageArray[0] = { imageCaption: "A caption for the image" };  //an object
console.log(imageArray[0]); // Object {imageCaption: "A caption for the image"}

In your second example, you have

imageArray[0]= {
    image01: new Image(),
    image01.src: "my-image-01.png",  // <-- this is wrong
    imageCaption: "An image caption"
};

Here image01 is only a key/string not an object and image01.src is making the error because of the . in it, a key name can contain _ and space (if quoted, i.r. 'key one'). So, you can use it this way, but I think you can remove the image01 : new Image() and just can create new images when you use this objec, like this fiddle, anyways.

var imageArray = [];
imageArray[0] = {
    image01 : new Image(),
    src : "my-image-01.png",
    imageCaption : "Image caption for image-01"
};
imageArray[1] = {
    image01 : new Image(),
    src : "my-image-02.png",
    imageCaption : "Image caption for image-02"
};

for(x = 0; x < imageArray.length; x++) {
    console.log(imageArray[x].src);
}

So, console.log(imageArray[0].src); will output my-image-01.png. If you want to use a caption in the image object itself then there is no caption attribute for image object, instead you can use data-caption or alt to use later somehow, but using HTML5 you can use a caption like this

<figure>
    <img src="picture.jpg" alt="An awesome picture">
    <figcaption>Caption for the awesome picture</figcaption>
</figure>

An example here. Also, as an alternative, you may look at this answer with example.

Community
  • 1
  • 1
The Alpha
  • 143,660
  • 29
  • 287
  • 307
  • Thanks so much for this detailed explanation and for pointing out where the errors are occurring. It all makes much more sense now. I have three excellent solutions, just need to pick one :-) – Chestnut Tree Oct 14 '13 at 18:52
0

Go back to the first one. Change the third line

imageArray[0] = new Image();
imageArray[0].src = "my-image-01.png";
imageArray[0].imageCaption = "A caption for the image";
  • Many thanks. I didn't realise I could append .imageCaption to the array name to make it work. It seems so simple now :-) – Chestnut Tree Oct 14 '13 at 18:52
0

Two issues:

  • there's a . instead of a , at image02 in imageArray[1]
  • you cannot use a . as attribute name of an object

So the code should look something like this:

imageArray[0]= {
    image: new Image(),
    src: "my-image-01.png",  //"SyntaxError: missing : after property id"
    caption: "An image caption"
};

imageArray[1] = {
    image: new Image().
    src: "my-image-02.png",
    caption: "Another image caption"
}
Joren
  • 3,068
  • 25
  • 44
  • Many thanks! The code above works great. Everyone's given such great answers, I feel I'm spoilt for choice! – Chestnut Tree Oct 14 '13 at 18:59
  • @ChestnutTree If this is the most helpful answer in your opinion, you can accept it by clicking the checkmark under the vote counter. – Joren Oct 14 '13 at 19:31
-1

First: System.Array class is abstract, you can't istanziate it. [You can use ArrayList from collections]

Second: to assign a value within object initializzation you must use "=" and not ":" followed by "," like this: new Image { src = "my-image-01.png", imageCaption = "An image caption" }

your code:

var imageList = new ArrayList();

        imageList.Add(new Image { src = "my-image-01.png", imageCaption = "An image caption" });
        imageList.Add(new Image { src = "my-image-02.png", imageCaption = "Another image caption" });
Simon
  • 59
  • 2