Slider-style Fullsreen Image Viewer - jQuery da_pro_gallery

da_pro_gallery is a jQuery plugin to create a responsive photo gallery where the users are able to browse all group images in a slider-style lightbox.

Click on the thumbnail to trigger the gallery lightbox. Click on the prev/next navigation buttons to slide through images. Image loader is supported as well.

How to use it:

1. Create a photo gallery and group your images using the rel attribute. It means that all the images in a group must have the same rel value.

<div class="gallery">

  <!-- Group 1 -->
  <div>
    <h1>Group 1</h1>
    <a href="1.jpg" rel="group_1" title="Group 1">
      <img src="thumb-1.jpg">
    </a>
  </div>
  <div>
    <h1>Group 1</h1>
    <a href="2.jpg" rel="group_1" title="Group 1">
      <img src="thumb-2.jpg">
    </a>
  </div>
  <div>
    <h1>Group 1</h1>
    <a href="3.jpg" rel="group_1" title="Group 1">
      <img src="thumb-3.jpg">
    </a>
  </div>

  <!-- Group 2 -->
  <div>
    <h1>Group 2</h1>
    <a href="4.jpg" rel="group_2" title="Group 2">
      <img src="thumb-4.jpg">
    </a>
  </div>

  <div>
    <h1>Group 2</h1>
    <a href="5.jpg" rel="group_2" title="Group 2">
      <img src="thumb-5.jpg">
    </a>
  </div>

  <div>
    <h1>Group 2</h1>
    <a href="6.jpg" rel="group_2" title="Group 2">
      <img src="thumb-6.jpg">
    </a>
  </div>

  <!-- More Groups here -->

</div>

2. Insert jQuery library and the jQuery da_pro_gallery plugin's files into the page.

<link rel="stylesheet" media="screen" href="css/gallery.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="js/gallery.js"></script>

3. Initialize the gallery and done.

$(gallery.construct('group_1|group_2'));

Changelog:

2020-07-21

• Updated

---

This awesome jQuery plugin is developed by da-pro. For more Advanced Usages, please check the demo page or visit the official website.