Solution: Convert to a slideshow
Video: Solution: Convert to a slideshowIn this challenge it was our job to make some changes to this color box per client request. So, there was a bunch of stuff to do. Let's go through it. Here's my solution. Looks very much similar when you start out. Loading it up we can see that the overlay background is a little more transparent. We're seeing a little more of what's going on behind the scenes. The slideshow is advancing on its own using the fade transition, I should mention, these arrows do still work, and the word image has been changed to arrangement. So let's see how this works. Over here, I have my solution file.
Viewers: in countries Watching now:
- What is jQuery?
- Installing jQuery
- Performing multiple operations with chaining
- Using classes
- Adding, modifying, and removing content dynamically
- Triggering a change with event binding
- Creating a dynamic contact form
- Building a slideshow gallery
- Creating simple jQuery animations
Solution: Convert to a slideshow
In this challenge it was our job to make some changes to this color box per client request. So, there was a bunch of stuff to do. Let's go through it. Here's my solution. Looks very much similar when you start out. Loading it up we can see that the overlay background is a little more transparent. We're seeing a little more of what's going on behind the scenes. The slideshow is advancing on its own using the fade transition, I should mention, these arrows do still work, and the word image has been changed to arrangement. So let's see how this works. Over here, I have my solution file.
So for three seconds, three thousands milliseconds. Next, I wanted to use a fade transition. So you can just search for the word fade on here or transition and we have a few types. The default is elastic so I just change that to fade. We needed to change the opacity of the overlay, now I didn't use the word opacity in my description of the challenge, but if we just search for background or overlay, we can see that there are some options here. Searching for background I can see that an option called overlay is on here so then if I search for overlay a few times. Here we go. The option is called opacity, and it has the word, overlay right in there.
So it goes from zero to one, and after experimenting with it to make sure I knew which direction went which way, I set it to right in the middle. And then, finally, I wanted to change the word, image, to arrangement. So I searched for the word, image. And one of the first matches that came up was this current setting, which is under internationalization, which is perhaps a strange sounding name at first. Internationalization typically means something involving translation to another language, but it does work here as well. And so the idea is that I have a string and these are little tokens that get substituted. So, I can keep everything exactly the same as its default value, just changing this word image to arrangement.
So that's what I did over here. And just by picking out those settings and adding them in to my object, I have everything I need. So this challenge was almost as much about study skills, in terms of navigating the documentation of a jQuery plugin as it is of jQuery itself, but this is something you'll be doing quite a lot when working with jQuery plugins which is one of the main reasons we use jQuery in the first place. So that was my solution and hopefully yours worked out as well.
There are currently no FAQs about jQuery for Web Designers.