Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When it equals the end of the item, we're going to switch it back to the beginning and just let them run in a loop. So now back in Dreamweaver what we're going to do inside of the index.html file, I first want to set up a debugging area so that we can send the value of the position to our HTML page and be able to see that the counter is working and tell where the thumbnails are being positioned. So inside of the index.html file we're going to click on Source Code, and then we're going to go to Code view. In inside of the HTML file before the comment that says Hidden DIV container goes here, let's hit a Return, I start by typing a paragraph tag and ending that.
Inside of there, we're going to type the word test. Inside of the p tag we're going to add a class = "debug" style = "color":#fff;. Let's switch back to Design view. So now this area here is what we're going to use to make sure the timer is working.
Let's come up to video_ gallery.js, the related file. Let's click on Code view. What we're going to do inside of here before the (document).ready, let's set up two items. First we're going to set up a variable. We're going to call this thumbnailPosition, we're going to set that = 0. Next we're going to type function.
We're going to name this animateThumbnail, that's going to be a new custom function we're creating, beginning and ending parenthesis, beginning and ending bracket. Let's put that open on the bracket. Inside of this function we're going to type var newPosition = window.thumbnailPosition. Then we're going to use an asterisk to multiply this * -1.
What that's going to do is give us a negative number, because what we need to do is set the X position of the CSS to a negative number so it moves to the left. On the next line we're going to update that debugging area we created. So we are going to type $('p.debug').html();. Let's come up here and copy the variable name newPosition and let's paste it inside of the parentheses inside of the HTML.
So what this is means is the setInterval is going to run the animateThumbnail function twice a second. So it's going to come up here, set the newPosition, and update the debug area two times for every second. Now that we have our thumbnail variable set and we have our animateThumbnail function set and we have a setInterval that's running that function twice every second, in the next movie we'll set up a conditional statement inside of the animateThumbnail that will make sure that the icon position never goes wider than the actual width we set inside of Photoshop.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 60132 Viewers
61 Video lessons · 92758 Viewers
82 Video lessons · 104209 Viewers
56 Video lessons · 107220 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.