Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
We actually set this with these statements here, but again, they're inside the clickevent. In order to run these by themselves, we're going to put the thumbnail updater in its own function as well. So I'm going to come up here and I'm going to put two forward slashes in front of all of these statements. We're going to comment those out. Down here, lower in the page, we're going to create another custom function. I'm going to type function updateThumbnails, beginning and ending parentheses, beginning and ending bracket. Then we're going to just split this open.
Inside updateThumbnails, what we're going to do is we're going to actually test the state of the thumbnails. Since we're no longer in the click event, we lose the actual event that we were using before to assign the classes. So, what we're going to have to do is cycle through all the anchor tags first and then check to see which anchor tags match the preview image that's showing up. So to begin this, let's start with a Dollar sign, beginning and ending parentheses, string literal, gallery_thumbnails, space, a. I'm going to come outside of that, .each, beginning and ending parentheses, semicolon.
Inside of each, we're going to type function, beginning and ending parentheses, beginning and ending bracket. Now when we run the update function, the jQuery statement is going to run through every one of the anchor tags. And what we want to do is test the equality of the preview area to the actual anchor tag that's being tested. So we're going to type if, beginning and ending parentheses, beginning and ending bracket, and then we're going to split it.
Inside of the if statement, we're going to type a Dollar sign, string literal, .gallery_preview space a, .attr. beginning and ending parentheses, href. Two Equal signs, we're going to test the absolute equality of this statement and Dollar sign, this.attr, string literal inside of there, href.
So as we go through every one of the anchor tags, it's going to check the current one, which is the 'this' item and see if it matches what we wrote over into the gallery preview area. If they match, we're going to set jQuery statement; this, .addClass, string literal, 'selected'. On the next line, we want to fade out the child, the image tag that's inside of there.
this, children, beginning and ending parentheses. Actually, we're going to use fadeTo. We want to actually animate this down. Beginning and ending parentheses, semicolon. And then inside here we're going to say 250, so a quarter of a second, and then .4. That's going to be the transparency. Let me scroll down here a little bit.
Then we're going to type else, beginning and ending bracket. Let's open that up. Dollar sign, beginning and ending paretheses, this, .removeClass beginning and ending paretheses, string literal, selected, semicolon. Next line, this, .children, beginning and ending parentheses, .css beginning and ending parentheses, semicolon.
Inside here, one string literal, opacity, comma, another string literal, number 1. So this puts this in a completely separate function. Let's grab updateThumbnails. Let's copy that to the clipboard. Let's scroll up, and right after setFancyboxLinks, let's paste that function there as well. So basically, we have removed this functionality from being inside the click- event, and we moved it into its own function.
Now that we have the updateThumbnails out as separate function, this is going to allow us, in the next movie, to set up a statement that's going to autostart the gallery when the browser loads this.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99963 Viewers
56 Video lessons · 113049 Viewers
71 Video lessons · 81894 Viewers
131 Video lessons · 39299 Viewers
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.