3.3 Create an Image Gallery With Lightbox

Hey, welcome back to Up and Running With AMP. One of the restrictions you have to work within when you're creating an AMP page is the fact that you can't include any of your own JavaScript. So you can't pull in any external JavaScript, other than the ones that come from AMP itself, and you can't do any inline JavaScript either. So that means that when you want to do something like creating a lightbox for example, you're not going to be able to use the scripts that you might use in a regular web page. Now, the people that make AMP recognize that this does cause some issues. So they're trying to make up for it by providing some custom elements that take the place of things that you might commonly use scripts for. And we're going to use one of those elements in this lesson to create a gallery that opens up lightbox images without needing any custom JavaScript whatsoever. So if you jump into the images folder that you've already added into your project and then into the portfolio subfolder, you'll see that we've got eight images in here. And this is what we're going to make our gallery out of. Now, if you open up one of these and have a look at it, it's full size. You'll see that it's 600 by 800 pixels. Now, for what we're doing, you don't need a thumbnail version and a large version of the image. You just need the large version. So that's one of the reasons that we're not going too large with these images. We're just keeping them at 600 by 800, so they're still a reasonable file size. All right, so let's just stop by adding some HTML to control the section that we're gonna be adding our gallery into. This time we're gonna need three divs. The first one is gonna have the class name portfolio_wrap. Inside that, we want another div with the class standard_width. And then for the third one, we want the classes portfolio_inner and clearfix. And then inside that, we just need a fresh H2 element. Then we're going to give it the heading Creating a Gallery with Lightboxes. Now, the custom AMPelement that we're going to be using to power our lightboxes is amp-image-lightbox. And you'll find the link in the notes below to the docs page for that. Now, just be careful that you don't go to the docs page for amp-lightbox. These are two pretty different things. amp-image-lightbox is specifically for making an image open up in a lightbox. But amp-lightbox is to create any type of modal popup that you want. So that might be a text popup, for example. So make sure that your amp-image-lighbox for this, and then grab the JavaScript snippet. And add it into your head section just under the other scripts that you've added so far. Now, even though we're going to have eight images, we only need to use this amp-image-lightbox tag once. This element is going to create the actual lightbox popup itself. And any time you click on an image in this gallery, it's going to use that one lightbox to show the larger version of the image that you selected. So we'll add in amp-image-lightbox and then close off the element as well. And then because by default we don't want this lightbox to be seen, it should be invisible until one of the gallery images is clicked on, we're gonna set layout equals nodisplay. And then we need to specify an ID for this lightbox. And we're gonna give it the ID lightbox1. And then when we add in all of our images, they're each gonna be told to open up in lightbox1 when they're clicked on. You can have multiple instances of an amp-image-lightbox. So you need that ID in there so that you can differentiate between them. All right, so now let's go ahead and start adding in each one of our images. First thing we're gonna need is a div to contain each image, and we're gonna have the class name portfolio_item. And then inside that we're gonna place the actual image itself. And for this, we're gonna use the amp-image tag again. So this is one example of how you can combine different AMP elements together. So we'll add in our amp-image tag. And then we'll also close it off as usual. We'll add in our source attribute. And then we'll specify the path to our first image, which is images/portfolio/car.jpg. We'll add the dimensions that we need. So we're going to go with width=215, height=161. And as usual, we want the layout to be responsive. Now, here is where we make the actual lightbox functionality work. We're gonna add the attribute on, and then we're gonna set that to equal tap:lightbox1. And that's all you actually have to do to make this function. AMP will recognize that value of tap and then it will look for the lightbox that you've created with the ID lightbox1. And then to wrap it up, we just need to set role=button. That helps with accessibility. And then tabIndex=0, which also helps with accessibility. All right, so let's check out what we've got so far. Here is our gallery section. And we've got our first gallery image in place. And when we click on it, there's our lightbox popup. There's only one thing that's missing, and that is, when you hover over this, you don't really get any indication that this can be clicked. So we're going to fix that with a little CSS. We'll apply some styling to the portfolio_item class. So we'll add this in and we'll add :hover so that this works when you're hovering over the picture. And then we're going to add cursor, and we'll set that to pointer. Now when we hover over, we get the traditional link cursor. So that helps to make that a lot clearer for users. Okay, so now, let's go ahead and add in the other seven images. So we'll just copy that portfolio item code and paste it in. And now we're just gonna refer to a list of images that we have in our portfolio folder. So now we'll replace that with the name of the second image, and the third image, fourth image, and so on. And I'll just speed this up for the rest of these, because they're all the same. Okay, so now all our images are in. There's just one more thing that we need to do. This tab index value here needs to be incremented with each different image. So we're starting at 0, then we need to go through and number them 0, 1, 2, 3, 4,5, 6, 7. So now let's go back to our front end. And here is our completed gallery. So we can click on any one of these now and they all open up in that same lightbox effect. So that's one of the custom elements that AMP offers to help make up for the fact that you can't use JavaScript of your own. And we also saw mixing two different elements there, mixing amp-image-lightbox and amp-image. In the next lesson, we're gonna look at a couple of other elements that are also designed to help you make up for missing JavaScript and another way to combine multiple elements. So what we're gonna be doing is taking three tweets and embedding them into the page, and then we're gonna turn those tweets into a carousel. And we're gonna do all that in the next lesson. I'll see you there.