[MUSIC] Hi, this module we've been learning a lot about interactivity and using Javascript to allow users to directly manipulate the web page through mouse clicks, etc. But we've used quite small examples, it is pretty simple web pages and there's nothing like a real web page. I'd like to end this module by looking at a bigger example that really starts to look like the kind of website you'd wanna build. This is an example of an image gallery website, it's based on Matthew showed you last week but I've added some images. You can see there are four images at the top and one at the bottom, so these four are like thumbnails. This one at the bottom is like the principal image and what I'd like to take you through in this video is giving some interactivity to this site. So when you click on one of the thumbnails, it brings this image up. I'll take you through the code of this, it's based on the outline that Matthew showed last week. So, we've got vary stylesheets, jQuery as usual a little bit of header navigation info. And then here we have the main sort of Bootstrap elements. And we're using a grid layout as you did in the last module. And we've got a row which is a row of the four thumbnails, each of these is one of the columns. And the second row is the big image here, so we've got this large image with id bigImage and class large-img. That class corresponds to the CSS here, which gives it margin and just the size. Similarly, the thumbnails have this class crop-img which has it's own CSS which makes it slightly smaller. So this is showing you how to take some of the bootstrap grid lay out. Stuff you've learned last week and put it into a slightly more real website, an image gallery website. But now we want to take it one step further and make that into active. The interactivity happens in this script here and as you can see, it's actually quite a simple script. But I'd like to unpack it in a lot more detail, so the basic thing that this script is doing. Is looking on click function events on the small images, and when a click event happens, put them on the big image. And we're trying to avoid having to rewrite the code for every single thumbnail image. Just one bit of code for all of the thumbnails and so they can get it right. And there are a number of features that we're gonna use in Javascript that will enable us to do that. So this is the codes, the first thing that we see is that we're using a jQuery, and this time we're not getting by ID but we're getting by class. So we're using the dot which is the class, if the CSS selector, and that means that at the same time, get all the images which are tagged by it, with class crop image, which is all our thumbnails. So up to now, we've been thinking about jQuery getting for each jQuery element call. We're getting a single element, but actually jQuery works just as well for getting multiple elements. And if you call a function on those multiple elements, it applies to all of them. The function we're calling is click, we've seen that before. That sets a function that happens on a click event, so just as we've seen in the last video and then down here, we have the actual code. We've got this jQuery selector that grabs the main image, the bigImage. And we've got another jQuery function here, which sets an attribute of bigImage. So just as we can set an event function or the content. We can also set values of the attributes and the attr function, A-T-T-R, is a function which will set or get an attribute value. The first argument we're passing in is source, so we're setting the attribute source. The source file of the image and we've got a second attribute as well, which is the actual value we want to put in to the source image. Now, we don't know what that value is straight away. It depends on which of the images we clicked, and because we're only calling this code once for the images. And then we're gonna have to figure out which image it is before we do anything with it. So we can't just type in the value, we have to guess it from the image and this code is doing a bunch of those things. First off, it's using the same attr function, attribute function of jQuery, instead of to set the attribute to get the attribute. So we're doing attr('src') but we're doing it in an object called (this). So instead of passing in a class selector to an ID selector, we've got this thing this. What exactly is that? Well, it's a slightly complicated Javascript feature, but in this context when you've got an event, you're calling a click event. This is what we call a variable, its value is set to whatever HTML element was clicked on or the event was called. So in the context we're looking at here, we're clicking on one of the images, and this will be that particular image tag that we've just clicked on. So we can see here that we parse that in to jQuery to turn it into a jQuery object. Then we call attribute on it, we're getting the source attribute of the image we clicked on. That is the actual file attached to the image we clicked on and within setting the source attribute of the big image to be the same as the small image. That has the effect of making the big image, setting the actual image of the big image. To that the image of the small that you clicked on, we're just copying the source attribute, of course. So that's quite a nice feature, it enables us to do quite a good manipulation of. And more importantly it's doing it in such a way that we don't have to write out in the code which particular image we're talking about. We can just grab it from the context of what small image we just clicked on. We can click on any of these, and whichever one we click on, it loads up this big image. It allows us to write this code, so that we don't have to repeat ourselves and write code for every single thumbnail image. I just wanna say one last thing which is to be a little bit careful with this because it can mean different things in different contexts. It means as long as you're in an event function like click or one of the other ones like hover or mouseover. It means the HTML elements that the event happened to. But in different context, it means different things, it's quite a complex and difficult feature of Javascript. So at this moment, I would stick to using it within this context of events. So we've got now, a nice little function which does what we want. It happens when we click on one of the images and if the image is from that image. It figures out the actual source attribute of that image, puts it into the source attributes of the big image. And we set the big image to be equal to the little image. Let's have a final look at that to remind ourselves what it does. We can click on any of these, and whichever one we click on, it loads up this big image. And the really nice thing about that is, we've done it with only a fairly small number of lines with Javascript and it works with all of these. So there we have it, we've got our first proper interactive website with Javascript that's starting to look like the kind of website, you're going to want to build a real website. So at this stage you're now ready to go on and start building some own websites of your own that uses HTML, CSS and Javascript and start playing along with that. We've got a final MOOC in this course next week where we'll go a bit deeper into Javascript. And work with some new and slightly more complex features of it but for this week, I will see you later. [MUSIC]
