Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So next, we want to create the navigation links and have them be generated from the number of panels that we have. So when we were doing our CSS back in Dreamweaver, we actually put some links in there so that we could style them and add our graphics that we created from Photoshop into the links. So let's go back to Dreamweaver. Let's scroll up into our marquee area, and let's delete the navigation links that we have up here as well. So let's come into our main marquee_container. Let's get rid of those navigation links.
So what we're going to do is start off with a Dollar sign, beginning and ending parentheses, two tick marks. We're going to type .marquee_panels, and then a space, .marquee_panel. We want to search for every time there's a marquee_panel inside of marquee_panels. Let's come outside of the parentheses, type 'each', beginning and ending parentheses, semicolon. Then inside of the each, we're going to type 'function', beginning and ending parentheses, beginning and ending bracket.
Let's split the bracket open. Inside of the parentheses, inside of function, we're going to type index. We want it to count the number of times it finds a panel inside of marquee_panels. Then we're going to type Dollar sign, beginning and ending parentheses, two quotes, marquee_nav. We're going to target the marquee_ nav div which is right down over here. We're going to do append, beginning and ending parentheses, semicolon, two tick marks for string literal. And inside, every time we find a marquee_panel, we want to add an anchor tag.
So another tag, and end the anchor tag completely. So again, this is just another empty link just like we had before, but now we're using jQuery to go through and automatically generate each one of these items.
Okay, I just noticed I need a dot before marquee_nav here. Let's choose File > Save. Make sure we save our index file in Dreamweaver as well. Let's come out to the operating system and let's double-click index.html. Let's hit reload to make sure it's all in place. So now I can see that we have the four dots being generated over here. These dots are being generated because it found four different panels. And although we can only see one of the panels because our overall container has an overflow hidden set that we set in the very beginning, we have are four photographs that are sort of lined up over on the side as well.
So at this point, we're ready to start adding some click events to our different dots down here and start making the full state of this marquee change based on the different dots that we click on.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.