11.3 Setting an Image as Current - Video Tutorials & Practice Problems

<v ->We made major progress in the last section.</v> We're now able to swap out this central image gallery image by clicking on thumbnails. But unfortunately this orange indicator here, that tells us which image is current, is hard coded in the HTML and isn't changing. Let's look at our code. Just to remind you. This here, there's the index. Class equals current. We saw this before briefly. Change this to blue. You can see that that's where it's coming from. Hmm. Oh, there's no hash blue. Yeah, So that's where it's coming from. So on click, what we want to do, is change the class of this div by removing current, and we want to add current to the div of the image that's clicked. So if we were to do this, for example, we could just do it by hand. This should now be the second one here. So what we wanna do is do that automatically using JavaScript. It's actually a little tricky because you'll note that the class isn't on the image itself it's on the parent div, but the first part is easy. Once you Google JavaScript, Dom, remove class, every element has a class list object that has a remove method, and we can remove a class by giving it as an argument to remove. So let's take a look at our gallery JS. Say change which image is current. So all we need to do is find the element with class equal to current. There's only one of them on the page, this one here. And then call remove on its class list. Well, the element is this. Use query selector. Remember we saw this before in WIC P. Instead of hash and then the name of the ID, it's dot and the name of the class. So this is dot current. That's the element. And by Googling around or reading this tutorial you can learn that you can access the class list like this. Camel case as usual. And then this has remove method where you can give it the class name. So actually this should work. Let's refresh it. If I click on any other image, it should remove this here. Look at that. It worked. That's pretty cool. So that's half of it. The other half is to add the current class to the div that's the parent of the image that gets clicked. So you can Google something like JavaScript, dom, parent node, to find out how to access the parent node of an element. Parent element would probably work as well as a search. So let's get to that, it's thumbnail, dot parent node. And then we can get the class list like this as we just did up here, that class list. And as you might be able to guess since there's a remove method, there's also an add method. We can both add and remove classes. And that's it. Let's check it out. Ha ha. Very nice. Nice little fade too, that's a CSS effect. Fades in, fades in and out. You can see this one fade out and this one fade in. Very nice. So that's great, now these are synced up, all that's left is to sync up the description, which among other things, will let us find out where these beautiful images come from.