jQuery Fullscreen Gallery With Thumbnail Navigation

A dynamic, responsive, fullscreen gallery where you can fade through a sequence of images by clicking on the thumbnail in the navigation carousel. Built using jQuery, CSS/CSS3 and JSON.

How to use it:

1. Load the gallery's core stylesheet in the document's head section:

<link rel="stylesheet" href="css/style.css">

2. Create the html structure for the gallery and its controls.

<div class = "container">
  <div class = "slider__wrapper">
    <div class = "slider__view">
      <div class = "view__img"> 
        <!-- Rendering firt image from thumbs with jQuery--> 
      </div>
    </div>
    <div class = "slider__thumbs">
      <button class = "scroll__btn left__btn"> <img src = "img/left-button.png" alt = "left" width = "25px" height = "45px"> </button>
      <button class = "scroll__btn right__btn"> <img src = "img/right-button.png" alt = "left" width = "25px" height = "45px"> </button>
      <div class = "thumbs__img" id = "thumbnail-holder"> 
        <!-- Rendering thumbs with jQuery--> 
      </div>
    </div>
  </div>
</div>

3. Load jQuery library gallery's script at the end of the html document:

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

4. Add your own images to the 'data.json':

[
    {"id": "1", "link": "#", "src": "1.jpg"},
    {"id": "2", "link": "#", "src": "2.jpg"},
    {"id": "3", "link": "#", "src": "3.jpg"},
    {"id": "4", "link": "#", "src": "4.jpg"},
    ...
]

Changelog:

2019-08-07

• Update to class pattern

2019-03-04

• CSS fixed for safari

2018-02-21

• js code cleaned

2018-02-18

• js code cleaned

2017-11-04

• Fixed thumbnail size.

---

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