Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Exporting graphics from Photoshop
- Positioning elements with CSS
- Using the Roundabout plug-in
- Activating the carousel callback
- Detecting the image in focus
- Adding the final touches
Skill Level Intermediate
Now in this movie, we want to add a few final touches to our project. First back in the carousel.html file, I want to get rid of some of that default text we got from Dreamweaver. So first, let's get rid of that default text for the carousel ID, and then let's get rid of the default text for the captions ID as well. Now when I get rid of all that content here, Dreamweaver will not display that particular div, but we can see down here that that div is still there, and we can set target it with our jQuery injections. Next, we are going to hide the carousel data, so let's come up to the CSS panel.
Let's double-click on the carousel_data class. Let's come down to the Block properties. Under Display, let's choose none, then click OK. That will make sure that all we see is the carousel item when we load the page. Let's choose File > Save. Let's switch over to carousel.js. Now inside of here, you will notice from the last movie that our captions aren't actually loading when the actual carousel first loads. So to fix that, let's come down and let's select showCaption function name. Let's copy that to the clipboard.
So what this means is it's going to look at all of the carousel_data, and the fourth item, starting from 0, 0, 1, 2, 3, is going to be item that starts off by default. So to get the carousel to pay attention to this variable, let's come down into the roundabout function, before childSelector let's add a line, starting child colon, and then we are going to come up here and copy the starting item variable. But now this variable is being declared globally within our script, so in order to access this, we need to type window, dot, and then paste starting item variable name, then a comma.
So now when the createCarousel function runs and we generate the roundabout, we can have it pay attention to the starting child and have it to be based on the starting item variable we created above. So to test this, let's choose File > Save All. Let me switch back to my web browser. Let's hit Reload. So now we can see the carousel is starting on the orange teapot, which is the fourth item or child number 3, if you start from 0. And again, I can click on the individual teapots and see the animations of the captions and get the same exact functionality by clicking the buttons as well.
So this concludes all the functionality for this particular project. In the next move, we will talk about some additional features of the roundabout plug-in and some functionality from other courses that you might want to add into this project as well.