Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
And the last movie, we were able to place the images onscreen, but they're way too huge. We need to adjust them to fit within the size of the current window. So, what I want to do is re-size the images. The problem is, I can't do this before I finish loading the image. If I try to calculate the size of the image before it's loaded, it's going to assume that the image doesn't have any size. I need to make sure that I create an event that waits until the image is finished loading and then calculates its size. So, I'm going to take this off right here, and I'm going to add sequence that the image has loaded. I'm also going to add another comment up here.
So, right down here, I need to add an event listener. So, I'm going to target my large image and then add an event listener. I'm going to look for the load event and execute a function once the image has loaded. And what I want to do is check to see the image is taller or wider, so will do a re-size here if the image is taller. And I want to check the height of this image after it's loaded, and see if its bigger than the windows in our height.
If it is, I want to calculate a ratio of the size of the image divided by the image that I'm trying to load in here. So, I'm going to save this, ratio is going to be equal to Window, enter Height, divided by this, which will be the current image that I clicked on, height. If it's true that this image is too tall, then I'm going to adjust the height to be equal to the height of the current image times the ratio that I just calculated.
Now, I'm going to do the same thing for the width. So, if the image is wider, I'm pretty much going to do this right here and just change some of these variables. Once this is calculated, then I can add my image. So, I'll add it to the overlay once again by appending the child of the large image. So, let me go ahead and save this, and try it out in our browser.
We'll refresh and I'll click on one of these images. And now you can see that it's re-sizing the image, to the height of this image cause this image is particularly tall. So I'll refresh, and click on one of these other ones. You can notice that this ones a good size, so it's not going to be a problem. And this one is tall, so these are coming in just fine. That is important to note that when you are working with images, sometimes you have to wait until after the image loads before you start performing some functions.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 97489 Viewers
61 Video lessons · 84721 Viewers
71 Video lessons · 68914 Viewers
56 Video lessons · 101358 Viewers
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.
Your file was successfully uploaded.