Responsive Lightbox Image Gallery with jQuery

Responsive Lightbox Image Gallery with jQuery
Code Snippet:Interactive Photo Gallery
Author: Triantafyllos Famprikatzis
Published: January 6, 2024
Last Updated: January 22, 2024
Downloads: 3,813
License: MIT
Edit Code online: View on CodePen
Read More

A fully responsive jQuery-based image gallery with lightbox, thumbnails, and search. Interactive Photo Gallery is a responsive CSS & jQuery-based grid layout photo gallery with filter images by search.

How to Create Lightbox Image Gallery

1. To get started using Interactive Photo Gallery, load the jQuery, Normalize CSS, and Google fonts by CDN links into your website.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Normalize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">

2. Now include the Lightbox & Gallery’s JavaScript and CSS Files into your page.

<!-- Lightbox CSS for Gallery -->
<link rel="stylesheet" href="css/lightbox.css">

<!-- Basic CSS for Gallery -->
<link rel="stylesheet" href="css/styles.css">

<!-- Lightbox Js -->
<script src="js/lightbox.min.js"></script>

<!-- Responsive lightbox image gallery jQuery -->
<script src="js/scripts.js"></script>

3. Create the basic HTML structure for a responsive lightbox image gallery and put your image’s links into it, just like below:

 <form class="form" action="index.html" method="POST">
        <div class="search-form">
            <input type="search" id="image-search" placeholder="Search(16pt)">
        </div>
       </form>
        <div class="wrapper">
         <div class="thumb">
            <a href="photos/01.jpg" data-lightbox="image-grid" data-title="Hay Bales I love hay bales.
             Took this snap on a drive through the countryside past some straw fields.
            "><img src="photos/thumbnails/01.jpg" alt="Hay Bales, Straw Fields"></a>
         </div>
         <div class="thumb">
            <a href="photos/02.jpg" data-lightbox="image-grid" data-title="The lake was so calm today.
             We had a great view of the snow on the mountains from here.">
             <img src="photos/thumbnails/02.jpg" alt="Lake, Calm, Mountains"></a>
         </div>
         <div class="thumb">
            <a href="photos/03.jpg" data-lightbox="image-grid" data-title="I hiked to the top of the
             mountain and got this picture of the canyon and trees below.">
             <img src="photos/thumbnails/03.jpg" alt="Canyon, Trees, Mountain"></a>
         </div>
         <div class="thumb">
            <a href="photos/04.jpg" data-lightbox="image-grid" data-title="It was amazing to see an
             iceberg up close, it was so cold but didn’t snow today.">
             <img src="photos//thumbnails/04.jpg" alt="Iceberg, Snow, Cold"></a>
         </div>
         <div class="thumb">
            <a href="photos/05.jpg" data-lightbox="image-grid" data-title="The red cliffs were beautiful.
             It was really hot in the desert but we did a lot of walking through the canyons.">
             <img src="photos/thumbnails/05.jpg" alt="Desert, Cliffs, Canyons"></a>
         </div>
         <div class="thumb">
            <a href="photos/06.jpg" data-lightbox="image-grid" data-title="Fall is coming,
             I love when the leaves on the trees start to change color.">
             <img src="photos/thumbnails/06.jpg" alt="Fall, Leaves"></a>
         </div>
         <div class="thumb">
            <a href="photos/07.jpg" data-lightbox="image-grid" data-title="I drove past this plantation
             yesterday, everything is so green!">
             <img src="photos/thumbnails/07.jpg" alt="Plantation, Green"></a>
         </div>
         <div class="thumb">
            <a href="photos/08.jpg" data-lightbox="image-grid" data-title="My summer vacation
             to the Oregon Coast. I love the sandy dunes!">
             <img src="photos/thumbnails/08.jpg" alt="Dunes, Sand"></a>
         </div>
         <div class="thumb">
            <a href="photos/09.jpg" data-lightbox="image-grid" data-title="We enjoyed
             a quiet stroll down this countryside lane.">
             <img src="photos/thumbnails/09.jpg" alt="Countryside, Lane"></a>
         </div>
         <div class="thumb">
            <a href="photos/10.jpg" data-lightbox="image-grid" data-title="
            Sunset at the coast! The sky turned a lovely shade of orange.">
            <img src="photos/thumbnails/10.jpg" alt="Sunset, Shade, Coast"></a>
         </div>
         <div class="thumb">
            <a href="photos/11.jpg" data-lightbox="image-grid" data-title="I did a tour of
             a cave today and the view of the landscape below was breathtaking.">
             <img src="photos/thumbnails/11.jpg" alt="Cave"></a>
         </div>
         <div class="thumb">
            <a href="photos/12.jpg" data-lightbox="image-grid" data-title="I walked through this meadow
             of bluebells and got a good view of the snow on the mountain before the fog came in.">
             <img src="photos/thumbnails/12.jpg" alt="Bluebells, Mountain, Fog, Snow, Meadow"></a>
         </div>
        </div>

That’s all! hopefully, you have successfully created a responsive lightbox image gallery using jQuery. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...