Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In the last movie we created an overlay and placed it on top of our window. What we want to do now is add the image on top of that overlay. To do that we're going to need to figure out where our large image is. Now if you take a look at my project you can see that I have a bunch of images here. When I click on one you see the overlay, but I need the big image right here. So my images have been very carefully saved in the same folder as the other images. So you could see here, here's the artwork section. So if I got a thumbnail called Baird Bellingham_tn.jpeg the large version of the image is the same name without the underscore thumbnail.
First I need to find out he name of the item that I clicked on. That is stored in the event target. You can see right here that we were able to figure out the tag name of the image by querying the event target. And then the property tag name. So right over here. I want to create a new variable. I'm going to call it Image source. And I'm going to set it to the event target, and the source of that event target. So let's go ahead and just output that to the console, so we can see it.
Console, log and then I'll output the e.target. Switch over to our project, I'm going to refresh and I'll click on one of these images and then I will show the console. And notice that whatever image I click on, it's going to show me the element and the source attribute is going to have the location of that image. It's going to have the location of the thumbnail, so we'll need to worry about that in a minute. So we refresh, so we see that if I click on another image, it outputs the target, which is the note that has that image. Let's go back into our code.
Let me go ahead and delete this console log. So I'm storing the source or the location of the current target into this variable I called Image source. So I'm going to create another variable called Large image. And that's going to be a new element that I'm going to create, so I'll do a document.createElement, and a create a new image element (SOUND). I'm going to give this an ID, so largeImage.id is going to be largeImage. And I'm going to set the source of this new image element to be equal to my old image source and I want to do a sub string method here. The substring method will take a string and allow me to truncate part of that string.
So what I want to do here is say, 0, start at the 0 position, and then find the image source, and take the length of that -7. So that is, whatever the image name is, without the _tn.jpg. And then just add the word, jpg, to it (SOUND). That way, we'll get the location of the high-resolution image. Now we'll modify the style of this image. So we'll set the display to block.
Just like we would in css, and then we will set the position to absolute. Finally I'll pin this new image to the overlay. So I'll save my overlay dot appenchild and then I'll pass it this large image. So I'm going to go ahead and save this. Come over here, I'll refresh the page and then click on one of these images. You can see the big image comes in, it's not centered, it's too big, but at least it's coming in properly.
So if you click on any of these you should be able to see the large version of the image. And that's all we want to do in this movie.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.