JavaScript DOM 编程艺术 - 笔记 => Drake Leung

[lyyourc]

The following is that I copy from my blog.

[lyyourc]

How to create a Image gallery

Recently, I read Web Design with JavaScript and the Document Object Model. It instructs me how to make a image galler. So, the following is my summary. I hope we can make it become one part of us.

the Whole Process

First of all, I gonna tell you the whole process, caz I think it’s rather important. So, here we go.

1. when we click the markup , a photo and a description will appear below the , and no new tab.
2. we need to bind a click event to each of , the content of the event is showing a photo and a description. (prepareGallery)
3. how to show the photo and description? (showPic)
4. If we want to show a photo or something, we gotto create a placeholder. (preparePlaceholder)
5. Then,* where* should we place the placeholders, that is behind the list. (insertAfter)
6. As we known, we should call the 2 and 4 when website finishes loading. (window.onload)

Notice: the 1 is the most important thing that we shouldn’t forget. Becuz of it, it enables us to infer the following steps easily.

Some Hints

1. Rememer our target every time.
2. using a loop, bind a event to each of . To stop creating a new tab, we need return false at the end of the event.
3. we change the placeholder’s src, the source of it comes from the ’s href.
4. To create a placeholder, we using** DOM create** it dynamically.
5. What we want is that the placeholders should be set after the list. So, we hava to custom a function called insertAfter.
6. The last but not the least, window.onload can’t bind multiple event at the same time. That means only the last one is available.