This HTML CSS and JavaScript project helps you to create a responsive image gallery. It comes with a grid layout of thumbnail cards and uses Fancybox JS for lightbox. Each card contains an image and a link to a larger version of the image, which is displayed when the user clicks on the image. The link uses the data-fancybox attribute to open a fancybox window with the larger image, and the data-caption attribute displays a caption for the image.
How to Create Responsive Image Gallery
First, load the FacnyBox CSS by adding the following CDN link into the head tag of your HTML document.
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css'>
Create the HTML structure for image gallery as follows:
<main class="main"> <div class="container"> <div class="card"> <div class="card-image"> <a href="https://source.unsplash.com/1280x720/?nature" data-fancybox="gallery" data-caption="Caption Images 1"> <img src="https://source.unsplash.com/1280x720/?nature" alt="Image Gallery"> </a> </div> </div> <div class="card"> <div class="card-image"> <a href="https://source.unsplash.com/1280x720/?food" data-fancybox="gallery" data-caption="Caption Images 1"> <img src="https://source.unsplash.com/1280x720/?food" alt="Image Gallery"> </a> </div> </div> <div class="card"> <div class="card-image"> <a href="https://source.unsplash.com/1280x720/?travel" data-fancybox="gallery" data-caption="Caption Images 1"> <img src="https://source.unsplash.com/1280x720/?travel" alt="Image Gallery"> </a> </div> </div> <div class="card"> <div class="card-image"> <a href="https://source.unsplash.com/1280x720/?building" data-fancybox="gallery" data-caption="Caption Images 1"> <img src="https://source.unsplash.com/1280x720/?building" alt="Image Gallery"> </a> </div> </div> <div class="card"> <div class="card-image"> <a href="https://source.unsplash.com/1280x720/?flower" data-fancybox="gallery" data-caption="Caption Images 1"> <img src="https://source.unsplash.com/1280x720/?flower" alt="Image Gallery"> </a> </div> </div> <div class="card"> <div class="card-image"> <a href="https://source.unsplash.com/1280x720/?animal" data-fancybox="gallery" data-caption="Caption Images 1"> <img src="https://source.unsplash.com/1280x720/?animal" alt="Image Gallery"> </a> </div> </div> <div class="card"> <div class="card-image"> <a href="https://source.unsplash.com/1280x720/?sport" data-fancybox="gallery" data-caption="Caption Images 1"> <img src="https://source.unsplash.com/1280x720/?sport" alt="Image Gallery"> </a> </div> </div> <div class="card"> <div class="card-image"> <a href="https://source.unsplash.com/1280x720/?human" data-fancybox="gallery" data-caption="Caption Images 1"> <img src="https://source.unsplash.com/1280x720/?human" alt="Image Gallery"> </a> </div> </div> <div class="card"> <div class="card-image"> <a href="https://source.unsplash.com/1280x720/?mountain" data-fancybox="gallery" data-caption="Caption Images 1"> <img src="https://source.unsplash.com/1280x720/?mountain" alt="Image Gallery"> </a> </div> </div> </div> </main>
Style the gallery using the following CSS styles:
*, *::before, *::after { padding: 0; margin: 0; box-sizing: border-box; list-style: none; list-style-type: none; text-decoration: none; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .cd__main{ display: block !important; } body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: 1rem; font-weight: normal; line-height: 1.5; color: #252a32; background: #ffffff; } .container { max-width: 80rem; width: 100%; padding: 4rem 2rem; margin: 0 auto; } .main .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; justify-content: center; align-items: center; } .main .card { color: #252a32; border-radius: 2px; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24); } .main .card-image { position: relative; display: block; width: 100%; padding-top: 70%; background: #ffffff; } .main .card-image img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } @media only screen and (max-width: 600px) { .main .container { display: grid; grid-template-columns: 1fr; grid-gap: 1rem; } }
Load the jQuery and Fancybox JS by adding the following CDN to your project.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js'></script>
Finally, initialize the image gallery with the following configuration options.
// Fancybox Configuration $('[data-fancybox="gallery"]').fancybox({ buttons: [ "slideShow", "thumbs", "zoom", "fullScreen", "share", "close" ], loop: false, protect: true });
That’s all! hopefully, you have successfully created a responsive image gallery in HTML CSS & JavaScript. If you have any questions or suggestions, feel free to comment below.