Creating Lightbox Gallery Using HTML, CSS & JavaScript

Spread the love

Creating LightBox Gallery is really easy and interesting if followed the instructions below. A website is almost boring without a gallery in it and it is great when we can zoom it and slide to next and previous photo.

Let us start with the designing of LightBox Gallery using HTML, CSS & JavaScript.

Steps To Create A LightBox Gallery Using HTML, CSS & JavaScript

Create a page gallery.html and paste the following code in it.

<!DOCTYPE html>
<html>
<head>
	<title>Lightbox Gallery</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	
</body>
</html>

Now create 3 folders : css, js & images. Create a file style.css in css folder and add the following code :

.gallery
{
	margin: 10px 50px;
	object-fit: cover;
	object-position: 100% 0;
}
.gallery img
{
	transition:1s;
	padding:15px;
	width:22%;

}
.gallery img:hover
{
	filter:grayscale(100%);
	transform: scale(1.1);
}

You can change the width according to your choice. Then link style.css to gallery.html by adding the code between <head> </head>.

<link rel="stylesheet" type="text/css" href="css/style.css">

Adding LightBox Script

Search for Lightbox – Lokesh Dhakar in Google or visit the link https://lokeshdhakar.com/projects/lightbox2/ and download the zip folder from Github.

After downloading unzip the folder. We don’t need the complete folder, what we need are 2 files : lightbox.min.css & lightbox-plus-jquery.min.js.

Open the lightbox folder and go to dist > css > lightbox.min.css and copy this file to css folder of your project. Similarly, go to lightbox folder and then to dist > js > lightbox-plus-jquery.min.js .

Now in gallery.html page add the following code between <head></head> tags :

<link rel="stylesheet" type="text/css" href="css/lightbox.min.css">
<script  src="js/lightbox-plus-jquery.min.js"></script>

Now add photos to image folder. I am adding 6 photos and their 6 thumbnails. Add the following code between <body> </body> tags.

<div class="gallery">
		<a href="images/1.jpg" data-lightbox="mygallery"><img src="images/1-thumb.jpg"></a>
		<a href="images/2.jpg" data-lightbox="mygallery"><img src="images/2-thumb.jpg"></a>
		<a href="images/3.jpg" data-lightbox="mygallery"><img src="images/3-thumb.jpg"></a>
		<a href="images/4.jpg" data-lightbox="mygallery"><img src="images/4-thumb.jpg"></a>
		<a href="images/5.jpg" data-lightbox="mygallery"><img src="images/5-thumb.jpg"></a>
		<a href="images/6.jpg" data-lightbox="mygallery"><img src="images/6-thumb.jpg"></a>
	</div>

Here 1-thumb.jpg is the thumbnail image and 1.jpg is high resolution image. The page will look like something like this :

Creating LightBox Gallery View

When you mouse hover any image it will show some mouse hover effect and on clicking the lighbox will open. You can slide images by clicking next and previous button.

I am a PHP Developer and WordPress lover. I love using CSS and JavaScript a lot in my work as I like animation and love things moving in a webpage.

You can CONTACT ME HERE.

Divyanshi Gupta

Your amazing lightbox gallery is ready now with lesser efforts. I hope you like this blog. Please comment and share if you have any confusion with creating lightbox gallery. 🙂

Was this post helpful?

Leave a Reply

Your email address will not be published. Required fields are marked *