11.2 Changing the Gallery Image - Video Tutorials & Practice Problems

now that we have a proof of concept. Hello world style application working, let's take a closer look at the state of the application as it exists in the cloned repository. Take a look here and here's the web version. This is running a local host via Jekyll. We see here that we have three columns, the left column, center column and the right column. And in fact because there are three columns, I want to widen the view here just a bit that looks nicer. Now, there's a bigger contrast between the main image here and the thumbnails here. In the first column here, we can see that there's an orange indicator of what the current images. Then there's the main image that should correspond to this but does not currently. And then there's a description here. It says a sunset over the pacific Ocean, which this here certainly is not. So the goal for the rest of this chapter is to arrange for clicking on these thumbnails to change the main image And to sink these three things up. The indicator, the main image and the description. We'll start with the change. That's actually the biggest one in terms of user interface will arrange for clicks on thumbnails to change the main image. Let's take a look at the html. That's making this let's see here. It's in slash gallery and here we can infer that the file is the default namely index dot html in the gallery directory. So let's open that up here. It is here we have some Jekyll front matter, it's not important to understand this for the purposes of this tutorial but just in case you've seen this before, there's a default layout which gives us all this stuff around here and there's a title. You can see that here. So if we open a new tab, here's the title and if we look down we can see that there are three columns. Here's the first one scroll down for classical Call. There's there's one, there's two. This is the main one And here's the 3rd 1. We can see that there's a class equals current. Here we look at the main CSS file, search for dot current this color here as you might imagine, is this orange right here. So that's what's giving rise to that orange box. And then in the third column there's a title and a description in this section. What we're going to do is change this image source. When someone clicks on one of these thumbnails, our strategy for doing this is to put an event listener on each of the thumbnails. Listen for a click and then when the click happens, update this image source. If you look carefully at the thumbnails, you can see they're in slash images slash small in the name of the file and then each image has this extra piece of information in this case data, large version is the full path to the large version of the image. We'll see in a moment what good this does us. So there are some new things in this section. But let's start by building on the things we already know. Let's start by finding all the thumbnails. We'll start by saying let thumbnails equal. All right. How are we going to find these things? Well, recall that we can use query selector to find the C. S. S I. D. We saw the last chapter CSS class here and a CSS tag What we need here is to find all of the images that happen to be thumbnails. But if we look at the structure here, we can see that these images don't actually have any classes or ideas to distinguish them. And we can't just grab all the images because this image, the large one is also an image tag. Not to mention things like the logo or anything else that might exist on the page. So what we really want is just the images that are inside this first Div which has an I. D. Gallery thumbs. So this is the idea for the div that contains the gallery thumbnails. That means we can select this Div using query selector according to the I. D thumbnails equals document dot query selector. Then the C. S. S I. D. The hash symbol that gives us the DiV and then we can search inside that DiV for all of the images. That's what we saw in the last chapter. Corey selector all like this. So we can chain these together to find all the images Now. You can see that. I've actually gone over the 80 column width. There's this line here that I've exceeded. You can see it's actually 83 columns and I don't like that. So there's one way to avoid this. We'll see another way later in this section. But for now I can just break this across lines. I can put in a new line after the dot and then line these up here. So this actually calls query selector 1st on gallery thumbs and then query selector. Oops, I didn't say all the selector all. It was actually more than 83. It's actually 86. So the selector all this. So this will select all the thumbnails and then we want to go through the thumbnails and for each one add an event listener that listens for a click. We saw this before and here. I mean D J s this year is listening for a submit event but the initial version of this listened for a click this is a click of the button for testing palindromes. I was also suggested when I said for each, so we're gonna say for each of these thumbnails, thumbnails for each. Some nail. Now let's add an event listener for a click and then that will fire off this anonymous function. On click. Let's put these in here and in here we'll have to add the code to change this here to change this source for the main gallery image. Let's test this out a bit. Let's just raise an alert just to test it out and we can raise an alert with let's see, let's do the image source. I'm actually not 100% sure if this will work. Let's do this refresh and so on, click. Look at that, it worked local host 4000 slash images slash small slash boat dot jpeg. Cool. So the listener is actually working. It's really good. I mentioned before that we can actually make this better here. There's a second way of avoiding spilling over past 80 Collins. The way you can do it is to use query selector all by itself. There's a way to indicate that we want only the images inside the element with the I. D. Gallery thumbs can do this. He's a right angle bracket. Just get rid of this here. Let thumbnails equals document dot query selector. All you can save that, see if it still works. No, it doesn't work. Hope I didn't go deep enough. We look down here, you can see that there's actually a Div with ID equal to gallery thumbs. And then there's another div surrounding each of these images. So what we're looking for is actually not an image inside the gallery thumbs Div by itself. It's actually inside a Div Inside gallery thumbs. So let's see if that works. Ha ha you can see why it's important to check. Great. That's a solution to an exercise by the way. So you're welcome. Alright, what are we gonna do in here? Now adding a comment describing what you want to do is often a good first step. It's free documentation and now we have a sense of where to start. All right. We want to set the clicked image as the main image. That means we have to find the main image but we don't have to do that every time we had a listener we can add it up here. Let main image equal. Well how are we gonna find the main image? We can see that it is the image inside the div that has I. D. Gallery photo so we can do document dot query selector. It's this one here. It's good to copy it because that way you don't have a typo so that selects the div without I. D. And then we want to select the image inside that Div Let's do it the ugly way first. Just do another query selector like that. This actually barely fits kind of cool. It's exactly 80 Collins. And then in here when there's a click we want to set the source of this main image equal to the source of the new image. That's just been clicked now I didn't remember offhand how to do this. So I googled it. If you look at the text, you'll see that as in previous chapters. I've included some of the exact google searches that I used in this case I googled javascript dom set attribute source or sources. SRC. And from that search I found the set attribute command. The attribute here is SRC and let's set it to something by hand. Just to start off with we want one of the big images here, one of the large versions. So let's do the turtle. See how this works. So now if I click on any thumbnail it should give us the turtle. So let's do this. Refresh, look at that and actually worked. I refresh it. It'll go back to the default which is just this boat. But if I click here Alright, that's working. So now all we need is the analog of this except for the thumbnail itself. Let's create a new variable for that. Let's call it the new image source. We're gonna get it from the thumbnail somehow. And this is something new. We haven't covered this in this tutorial but we alluded to it when we discussed this attribute, this data large version. This practice of putting data in the tags like this and then using it in a javascript file is part of what's known as unobtrusive javascript. It involves never putting any javascript code on our actual html pages other than including it in the head like this but rather putting the data into these attributes and then using them in the job script files, javascript supports this by creating a special object called dataset. Whenever you put an attribute in here, starting with data hyphen like this, it adds a camel case version of the subsequent words as a property on the dataset object. So let's see how that works automatically. Javascript gives us thumbnail dot dataset and it has properties corresponding to these attributes here. So what we want is the camel case of large version. That's this large capital V version. So this should be the new source for the main image, paste it in there and let's see if this works. Look at that working pretty well. So this is huge. We've set it up so that by clicking on these thumbnails, we are now changing the main image gallery with hardly any code. Look at this. Just a couple of calls to query selector and just two lines in here. I promised to show you a better way to do this. It turns out the string inside of query selector can be multiple nested things instead of just the gallery. Photo I. D. And then another query selector. We can do this gallery, photo space, image. This will automatically look for an image inside the element with I. D. Gallery photo try that again. Sometimes I'd like to break it do this here just to prove that in fact the thing I'm doing is right. So I re factored it there in the absence of automated tests can break it like that by hand and then do this. Alright. It's working by the way there's one little thing I'd like to do here when we've got parallel structure like to add a space here, just to line everything up. It looks nice. Now, you may be wondering why the notation for these query selectors is different. Here we have the right angle bracket for nested I. D. S and tags. And here we just have a space. So why are they different? And the answer is they don't have to be either notation works. I included them both so that you'll be familiar with both of them. But you can do this, this will work likewise. Which one you use is up to you. I tend to like the explicit nesting even though it adds a few characters but either way is correct. I would generally suggest being consistent but in the tutorial I'll leave it inconsistent just to emphasize that both forms work. And that's it for swapping out the main gallery image. We can see here though if we click on this there's a match between the orange and the main image but that's just a coincidence the orange is fixed and we also see we can match up the image with the description. But again, this is a coincidence. If we click on something else, the description stays the same even though the image changes. So in the next two sections will match up the orange with the central image and will arrange to change the description information to match the central image as well.