In part one of this tutorial, we learned how easy it is to create a simple gallery with filters. If you have not read part one yet, make sure to do that first!
On this part we will expand our gallery by creating lightbox functionality. That is when the user clicks on an image of our gallery, the image expands (or not depending on the size as we will see!)
to gain focus and the rest of the webpage dims.
The first step is to create the container div for the lightbox. Inside it we create another div to hold the image, a close button for obvious reasons and finally, the image element.
We won’t need to add anything more in our html file. Now it’s about time we make our lightbox look like one!
Let’s examine the above code bit by bit. First of all, we create the looks for our parent lightbox div. We set the display property to table (we will see why later). Then make it occupy the whole window, and give it a dark shadow-ish background. You will notice that we set opacity to zero and the visibility as hidden. That’s because the lightbox is hidden by default.
After we’ve done that, we create the open class for the lightbox which, when added, shows the lightbox, obviously! The close-btn class determines how the close button of the lightbox will look like.
What remains now is to create the container div for the image, which we make center aligned vertically and horizontally. Finally, we give the enclosing image a max width of 90%;
Now that we are done with styles, it’s time to bring it all to life using some jQuery:
Step by step what we do in the above code is; When an image within the gallery is clicked:
We fetch the src attribute of the clicked image and hold it in the ‘ClickedImgSrc’ variable.
Create a variable named theLightboxImage, which is the image element that lies in the lightbox.
Next, we give the src attribute of the clicked image, to the image of the lightbox.
Right before showing the image, we add some code to position the close button at the right corner of the image.
When we are done with that, we can show the lightbox, by adding the class ‘open’ we created earlier.
The final step is to make the close button, actually close the lightbox when clicked. We do that by just removing the ‘open’ class from the lightbox.
That’s all! In just a couple of easy to follow tutorials, we have created a basic image gallery with filters. I leave it up to you to experiment, make it look better and expand its functionality even further.
You can see a full working demo of what we just made on GitHub
Did you like what you just read? Want to see more?
Don’t forget to leave me some comments bellow with your thoughts!