FREELessons: 7Length: 42 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Medium Lightbox

The Medium Lightbox library is a lightweight JavaScript plugin for achieving a simple lightbox effect for the images on your page. In this lesson, I will show you how to use the included files as a starting point for integrating this plugin.

Relevant Links

1 lesson, 00:36

Welcome to the Course

2.JavaScript UI Plugins
5 lessons, 40:27


Date Dropper



Medium Lightbox

1 lesson, 00:37

Final Thoughts

2.5 Medium Lightbox

Hello, and welcome back. In this lesson, we're gonna take a look at a very simple plug in called Medium Lightbox. And this makes it really easy for us to create some zooming effects with our images. And again, it's very easy to use. In fact, we don't have to do any coding at all in this particular lesson, because we have a demo that gives us a really good starting point. And so once you go to the website and you can find the URL for this website in the course notes for this lesson. But once you get to the website, if we scroll all the way down to the bottom, you'll see the link to GitHub. And we click on that, and that'll take us to the GitHub website. And then you can clone or download, click on the drop down, and then just click on Download ZIP. And you'll notice the main folder here when you download it. You're gonna have a demo.html file, mediumlightbox.js, and a style.css. That's everything you're gonna need to get you started. Now obviously, you can build your own styles on top of this for the rest of your site, but this will get you started. So I'm gonna jump into this demo.html file that we saw in GitHub. I've got the entire folder open here, and you'll notice there's an images folder here as well that has 6 images. And we can see, first of all, in the head of our document, we have the script tag, or a link tag first, linking to our stylesheet. And then a script tag linking to medium-lightbox.js. Then inside our body, the key here are gonna be these figures. Now, let's take a look at the page to see what it looks like before we look at these figures in more detail. And I'm gonna navigate to that page locally here, and you'll notice that we have just a bunch of text with some images thrown in. So if I were to click on one of these images, we'll see that it zooms in, and everything else kind of fades out in the background. And it's a really nice, simple effect. And it's really nice for blogs, or anything like that where you're going to have a lot of text and some images thrown in. And then we can either click again to zoom out, or we can even use the scroll wheel on the mouse to scroll down and that will zoom it out for us. But each one of these images is set up in such a way that it will zoom in whenever we click on them. So let's look at our html and our JavaScript to see how that works. So again, like I mentioned, the key is these figure elements with a class of zoom effect. And we'll take a look at the JavaScript that's making this work in a second. But the author has given each of these figures a class of zoom effect, and that's what's going to trigger the effect. But we also have these other classes here that help us to position and size our elements. If we jump into our style.css, we can see that our one-third elements simply have a width of 33%, or 100% divided by 3. We have this half class here, which gives our images a width of 50%. Or full, which gives it a width of 100%. And then we have left and right for floating it. So if we go back to our demo.html, our first image here if we look in our browser, is this cat image. And if we were to go into our figure here, and change this from one-third to half. And then maybe change it from left to right, and then save or file. We can jump back into our browser and refresh. And now we see that two things have changed. The image now takes up one half of the width of the container instead of one-third, and it's now floating to the right instead of to the left. But the click and zoom still works just fine. So let's see how we trigger that click and zoom. How do we activate this plug-in to get it working? Well, if we go back to our code and then scroll all the way down to the bottom to our script tag we can see that it's all accomplished with this one simple piece of code. And you'll see they've even commented out a property here called margin. So really, all we need to get it to work without this margin 300 is just this right here. If we were to save it again and refresh the page, we'll see that everything still works just fine. Now if we turn that margin 300 back on, and this time uncomment it. And save our file and refresh. We click on it, and I'm not really sure honestly, what that does. So I'm not sure why that margin is there. But it's clear in this case we don't need it. But you can definitely go back to the website for MediumLightbox, and take a look at the options that are available there. We really don't need that margin 300, again, as I mentioned to get that working. All we need is this one very, very simple line of code. And this line of code is pointing to all figure elements that have a class of zoom-effect. So the selector that we put here is very important, because it's going to be the selector that's going to activate this MediumLightbox functionality. So again, there's really nothing to share here by way of project files, because all of this was contained in the demo.html file that came with the plugin. But again, if you want a really simple plugin that gives you the ability to easily insert images, and create this zoom effect for our images then the MediumLightbox plug in is the way to go. It's very easy to easy to use, it's very lightweight. And there we go. So thank you for watching, and I'll see you in the next video.

Back to the top