This time I will share jQuery Plugin and tutorial about jQuery Fullscreen Gallery With Thumbnail Navigation, hope it will help you in programming stack.
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:
1 |
<link rel="stylesheet" href="css/style.css"> |
2. Create the html structure for the gallery and its controls.
01 |
<div class = "container"> |
02 |
<div class = "slider__wrapper"> |
03 |
<div class = "slider__view"> |
04 |
<div class = "view__img"> |
08 |
<div class = "slider__thumbs"> |
09 |
<button class = "scroll__btn left__btn"> <img src = "img/left-button.png" alt = "left" width = "25px" height = "45px"> </button> |
10 |
<button class = "scroll__btn right__btn"> <img src = "img/right-button.png" alt = "left" width = "25px" height = "45px"> </button> |
11 |
<div class = "thumbs__img" id = "thumbnail-holder"> |
3. Load jQuery library gallery’s script at the end of the html document:
1 |
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> |
4. Add your own images to the ‘data.json’:
2 |
{"id": "1", "link": "#", "src": "1.jpg"}, |
3 |
{"id": "2", "link": "#", "src": "2.jpg"}, |
4 |
{"id": "3", "link": "#", "src": "3.jpg"}, |
5 |
{"id": "4", "link": "#", "src": "4.jpg"}, |
Changelog:
2019-08-07
2019-03-04
2018-02-21
2018-02-18
2017-11-04
This awesome jQuery plugin is developed by clickad. For more Advanced Usages, please check the demo page or visit the official website.
