Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So our images are loading, everything is resizing properly. Now it's time to center the images. to do that, I'm going to create a separate function, and it's going to go right down here, right before the closing of the self-executing function. So I'll call this function center image, and this function is going to expect an image to be passed to it. So, what I want to do here is start by creating a couple variables. I'll call this myDifX and that's going to be equal to the window interwidth.
Minus the image that gets past, width, and divided by two. Once we have re-sized, the images they are going to be usually smaller or the same size as the window. So, we need to calculate the difference between the width of the image and the window. Divide that by two so that if it needs to be moved. It's going to be moved by half the distance. That's what places it in the center. So, we'll calculate the difference between the x position and the y position of the images.
So, instead of when or with here this will be inner height, and this will of course be the image height divided by two. Once we have that then we can say the image style, because this is going to be a style sheet attribute that we're changing here. It's going to be equal to, myDifY, plus, because this is CSS, pixels. And then, the same thing for the image left.
And what we'll do here is we'll just return the image. So I'm going to save this, and I need to do one more thing. I need to actually call this function. So, this function will take care of centering an image that passed to it. But of course, I need to call it somewhere. So, I'll do it right before I append the image. So right here, we'll say, center image. And we'll pass it, this, remember that this in this case is going to be the large image.
So, let me save that, go into my page, refresh and click on one of these. Right here, you can see that the image is now in the center of the screen. I'll refresh again and I'll click on any one of these images and they should all be centered. So, I'm refreshing in between. The next thing I need to do is build something. That handles clicking on these images, so the images disappear and I can see my screen again. We'll do that next.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101110 Viewers
61 Video lessons · 87880 Viewers
71 Video lessons · 71753 Viewers
56 Video lessons · 103621 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.