Week 4: Building a full gallery app

Introduction

Over the last couple of weeks, we've learned how to separate that from what you're showing from how you show it.
So far we've looked at how to represent one image using a single object. But we wanna build massive websites with hundreds, if not thousands of images, and so we need to look at different techniques that don't build aside one object at a time, but
can represent masses and masses of data.
GOAL TO REACH:

1. Store objects in an array and displays them with a template
2. Dynamically display single images from an array
3. Implement a search function
4. Work with complex data structures
5. Switching between different templates

JavaScript arrays

We need a new data structure, to represent lots of data using one template -> Array, which can store lots of objects.
Create: var images = ["a","b","c","d"];
Find: images[1];
Add data: images[1] = 3;

Storing objects in arrays and displaying them with a template

In JS, there are two most important ways to representing data. (1) object (2) array
The template for array, it is designed for lots of images.

The template for array:

Dynamically displaying single images from an array

We want to get a bigger vision of each foto when we click it. -> but here comes the question: how did we know, which img will be grap when we click? How can we display a single img which is right from an array?

to get the right image

we using jQuery to get hold of all the divs with class thumbnail.
// $(this) is jQuery. It refers to the thing(the div) they clicked on.
// data-id There is a special type: the-attribute-of-data. it's nothing else but start with data-. -> but it doesn't do anything to HTML style or others, it just used to add extra data onto out HTML elements, so we can use it later in our JavaScript. -> data-id="{{@index}}"hold the identifier(for example n), and the identifier is pointing to the images[n] -> .data("id"); is jQuery code, we use jQuery.data to get the value of the attribute id.
// {{@index}}: there is actually no variable in our array called index. But @index is going to give you the number of the current element in the array as long as the template is going through an array. -> like array[5], then data("id") will be 5.

class thumbnail

Implementing a search function

3 Step to do:
(1) recognize when sb. is searching a word and figure out what is the word
(2) search through all images in array and find all matches
(3) put the result in new array and display them

step (1) - Recognize
// .keypress() jQuery function .keypress() will recognize when sb. types and texts in the box
// if(e.which==13){ ... } the variable e is speicial, he passed into functions every time we call event. Here e tell us the key on the keypress-event.
every letter has a number, 13 here stands also a letter!
(You can check here for all KEYCODE, see the Dec and Description columns!)

step 1

step(2) Searching
// images: Creating a new array
// data.images.filter(funtion(d)) The function .filter() from jQuery takes an array and looks through that array, finding only those elements that obey a certain property. -> it can be understood like this: it should be in this array only it is a element of data.images && it match to the anonymous function(d)

step 2

//

Data structure for a complete image gallery

Writing the templates for the gallery

Switching displays in the gallery

Summary