{"id":5952,"date":"2020-11-20T18:38:00","date_gmt":"2020-11-20T18:38:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=5952"},"modified":"2020-11-22T19:32:09","modified_gmt":"2020-11-22T19:32:09","slug":"tutorial-how-to-create-a-lightbox-effect-without-using-plugins-in-js-and-css","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/tutorial-how-to-create-a-lightbox-effect-without-using-plugins-in-js-and-css\/","title":{"rendered":"Tutorial: How to create a Lightbox Effect without using plugins in JS and CSS"},"content":{"rendered":"\n

Lightboxes <\/strong>are amazing! We remember the first time seeing them in the jQuery <\/strong>days and thinking that someone really spent a lot of time building this, but over the years, things got easy and we’ve come to realize that it can be made in vanilla JavaScript <\/strong>and some CSS<\/strong> easily.<\/p>\n\n\n\n

So, today we wanted to show you how you can build<\/strong> your own image Lightbox <\/strong>effect without using any plugins<\/strong>!<\/p>\n\n\n\n

The end result is this:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

HTML Structure<\/h2>\n\n\n\n

We will start by laying out the HTML building blocks of our application.<\/p>\n\n\n\n

<div class=\"container\">  <div class=\"col\">    <img src=\"https:\/\/images.unsplash.com\/photo-1605347220242-04d3b97ceee9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80\" onClick=\"openLightbox(this)\" \/>  <\/div>  <div class=\"col\">    <img src=\"https:\/\/images.unsplash.com\/photo-1605306030698-6e966cc142b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80\" onClick=\"openLightbox(this)\" \/>  <\/div>  <div class=\"col\">    <img src=\"https:\/\/images.unsplash.com\/photo-1593642634402-b0eb5e2eebc9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80\" onClick=\"openLightbox(this)\" \/>  <\/div><\/div><!-- Actual Lightbox --><div id=\"lightbox\" class=\"lightbox hidden\">  <div onClick=\"closeLightbox()\" class=\"close\">❌<\/div>  <div class=\"lightbox-content\">    <img id=\"lightbox-image\" \/>  <\/div><\/div><\/code><\/pre>\n\n\n\n
The top part contains the layout the user will see, in this case a container with three columns, each containing one image.<\/p>\n\n\n\n
The image has an onClick<\/code> function, which calls the openLightbox<\/code>. (We will create this in a bit)<\/p>\n\n\n\n
Then at the bottom, we have the actual Lightbox. Inside the Lightbox, we add a simple emoji powered close button, which onClick<\/code> calls the closeLightbox<\/code> function.<\/p>\n\n\n\n
And inside the Lightbox <\/strong>we also see an empty image which we’ll use to place our image in.<\/p>\n\n\n\n
Adding some styling to our Lightbox<\/h2>\n\n\n\n
Let’s make our application look a little bit better by adding some basic styling to it.<\/p>\n\n\n\n
First, we will use\u00a0flexbox<\/code>\u00a0to center our columns, and next we add a border and box-shadow to make the image pop more.<\/p>\n\n\n\n
.container {  display: flex;  flex-wrap: wrap;  background: url(\"https:\/\/images.unsplash.com\/photo-1558051815-0f18e64e6280?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1949&q=80\") no-repeat center center;  background-position: cover;  min-height: 100vh;  justify-content: center;  align-items: center;}.container .col {  width: 30%;  margin: 1.6%;}.container .col img {  cursor: pointer;  border: 5px solid #fff;  box-shadow: 0 0 1rem #aaaaaa;  max-width: 100%;  max-height: 100%;}<\/code><\/pre>\n\n\n\n
As for our Lightbox goes, we need it to span over the whole page, and be fixed starting from the top.<\/p>\n\n\n\n
.lightbox {  position: fixed;  z-index: 1;  left: 0;  top: 0;  width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, 0.5);  overflow: auto;  opacity: 1;  visibility: visible;  transition: all 0.3s ease;}<\/code><\/pre>\n\n\n\n
We are using opacity and visibility so we can animate the fade-in and fade-out effect.<\/p>\n\n\n\n
Now let’s add the hidden class.<\/p>\n\n\n\n
.lightbox.hidden {  opacity: 0;  visibility: hidden;}<\/code><\/pre>\n\n\n\n
And to top it up we style the button, content and image inside the Lightbox.<\/p>\n\n\n\n
.lightbox .close {  position: absolute;  right: 2.5%;  top: 2.5%;  font-size: 2rem;  cursor: pointer;}.lightbox-content {  display: flex;  margin: 5%;  align-items: center;  justify-content: center;}.lightbox-content img {  max-width: 100%;  max-height: 100%;  border: 5px solid #fff;}<\/code><\/pre>\n\n\n\n
JavaScript Lightbox effect<\/h2>\n\n\n\n
On to our JavaScript, this is the part that will hook everything up and make it work.<\/p>\n\n\n\n
What we want to happen:<\/p>\n\n\n\n
  • User clicks on an image. We get the src of the image to append it to our Lightbox image and remove the hidden class from our Lightbox<\/li>
  • User clicks the close button. We re-add the hidden class to our Lightbox.<\/li><\/ul>\n\n\n\n
    Let’s define the variables we need to make it work:<\/p>\n\n\n\n
    const lightbox = document.getElementById('lightbox');const lightboxHolder = document.getElementById('lightbox-image');<\/code><\/pre>\n\n\n\n
    We define our actual Lightbox element, and the image element inside it.<\/p>\n\n\n\n
    Now let’s create the function that will show the Lightbox.<\/p>\n\n\n\n
    openLightbox = (element) => {  lightboxHolder.src = element.src;  lightbox.classList.remove(\"hidden\");};<\/code><\/pre>\n\n\n\n
    Wait, that’s it? Yes, we retrieve the src of the image the user clicked on and add it to our Lightbox. Then we remove the hidden class, and the user sees our Lightbox!<\/p>\n\n\n\n
    Now we just need the close function.<\/p>\n\n\n\n
    closeLightbox = () => lightbox.classList.add(\"hidden\");<\/code><\/pre>\n\n\n\n
    And now we have a fully functional Lightbox<\/strong>, without using any plugins<\/strong>.<\/p>\n\n\n\n
    You can try this Lightbox <\/strong>out on the following Codepen<\/strong> below –<\/p>\n\n\n\n