Free Responsive Image Gallery Template | Lightbox Image Gallery Snippet

Create a stunning and fully responsive image gallery using this free template. This image gallery snippet includes a Lightbox feature, allowing you to showcase your images beautifully. Ideal for photographers and creatives, the gallery adjusts perfectly.

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css" />
<section id="fws_gallery_1">
  <div class="fws_gallery">
      <div class="container">
          <div class="heading">
              <h2 class="text-center">Lightbox Gallery</h2>
              <p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting indust</p>
          </div>
          <div class="row">
              <div class="col-lg-4 col-md-4 col-sm-6 item">
                  <a href="https://images.pexels.com/photos/36762/scarlet-honeyeater-bird-red-feathers.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" data-lightbox="photos">
                      <img class="img-fluid" src="https://images.pexels.com/photos/36762/scarlet-honeyeater-bird-red-feathers.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
                  </a>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-6 item">
                  <a href="https://images.pexels.com/photos/460775/pexels-photo-460775.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" data-lightbox="photos">
                      <img class="img-fluid" src="https://images.pexels.com/photos/460775/pexels-photo-460775.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
                  </a>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-6 item">
                  <a href="https://images.pexels.com/photos/45853/grey-crowned-crane-bird-crane-animal-45853.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" data-lightbox="photos">
                    <img class="img-fluid" src="https://images.pexels.com/photos/45853/grey-crowned-crane-bird-crane-animal-45853.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
                  </a>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-6 item">
                  <a href="https://images.pexels.com/photos/33045/lion-wild-africa-african.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" data-lightbox="photos">
                    <img class="img-fluid" src="https://images.pexels.com/photos/33045/lion-wild-africa-african.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
                  </a>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-6 item">
                  <a href="https://images.pexels.com/photos/610293/pexels-photo-610293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" data-lightbox="photos">
                    <img class="img-fluid" src="https://images.pexels.com/photos/610293/pexels-photo-610293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
                  </a>
              </div>
              <div class="col-lg-4 col-md-4 col-sm-6 item">
                  <a href="https://images.pexels.com/photos/70577/sunset-birds-flying-sky-70577.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" data-lightbox="photos">
                    <img class="img-fluid" src="https://images.pexels.com/photos/70577/sunset-birds-flying-sky-70577.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
                  </a>
              </div>
          </div>
      </div>
  </div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js"></script>

CSS

JS

Width:

Height:

Looking to enhance your website with a visually stunning image gallery? This responsive image gallery is the perfect solution. Built with a sleek and modern design, it adapts effortlessly to different screen sizes, making it ideal for any device. Whether you're a photographer, designer, or business owner, this image gallery snippet helps showcase your visuals in the best way possible.

This free image gallery template features a user-friendly Lightbox gallery, allowing visitors to click and view images in high resolution, creating an immersive and interactive experience. The Lightbox functionality ensures that images are displayed in a larger view with easy navigation between them, making it perfect for portfolios, blogs, or business websites that want to highlight their work.

This responsive image gallery is not only functional but also aesthetically pleasing, providing a professional touch to any site. By downloading this free image gallery template, you’ll be able to create a visually compelling gallery that elevates your website’s appearance and engages visitors.

Whether you're building a new website or updating an existing one, this image gallery snippet is the perfect addition to make your visuals stand out. Don't miss the chance to enhance your site with this modern and flexible gallery solution—download the free gallery code and start building your stunning Lightbox gallery today!

Make a Comment

Your email address will not be published. Required fields are marked *

Related Snippet

Stylish Bootstrap 5 Alerts for Error, Warning, Info, and Success

Stylish Bootstrap 5 Alerts for Error, Warning, Info, and Success

13-Aug-2024 Updated : 24-Aug-2024

Two Column Lightbox Image Gallery Snippet

Two Column Lightbox Image Gallery Snippet

18-Sep-2024 Updated : 18-Sep-2024

Custom Heading Design for Modern Web Pages

Custom Heading Design for Modern Web Pages

13-Sep-2024 Updated : 13-Sep-2024

Elegant Call to Action Snippet with HTML, CSS & Bootstrap 5 for Web Design

Elegant Call to Action Snippet with HTML, CSS & Bootstrap 5 for Web Design

26-Aug-2024 Updated : 26-Aug-2024

Snippets Categories