How to crate a photo collection gallery in using HTML, CSS & Javascript ?
How to crate a photo collection gallery in using HTML, CSS & Javascript ?
Example of Code :
<!DOCTYPE html>
<html>
<head>
<title>Photo Gallery</title>
<style>
/* Styles for the photo gallery */
.photo-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.photo {
margin: 10px;
border: 2px solid #333;
border-radius: 10px;
box-shadow: 5px 5px 10px #888888;
overflow: hidden;
cursor: pointer;
}
.photo img {
width: 100%;
height: auto;
transition: transform 0.3s ease;
}
.photo:hover img {
transform: scale(1.2);
}
/* Styles for the lightbox */
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s;
}
.lightbox img {
max-width: 90%;
max-height: 90%;
}
.lightbox.visible {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class="photo-gallery">
<div class="photo" onclick="openLightbox('images/photo1.jpg')">
<img src="https://www.shutterstock.com/image-illustration/3d-render-abstract-minimal-neon-260nw-2050037234.jpg" alt="Photo 1">
</div>
<div class="photo" onclick="openLightbox('images/photo2.jpg')">
<img src="https://www.shutterstock.com/image-illustration/3d-render-abstract-minimal-neon-260nw-2050037234.jpg" alt="Photo 2">
</div>
<div class="photo" onclick="openLightbox('images/photo3.jpg')">
<img src="https://www.shutterstock.com/image-illustration/3d-render-abstract-minimal-neon-260nw-2050037234.jpg" alt="Photo 3">
</div>
<div class="photo" onclick="openLightbox('images/photo4.jpg')">
<img src="https://www.shutterstock.com/image-illustration/3d-render-abstract-minimal-neon-260nw-2050037234.jpg" alt="Photo 4">
</div>
<div class="photo" onclick="openLightbox('images/photo5.jpg')">
<img src="https://www.shutterstock.com/image-illustration/3d-render-abstract-minimal-neon-260nw-2050037234.jpg" alt="Photo 5">
</div>
</div>
<div class="lightbox" onclick="closeLightbox()">
<img src="" alt="">
</div>
<script>
function openLightbox(imageUrl) {
const lightbox = document.querySelector('.lightbox');
const image = lightbox.querySelector('img');
image.src = imageUrl;
lightbox.classList.add('visible');
}
function closeLightbox() {
const lightbox = document.querySelector('.lightbox');
lightbox.classList.remove('visible');
}
</script>
</body>
</html>
Comments
Post a Comment