● Review Divided Times
● Collection of Data
● Manipulating Collections
● Introduction to Final Project
The GA solution
Collections of Data
What if we had a collection of images that we
wanted to display to the screen, one at a time?
How could we store all the images?
Collections of Data
var image_1 = “images/image_1.jpg”;
var image_2 = “images/image_2.jpg”;
var image_3 = “images/image_3.jpg”;
var image_4 = “images/image_4.jpg”;
var image_5 = “images/image_5.jpg”;
We can insert new values into any space in the
array using the positions index.
myArr = ‘Humpday’;
We can overwrite all the elements of an array
simply by giving the array new values or by
setting an array equal to a different array.
var fruits = ['Apples', 'Oranges', 'Pears', 'Grapes'];
myArr = fruits;
console.log(myArr); // prints Apples, Oranges,
What if you would like to know how long the
array is (how many elements)?
console.log(myArr.length); // prints 4
How to iterate over an array:
Create an array of sports teams (or other
collection of stuff) and print them to the page.
NHL Eastern Conference Standings
NBA Atlantic Standings
MLB American League East Standings
Description: Students create a basic image
carousel using arrays and .each jQuery
Hint: Go to the API documentation at jquery.
com to review the documentation and practice
examples of the .each() function.
● Students can decide to use the provided
photos of food or animals or pull photos from
● Students will use the .click() method to
navigate between pictures.
● The first part of this exercise is timed!
● Create the HTML for the page (15 minutes)
● Add CSS to style the page (15 minutes)
After 30 minutes, provide students with
HTML/CSS starter code.
The remainder of the time should be used to
This exercise will carry over into next session.
Bonus: They will use the change event to give
a ranking to the photos between 1 and 5. The
user should be forwarded to the next image
Access the jQuery Plugin Registry
Access the slider tag
Select Anything Slider
Get AnythingSlider working independently
Incorporate AnythingSlider into Divided Times
Continued in Lesson 11 (Lab)
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.