loading an array?

Question

So I have lots of images in a div called thumbnails

like this

<div class="thumbnails">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
</div>

I then wanted to load them into an array and I found a code that I changed slightly that works but my problem is I don't really understand it.

var images = [];
var imageIndex = 0;
var $thumbnails = $(".thumbnails img");

// Load array with image data from html.
var imageCount = $thumbnails.length;

for(var i = 0; i < imageCount; i += 1) {
  images.push({
    source: $($thumbnails[i]).attr('src'),
    caption: $thumbnails[i].alt
  });
}

so if possible could someone explain how that code above load the array "images". I really want to understand it as I can see that most codes involve load and unloading arrays.

Answer 1 · 2015-05-15T19:58:05Z

May 15, 2015 7:58pm

I don't quite newsstand it line by line but it looks like it's taking an empty array literal and populating if with the different images one by one for as many times as you have img elements. And it checks for this count with the length method.

And with an object literal it looks for the different images from their src attribute so it knows which image to display as it iterates through the loop.

Hope this helps :-)

Answer 2 · 2015-05-15T22:23:17Z

May 15, 2015 10:23pm

Here is a commented version of the code which was written:

/* where you will keep the objects containing sets of the attributes 
  * "source, and caption" 
  */
var images = [];
/* this is not needed in this code block */
var imageIndex = 0;

var $thumbnails = $(".thumbnails img");

/* how many img elements are in the ".thumbnails img" collection */
var imageCount = $thumbnails.length;

/* continue as long as variable i is less than the amount of images in
  * the ".thumbnails img" collection 
  */
for(var i = 0; i < imageCount; i += 1) {
  /* Push, creates a new index at the end of the array,
    * this index, will contain an object with the attributes
    * "source" and "caption", and the values come from the
    * $thumbnails object ($(".thumbnails img")). The ones being 
    * called are from index "i" in the object $thumbnails.
    * index i, was declared in the beginning of the for loop.
    */
  images.push({
    source: $($thumbnails[i]).attr('src'),
    /* You can also use $($thumbnails[i]).attr('alt') */ 
    caption: $thumbnails[i].alt
  });
}

So, say you have the following HTML:

<div class="thumbnails">
    <img src="image_one.jpg" alt="Image one" />
    <img src="image_two.jpg" alt="Image two" />
    <img src="image_three.jpg" alt="Image three" />
    <img src="image_four.jpg" alt="Image four" />
    <img src="image_five.jpg" alt="Image five" />
    <img src="image_six.jpg" alt="Image six" />
    <img src="image_seven.jpg" alt="Image seven" />
</div>

The JavaScript code should put the values in "images" like so:

var images = [
    {
       source : 'image_one.jpg',
       alt : 'Image one'
    },
    {
       source : 'image_two.jpg',
       alt : 'Image two'
    },
    {
       source : 'image_three.jpg',
       alt : 'Image three'
    },
    {
       source : 'image_four.jpg',
       alt : 'Image four'
    },
    {
       source : 'image_five.jpg',
       alt : 'Image five'
    },
    {
       source : 'image_six.jpg',
       alt : 'Image six'
    },
    {
       source : 'image_seven.jpg',
       alt : 'Image seven'
    }
];

Welcome to the Treehouse Community

Looking to learn something new?

troy beckett

troy beckett

loading an array?

2 Answers

Jonathan Grieve

Jonathan Grieve

Sean Lum

Sean Lum