Image Gallery with Lightbox effect

Responsive web design is an integral part of modern web design and development. We know that nowadays users access different websites through different devices including tablets, laptops, smartphones, and desktops. It is therefore crucial to ensure that users are provided with a visually appealing and seamless experience across different screen sizes. Today we will design a responsive image gallery that will adapt perfectly to devices of different sizes. We have provided this type of image gallery code before. Today this CSS Responsive Image Gallery Snippet has added a lightbox effect using JavaScript. The video tutorial below shows the step-by-step process of creating this responsive web design snippet. Watch the entire video before collecting the source code. It will help you a lot in understanding the code. If you find the content of our channel useful, please subscribe to our channel.

Video Tutorial:

We hope that you have watched the video tutorial on responsive Image gallery with Lightbox effect. A responsive image gallery works as a feature or component to display images on any website to users in an attractive and user-friendly manner. It is used to display any products, portfolio items, event photos, or any visual content within a single space on a webpage. Since website owners display their best work or product images in this image gallery, their company's credibility increases. Also, any new user can resort to this image gallery snippet to get an idea about a company.

Almost all types of websites these days use this responsive web design element. Some of them are E-commerce Websites, Photography Portfolios, Art and Design Portfolios, Travel Blogs and Websites, Event Websites, Educational Websites, Real Estate Websites, News and Magazine Websites, Corporate Websites, Fashion Websites, Food and Recipe Blogs, Fitness and Wellness Websites etc. The lightbox effect is included in this image gallery. Lightbox or modal view is an effect that opens a larger version of the selected image in the image gallery. This particular effect provides a focused and immersive experience for users.

You may Also Like:

Responsive Image Gallery with Lightbox effect [ Source Code ]:

Responsive image gallery plays an important role in providing the best viewing experience to the users of any website and getting an idea about a website's services or products within a short period of time. To create this responsive web design code snippet you need to create an HTML and CSS file. You can create a separate JS file for the JavaScript code we used in this project. After creating the files copy the following codes from the code box below and paste them into your files. In case of emergency, you can download the source code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
  <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Image gallery</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="gallery"> 
        <div class="image">
          <img src="port/port1.jpg" alt="Image 1" onclick="openModal('port/port1.jpg', 'Web Design')">
        </div>
        <div class="image">
          <img src="port/port2.jpg" alt="Image 2" onclick="openModal('port/port2.jpg', 'Graphics Design')">
        </div>
        <div class="image">
          <img src="port/port3.jpg" alt="Image 3" onclick="openModal('port/port3.jpg', 'UI UX Design')">
        </div>
        <div class="image">
          <img src="port/port4.jpg" alt="Image 4" onclick="openModal('port/port4.jpg', 'Photography')">
        </div>
        <div class="image">
          <img src="port/port5.jpg" alt="Image 5" onclick="openModal('port/port5.jpg', 'Web Development')">
        </div>
        <div class="image">
          <img src="port/port6.jpg" alt="Image 6" onclick="openModal('port/port6.jpg', 'Digital Marketing')">
        </div>
      </div>
      
      <div id="modal" class="modal">
        <span class="close" onclick="closeModal()">×</span>
        <img id="modal-image" src="" alt="Modal Image">
        <div id="caption" class="caption"></div>
      </div>


      <script>
        function openModal(imageSrc, imageAlt) {
        const modal = document.getElementById('modal');
        const modalImg = document.getElementById('modal-image');
        const captionText = document.getElementById('caption');

        modal.style.display = 'block';
        modalImg.src = imageSrc;
        modalImg.alt = imageAlt;
        captionText.innerHTML = imageAlt;
        }

        function closeModal() {
        const modal = document.getElementById('modal');
        modal.style.display = 'none';
        }

      </script>
</body>
</html>

ADD CSS:

body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	background: linear-gradient(45deg, #9b2db2, #36cfe9);
}
.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 80%;
	margin: 0 auto;
}
.image {
	margin: 10px;
	position: relative;
	flex: 1 1 calc(33.33% - 20px);
	max-width: 300px;
	overflow: hidden;
}
.image img {
	width: 100%;
	cursor: pointer;
}
@media (max-width: 768px) {
	.image {
		flex: 1 1 calc(50% - 20px);
	}
}
@media (max-width: 576px) {
	.image {
		flex: 1 1 100%;
	}
}
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.9);
	padding-top: 60px;
}
.modal img {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
}
.close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	cursor: pointer;
}
.close:hover, .close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}
.caption {
	margin: 10px;
	color: #ccc;
	text-align: center;
}
@media (max-width: 600px) {
	body {
		height: 100%;
	}
}

We Hope the code is working for you. To get the other snippets about Landing Page Design, CSS Animation, JavaScript Projects, Bootstrap Projects, etc please click the Load More button on our homepage. Thanks for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Responsive Image Gallery with Lightbox effect [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Image Gallery with Lightbox effect

Video Tutorial:

Responsive Image Gallery with Lightbox effect [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form