Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
These are going to be set up vars from thumbnail. Then down here, these two statements we made earlier, the update preview and gallery_caption, we are actually going to use these inside of another function. I am going to save my document so far, and let's come in here. And the first thing we want to do, once we click on of these functions--and remember we are still working inside of the anchor tag clickEvent-- the first thing we are going to do, add a Dollar sign, beginning and ending parentheses, two tick marks, .gallery_caption.
We are going to take the caption div. We are going to use jQuery slideUp. This is going to animate the caption upward, because once we click on an item, we want to caption to fade away. Another line, Dollar sign, beginning and ending parentheses, two tick marks, string literal. We are going to say gallery_preview, fadeOut, beginning and ending parentheses, semicolon.
500 ticks in there as well. So when we click it, the caption will slide up. The gallery preview area, the area holding the anchor tag with the image in the background, will now fade out. Now inside of fadeOut, I am going to get my cursor after the 500. I am going to put a comma, space, add a function, beginning and ending parentheses, beginning and ending bracket. By putting this function inside of this fadeOut function here, this is going to happen on what we call a callback. So once the animation has faded out over half a second, it's going to run this function.
Let's put that on the brackets. So inside of here is what's going to happen after the fade-out occurs. So once the fade-out occurs what we are going to do is come down, grab the two statements down here, we are going to cut these to the clipboard and paste them up here. So we are going to set the gallery image preview of the HTML to the new photo size based on the variables we set up in the vars up here. Then we are going to set the gallery_caption as well.
Once that's happened, we are going to fade the gallery back up. So let's come over here, grab gallery_preview, copy to the clipboard, paste it down here. I will type fadeIn, over half a second, add a new line, gallery_caption, slideDown, which is going to show this content, beginning and ending parentheses, semicolon, 500 ticks inside of there.
Let's choose File > Save. This should create the animation that we were looking for, click a link, slide up the caption, fade out the preview, switch the HTML for both preview and caption, and then fade up the preview and slide down the caption. Let's come out to the operating system. Let's double-click the index file, Command+R or Ctrl+R to reload, click on an item. And if you are looking at the caption area, each time I click, the caption slides up, changes, and fades back down-- or slides down, rather, and the image fades out. We switch the HTML and the image fades back up.
Now that this behavior is working as we want, in the next movie we are going to add preload into this script, so that when we click on a thumbnail we will preload the preview image first and then fade it up to make sure that it's fully loaded and we get a nice smooth transition.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 103152 Viewers
61 Video lessons · 89829 Viewers
71 Video lessons · 73445 Viewers
56 Video lessons · 104993 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.
Your file was successfully uploaded.