Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now at this point we want to set up our own custom function to initialize the marquee. This way when the page loads, we can do things like fade in the photos and preset the caption. So inside of our marquee.js file let's scroll all the way down to the bottom. Outside of our document ready area, we're going to create our first custom function. So we're going to type function space initializeMarquee, beginning and ending parenthesis, beginning and ending bracket, let's split that open.
First thing what we want to do is go get the caption content, so dollar sign parenthesis, tick marks for string literals, .marquee_caption_content, .html outside of the parenthesis, beginning and ending parenthesis, semicolon. Inside of that html let's hit return, let's split that open, dollar sign, parenthesis, tick marks for string literal, marquee_panels .marquee_panel, then after we look for this particular class we're going to hit a colon, type first, then a space .marquee_panel_caption, outside of the parenthesis, .html, beginning and ending parenthesis.
So what this statement is going to do is it's going to look for the very first marquee panel, pick out all-of-the html that's part of the marquee panel caption, and it's going to put it as the html value of the marquee caption content, which is in our marquee container. I'm going to scroll up a little bit. The next instruction inside of initialized marquee function, let's hit to return, dollar sign, parenthesis, tick marks for string literal, marquee_nav a.marquee_nav_item, colon, first, outside of the parenthesis. addClass, beginning and ending parenthesis, semicolon, inside of the parenthesis, for addClass tick marks for string literal, we're going to add the selected class.
Next line, dollar sign, parenthesis, tick marks for string literal, .marquee_photos.fadeIn, beginning and ending parenthesis, semicolon, and then put 500 milliseconds inside. So again when we initialize the marquee, we're going to pick out the first caption, put that HTML content into the caption and content area. We're going to put the selected state on the first navigation item, and then we're going to fade in the photos.
Now to make sure that this functions runs, let's come up here and copy the initialized marquee function, copy the name with the parenthesis and we're going to put this after the navigation item inside of the document ready. So let's paste that. Now the other thing we need to do is make a modification in the CSS, since the photography is already showing, we're going to need to hide that first. So let's come over and open the marquee.css and for the rule called marquee photos. Let's come into this rule and lets add display, colon, none, semicolon.
Let's hit File Save. Make sure all of our files are saved. Let's move over to our browser and test this. And now in our browser we'll hit Reload and then you'll see the photography slowly fade in. So now we also have the caption updated but we haven't actually animated the caption to its new state. So in the next movie, we'll work on animating the caption.
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.