Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now to make the navigation items properly link to the corresponding photograph we are going to come down into the click function that we have assigned on all those navigation items. So the first item we are going to come in here and change is this variable here, this marqueeWidth. We are not going to be using this anymore, because we created that new global variable called photoWidth, so let's delete that. Now in the next line where we calculate a variable called distanceToMove, we use marqueeWidth. Let's select that variable, let's delete it, and let's replace it with window.photoWidth, and then let's select window.photoWitdh and just copy it to the clipboard.
On the next line, we have a variable called newPhotoPosition. This is where we actually pick what the new position of the photoLineup should be so that it corresponds to the navigation item that was clicked. So we have that extra photograph in our lineup now at the beginning. So what we want to do is take the navClicked variable here, we still want to multiply it by distanceToMove, but then we want to take that value and subtract the window.photoWidth variable. So to get these to be calculated first, let's put these inside the parentheses. So add a beginning parenthesis in front of navClicked and an ending parenthesis after distance to move.
Then let's subtract the window.photoWidth variable. So with these changes made, let's come back out to our browser. Let me hit Reload and now we see the London photograph comes up like we saw before, but now when I click on each one of these navigation items, the photo lineup will then animate to the corresponding photo properly. So now that all of these work in place, what we are going to be adding in the next movie is adding that wraparound effect so that when I am on the first photo like I am right now and I come over here and click on the last item, instead of having all the photos swipe across, we are going to continue to animate the photo lineup toward the right, revealing this same photo we are looking at now being the first item on the far left of the photo lineup.
And then once it's in place, we will snap it in so that if I'm on the last item, as I am right here, and I click the first item, we can continue to move the photo marquee to the right, reveal this photo, and then again snap that back into place.
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.