All we have here is an image with a class of preview and it's pointing right now to a thumbnail with an alt tag. Right underneath that we have a div with a class of overlay, this is going to be an overlay that appears is going to be partially black on top of the entire page. While the image is loading, and then it's going to be the background for the new image, which is going to be the high resolution version of the image. I could have done that programmatically, but frankly you don't really need to go over that, it's pretty easy to do. You've already created several elements programmatically, so, you don't have to do that again.
Sometimes it's easier to just have the object right there. Let's take a look at the images. You can see that we've got the background image here and then we have this image of a magnifying glass that we've used before. And then we've also got this. GIF right here that is the little spinner that we're going to use. It's an animated. GIF that just spins so we can tell if the image is loading. And then we have a high resolution version of the image as well as the thumb nail. So that's it for the images. Let's take a look at the CSS. We set the background here to a piece of wood and then we have the image preview right here which sets the thumbnail to be a 100 by a 100 pixels.
Gives you that cursor of the pointer here and then we have a series of styles for the overlay. So, this is the overlay when the project first begins. It's not showing up. That's why it says display none right here. And let's go ahead and do a display blocks. We could see it. So if I refresh the pace, this is what the overlay is going to look like. It's on top of the image. And it's a little bit black. But 70% black. And then it takes up the entire image, and plus I have this z index of 5,000.
Then I'm going to add an event listener and just like before we're going to target a click event that's going to call a function, and we're going to pass it along. An event, right? And this is going to have a bubbling effect right here, so it needs false. And I'm going to start off by creating some variables here. So my first variable is going to be low resolution. This is going to be set to the target of the click.
Which will be the lower solution version of the image, right? So this is going to be the target's source, so this will take us back to the lower solution version, we're going to need that later. And then we're going to need a variable for my overlay, and that's going to be document query selector, we're going to pick the overlay from the dorm. Make sure you do a dot here. Whatever has the class of overlay. Right. Next we're going to create another variable. This is going to be a variable that will hold the high resolution version of the image.
So document dot. And then this time we're going to create an element. And the element you want to create is an image. Next we're going to need to do the same thing for the spinner. So I'm going to call this my spinner, and this is going to be document dot create element then pass along another image, so I'm going to create two images. Or two image tags. One's going to be for the high resolution image.The other one's going to be for mySpinner.
All right. Cool. So next, let's do myOverlay. So whenever somebody clicks on the image, I want my overlay style to be display of block. So just like I did before, and as a matter of fact, I probably need to go into the CSS and make sure that my overlay is now is display as none so it doesn't show up at the beginning. Make sure we save that. And come back here, and go ahead and hide that sidebar, so we can get the full screen here.
So, when somebody clicks on the image, the first thing we need to do is, to set the display of the overlay to block. And then, I'm going to start doing things to the high resolution version here. So highRes.className, I want to add a class. To the higher solution version, and that class is going to be bg image, and then I'm going to set the high resolution location, the src attribute. And this is going to be, similar to what we've done before, since the images are called exactly the same, except that the lower solution is underscore tn dot jpeg, and then we're going to use.
The substring method, so we're going to say low res, dot substring, str, and then, say, starting at position zero, to the end of this low res image. So, low res dot length minus zeven. That's going to get rid of the underscore dot tn dot jpg and then we were going to go ahead and add back jpg at the end. And then we were going to do an appendChild here, so myOverLay dot appendChild and then we were going to put in this high risk image.
So far if we've done this correctly, the high resolution version of the image is going to show up when I click on the low resolution version. And that works pretty good and this image is on the harddrive. And I'm calling it from the hard drive. So it's going to load pretty quick. If this image was loading in from a server it might take some time. Specially since I made this image really big on purpose so that even as I'm loading it from the hard drive it's taking a while to load up. So I think this is probably like a ten megapixel image. It would take a long time on a server.
So we want to really add a spinner that kind of lets people know, hey wait until it's finished loading. You're going to see it even on these screen right here, even though I'm loading things from the hard drive. So here's how we add the spinner. We already created the variable that creates the image element, and what we could do is, of course, just like we did in the overlay. So my spinner, class name, and we're going to set it to spinner. Where am I getting this class things from? Remember when we looked at the CSS that these things have predefined style names, right here.
So this is overlay, this one supposed to be image big image, and these one supposed to be a class name of spinner. So that's were I'm getting these from. Then I want to do my spinner, that the location of the spinner, its in the images folder and its called spinner. GIF. You pronounce that jif not gif. Just remmeber that. The inventor of it said that you pronounce it jif. Alright so next we're just going to append it to the overlay so we're just going to say my overlay dot append child and then my spinner which is what we want to add. And so let's check that out.
Let's come over here. Refresh the page. We click on it and both the spinner and the large version of the image are going to load. That's pretty cool but once the image finishes loading we need to get rid of that spinner or it's going to look pretty silly. So all you got to do to do that is find out when the load event. Of that image as executed because every time you create an image, that image brings in an event and that event is called load. And so when that image finishes loading, it triggers this load event then you can capture it.
And this is a cool thing about these type of event. So, so far we've been looking at events that you generate by clicking on things or by doing something, sometimes things generate events by some of the actions that you do. So we're going to say high res dot add event listener and we'll track a load event, so we're tracking the load event of this. High risk image which is this element that we created over here, right so when that image triggers a load event then just as with any other event we are going to call a function.
And in this case and I really need to pass it the event so I am not going to do anything with it and, what do I want to do? I want to get rid of the spinner. So, just like we've done before, we say, my spinner, and then we have to call the parent node of the spinner. Why? Because we're going to use the remove child method, and the remove child method wants to remove something from it's parent, so we call the spinner parent node remove child. And then we say my spinner again.
So I need to actually take care of these quotes right here and save it, and come here and refresh. And now you'll see that the image will load, and as soon as the image loads, there is no spinner. The spinner has been removed. So working with load event is pretty similar to other events, but this is an event that gets generated as a result of another event. The click event. It's a good idea to use this event when working with data that is very large. That way you'll give the user a little bit of visual feedback so that they know what's happening.
- Understanding event registration and propagation
- Analyzing event properties
- Creating and removing DOM elements with events
- Removing an event
- Canceling and preventing default events
- Playing media events
- Handling media pauses
- Dragging and dropping
- Adding touch events