Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Next, we're going to work on the navigation links. We're going to take our script and open the window up a little bit here. So, still inside of the (document).ready, let's make a comment that says 'Set up Navigation Links'. So the first thing we're going to do is start with a Dollar sign. Then we want to go through and set a click event on all of the different anchor links inside of the marquee_nav.
So let's start with a beginning and ending parentheses, two tick marks, marquee_nav a.marquee_nav_ item, so any anchor tag that has the marquee_nav_item class on it, .click after the parentheses. Beginning and ending parentheses and a semicolon.
Inside of the click, we're going to add a function, beginning and ending parentheses, beginning and ending bracket. We're going to split that open. Let's tab in. We're going to set the navigation state first, so we're going to add the selected class onto any item that we click on. Dollar sign, beginning and ending parentheses, two tick marks, marquee_nav a.marquee_nav_item. Any anchor tag with marquee_nav_item class inside of marquee_nav, we're going to type; I'll type the parentheses, removeClass, beginning and ending parentheses, semicolon, two tick marks.
We're going to make sure that we take out the class of all of them. Then on the next line, we're going to add in Dollar sign, parentheses this.addClass, so the 'this' in this case is whatever item we actually clicked on. We're going to add the class, selected, then a semicolon.
We need to know which item was actually clicked, and that's going to equal Dollar sign, beginning and ending parentheses, this.index, beginning and ending parentheses, and a semicolon. Next line, var marqueeWidth. This is going to equal Dollar sign, beginning and ending parentheses, two tick marks, .marquee_ container.width, beginning and ending parentheses, semicolon.
Next line, distanceToMove. This is going to tell jQuery how far the photographs need to slide back and forth in order to get to the right photograph. So we're going to do a calculation here. We're going to take marqueeWidth, which is the variable up here, we're going to set it down here, and then we're going to multiply that times, and then in parentheses we're going to put -1.
So whatever the index value is of the link, 0, 1, 2, or 3 for the four links that it has, we want to set the X position to a minus number, so that it will slide to the left, because the entire marquee_photos and all the photos inside that are absolute positioned all start from 0, 0. So in order to get the effect of sliding to the left, we need to set a negative number. So we're going to take whatever the marqueeWidth is and multiply it times -1. Next line, another variable, newPhotoPosition.
The newPhotoPosition is going to equal navClicked times. Let's come up here and copy, Ctrl+C or Command+C, distanceToMove. Then we're going to add a Plus sign, two tick marks for string literal, semicolon, and inside of here, we're going to put px. So we're going to do the calculations on where that new position is supposed to be and then add the px value for the CSS rule.
And then lastly, var newCaption. That's going to equal Dollar sign, beginning and ending parentheses, two tick marks for string literal, .marquee_panel_caption, .get beginning and ending parentheses, navClicked.
So the new caption is going to go and actually get the value with the corresponding data from the navigation item that we clicked. Now, in the next movie, we'll add in the scripts that will change and slide the caption and move the photos back and forth based on the navigation item we clicked 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.
Your file was successfully uploaded.