7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 1.7 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.3 Image Gallery With Lightbox

The easiest way to have a lightbox to go along with an image gallery is to use JavaScript, but if you want to do so while still having an optimized site, there are some things you need to do. We’ll go through the optimal way to set up a gallery with a lightbox script in this lesson.

Related Links

3.3 Image Gallery With Lightbox

Hey, welcome back to, optimize your website without Amp. In this lesson we're going to be going through and adding in a light box. So that whenever we hit one of the images in our gallery, we get a nice little light box pop up of the larger version of the image. The script that we will be using is called BaguetteBox.js. I will put a link to this script in the notes below the video. As with our other scripts you can use any script that you want if you need to use light boxes. The reason that we are using this one is because it is quite light, it is quite simple and it doesn't have any dependencies. So we do not need to load jQuery or any other JavaScript in order to make this work, it'll just work by itself so that it helps us to minimize the amount of loading and processing that we're doing to render our site. So in the AMP version of this site, we needed to load in the AMP image lightbox script separately and then to make that work, we had to set up a lightbox container. And then we had to associate each one of our images with that container in order for the lightbox to work. With our version of a lightbox, we're already loading in the script that we need, so, we don't need an extra browser request. And this is gonna be a pretty quick video because, there are very few steps to get this lightbox up and running. So if we check our gallery here, you can see that we have a rapper around it with the class portfolio inner. And then you can see that inside this div, we have a series of links that are wrapping our images. Each one of these links connects to the same image that's being viewed down here but just without any restrictions on its size. Now if we feed Baguettebox this class tell it to look for this div then it's just gonna automatically find each one of these linked items and image inside it and create that light box effect for us. Not only that it's also gonna give us forwards and backwards arrows so that we can page through and look at each one of the images in our gallery. Which is something that you can't do with the Amp Light Box. All right so let's activate this thing. So we're going to go down into the script that we set up earlier, we were saying window unload = function. Now we're doing this down here, just to give you a refresher, to make sure that everything else has already loaded. So we only get that unload event firing off when everything else is ready to go. Then we're gonna run our Lightbox script, or our baguette box script, as it were. So, we're going to say baguetteBox in camel-case, run, give it some brackets and we'll end the line. Now all we have to do is give it the correct class target, which is portfolio.inner. So that's what we need to do inside our HTML to get this script up and running, however, in order for Baguette Box to work properly, it also needs a little CSS. This is where we're gonna leverage something we set up in our gulp file before. You remember that we're using this plugin, Gulp Concat CSS. Which looks for any at import line in the style sheet, and brings in the full text of that file, combining it with the original style sheet. And we're applying that concat CSS plugin to our style.css file. And we already have baguettebox in our node_modules folder. So if we just scroll down and just find it, so here it is. And then in here, you can see that we have some star sheets that are necessary for baguette box to work. And so we're going to import that into our style.css file and then gulp is going to take that whole baguette box css style sheet and push it into the header of our site. So, we're going to do that with this line here. So, we're going up a couple of levels outside of the folder that has the style.css file and we're going into a node modules folder and then we're just going down the chain here until we reach baguetteBox.min.css. So now all that css is going to get transplanted from this file. So we have all of this Into here and then pushed into the head section of our HTML. So we'll save that, gulp will have automatically processed that for us. And now, if we click on one of our gallery items, here we go, we get a really lovely Lightbox effect. So that works just automatically for all of our images and as you can see, we've also got our forwards and backwards arrows. So our gallery is fully up and running all right. So now, we've put together everything we need from the top of the site all the way down to our gallery, and the next thing we're gonna tackle is embedding tweets in the same way that it was embedded in the AMP version of this site. So instead of using the AMP Twitter custom element from AMP, we're gonna be using Twitter's own little widget script instead. And we're going to be setting up a graceful no script fall back as well. So we'll take care of that in the next lesson. I'll see you there.

Back to the top