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.