Responsive Lightbox Image Gallery with jQuery

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.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.