11.4 Changing the Image Info - Video Tutorials & Practice Problems

<v Instructor>Our gallery application</v> is really coming together now. We set it up so that if we click on a thumbnail, it swaps out the central image and changes the orange indicator telling us which image is current. Our final step is to sync up this description in the third column with the other two columns. This here is not a sunset over the Pacific ocean. There's actually nothing new in this entire section. It's all things we've seen before, just put together in a new way. Let's go in here, and I'm gonna start by adding in a documentation comment now that we're getting to the point where we're almost done. It's good to think ahead. This is the sort of thing that for future reference, we'd like to know exactly what we're doing here. For brevity, I'm just going to paste it in from the text. And now let's add a documentation comment for what we wanna do here. We're gonna update the information for each image on a click. All right, let's take a look at our HTML. Here it is. Let's think about how we're going to do this. Well, this third column here has ID gallery info, and then it has two elements inside it, an h3 with class equal title and a paragraph with class equal to description. So this suggests our strategy, which is first to find this div here corresponding to this ID, and then we can update the inner HTML of the element with class title and the element with class description based on the data title and data description in each image. So let's remind ourselves about inner HTML. We saw this before. We saw this in our palindrome application right here. Meanwhile, we saw that large version here, data large version, gave rise to dataset.large camel case version. With title and description, there's no camel case 'cause they're just one word here. Data title, data description, but we can get it out the same way from dataset. So let's just do this step-by-step. Let's, well, we're gonna be pulling the title and description both from this div that has ID equal to gallery info. So let's create a variable just for that div. We'll call it gallery info. As usual query selector is our friend. Then the ID is here, gallery info. All right, and then we can grab the title using query selector on this object here. And I like to line them up here. So equals galleryInfo.queryselector of, well it's the class here, title. Copy that, so it should be .title, and then just copy and paste this description. It's the same thing except with description here. And then we can just update the inner HTML like this. It's thumbnail in analogy with this here, we've got thumbnail.dataset.largeVersion. This is thumbnail.dataset. We can look in here title and then description. So this is title and then description inner HTML. And here is description. Oops, and this should be a semicolon. And let's line these up. Is it possible this will work? Let's refresh it. Oh, look at that over here. So now we know where this picture is from. This is from the trip I took to French Polynesia. It's a catamaran on Moorea Lagoon. Moorea is a small island just off Tahiti. This is a picture taken by Lee Donahoe, the coauthor of "Learn Enough CSS and Layout to be Dangerous." Look at these. Joshua Tree National Park, Walt Disney Concert Hall in downtown LA. This is great. So now we know where these are from, so many beautiful images. Where is the shark from? Ah, yes, this is a great white shark actually taken by Lee from a cage. And this is the background shark from "Learn Enough CSS and Layout to be Dangerous." You can see here, ah, that's the shark right there. Now you may have noticed something there. When I clicked over, let's do it again, like this suddenly it wasn't synced up, right? I went down here and clicked on this. This is a picture I took of a sunset over the Pacific Ocean. And this match here is not a coincidence, right? If I click here, this is from Mammoth Mountain, California. Here's a little turtle. It's changing, but if I refresh, now they're outta sync again. So the final step is to sync them up by editing the HTML itself. So let's arrange for the initial image to be the current one. Let's do this here, it's this. And instead of the catamaran on a Moorea, it's gonna be this. And we notice here that actually the alt doesn't match. This alt here should be the same one that was up here, save into speech, which suggests there's something else we should add to our gallery. Save this, and we also want to change the description to this one here, the title, and copy this. Put it in my buffer. And this here is all matched up. So refresh this. Now we start with this is current and it's the right one and it's the right description. But if we click on this, even though now current and description are matched up with this image, if we look at the source, so you see that, the alt, is still the old one. So we can fix that here, mainImage.setAttribute source, newImage source, mainImage.setAttribute. See if you can guess. Well, the attribute instead of SRC is ALT, and it's the same as the new image alt, which is thumbnail.alt. So you can see here, this is the Moorea catamaran. The order doesn't matter here. It's kind of strange actually that it switched it, but it did. Green bug, orchid, sunset, and so on. With that, our application is done. Let's push it up to GoodHub pages, and look at it on the live web. Let's take a look at it. Here it is, gallery. Let's click on it and see what happens. Look at that. There's one more thing I wanna do, and I can show you the issue by clearing the cache. So that clears the images out of my cache, among other things. And I go here. Now watch as I click on this. There's a little delay. I click and then it goes click, bang. Click. Some of them are fast, but the bigger ones have a noticeable delay. It's a little thing, but it's definitely a blemish. Now that they're loaded in my cache, it's working. But I can clear it again. Depending on your bandwidth, it could actually be a significant delay. There's just a little delay, so our final step is going to be to use JavaScript to preload the large versions of all these thumbnails. And the way to do this is to create a new image in JavaScript. And then for each thumbnail, set the source of that image equal to the large version of the thumbnail. Let's take a look at that. So it's gonna be part of the for each loop, but not part of the listener. In fact, it's important that it not be part of the click listener because then it would only get loaded on click. What we wanna do is load it here when the gallery gets activated. So let's do this here, and then set, say, let large version equal to a new image. This is a built-in JavaScript object for creating new images like this. And then we can set the source of this to the thumbnails large version. And in fact, it's actually just this. We can hoist this out of the listener, put it here and then say largeVersion.src=newImageSrc. Now let's deploy it, see if it worked. Give it a second to reload. Go here, let's clear the cache. Refresh it. And we can look at the page source and check out the JavaScript itself. Let's look here. Look at the JavaScript file to make sure it's updated. And there it is. If you have a still version of this by the way, you might have to clear the cache again. If you hit the page before GitHub pages has reloaded it, it might pull a still version of the JavaScript. So you might have to clear the cache, and then reload to get the latest version. But here it is. So this should be very snappy in terms of the performance. Yes, now it's instantaneous, look at that. No to lay it all. Beautiful. So this is a production website. It's got nice design, it's got lots of content, got a gallery here. Nice dynamic HTML. Everything's synced up and all thanks to really not even all that much JavaScript. Look at that. The whole file 32 lines. It's pretty amazing.