Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:18Length:1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.4 Image Lightbox

In this exercise we’ll create a very simple image lightbox. A lightbox is usually an overlay that shows a much bigger version of a thumbnail–let’s dive in!

3.4 Image Lightbox

Hello and welcome to lesson number 15 where we'll create a very simple image light box, and a Lightbox is usually an over array that shows a much bigger version of a thumbnail. Essentially a larger image. So here's the finished result, we're gonna do the same thing as the previous, I'm going to show you the finished result, I'm going to show you the code, and just walk you through it. So, we have a bunch of images here and I want to click one of them. We have this nice transition into a bigger version of that image and clicking anywhere. Well actually close that, and return us to our original screen. Now, the markup. We basically have a U.L. with a class of gallery, and each image has its SRC to a thumbnail, and then data Lightbox to the main image. And at the end, we have a divot idea of Lightbox overlay. And this image element will be used, to show the main or the bigger image. Now, for the script and the script is actually very very simple here, we just have one. Event listener, click. And we're listening on the document anywhere, basically. And we're triggering the Lightbox click function. So Lightbox click, gets the element that was clicked on. Gets the ID of the element. Gets the image that needs to display the larger version, gets the Lightbox overlay itself and it creates new image. And this is actually another way of listening to click events, so for example instead of a specifying which element, we should listen for a click events we're doing document. Advaita listener click, and then inside the function is triggered we just filter the results like we do here. So for example, if the element we clicked on has the attribute of data live box, that means if we click on one of those images, then we know we have to open the overly. Otherwise if we click on either, the Lightbox image, which is the image does being shown or the Lightbox over light, then we're going to close the Lightbox or we're going to remove the overlay, and inside here, so if I were clicking on one of the images and one of the thumbnails, we're preventing the default behavior because we are dealing with anchor text. And then we're creating a new image, and unload we're setting its SRC to the SRC of the image, we clicked on, then we remove the old source, from the Lightbox image, and we're setting the source of the new image, to the source of the image we clicked on. So essentially when we're doing this bit, we're triggering this function here, and finally we're showing the Lightbox, and that's all there is to is really. Again a very, very simple script, just one event listener and we're doing two if statements or checking. Hey, where exactly did you click? Did you click on one of those thumbnails? Fine, it means we need to open a new image, you clicked on anywhere else you've clicked on the light box overlight or the Lightbox box image ,fine. That means we have to close the overlay. Very very simple. Now the final demo, we're going to be looking at shows a very popular elements. And that is a tab control, see you on the next lesson.

Back to the top