Responsive Lightbox Image Gallery with jQuery

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

Plugin Overview

Plugin: Interactive Photo Gallery
Author: Triantafyllos Famprikatzis
Licence: MIT Licence
Published: March 26, 2019
Repository: Fork on GitHub
Dependencies: jQuery 2.0.1 or Latest version and Lightbox v2.10.0
File Type: zip archive (HTML, CSS, JavaScript & Images)
Package Size: 8.32 MB

How to Use Lightbox Image Gallery:

1. To getting 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 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>