
Story-Show-Gallery is a lightweight, flexible, responsive, interactive jQuery Photo Gallery plugin created for desktop, tablet, and mobile.
Clicking the thumbnail & link will display all the images in a fullscreen vertical slider where the users are able to navigate through images with mousewheel, arrow keys and touch swipe events.
Licensed under the Mozilla Public License 2.0.
How to use it:
1. Insert the latest version of jQuery library and the Simple Scroll Gallery plugin's files into the document.
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> </script> <link rel="stylesheet" href="ssg.css" type="text/css"> <script src="ssg.js"></script>
2. Wrap the images & links into a gallery container.
<section class="gallery"> <a href='large.jpg'> <img src="thumb.jpg" alt="Image 1"> </a> <a href='large.jpg'> <img src="thumb.jpg" alt="Image 1"> </a> <a href='large.jpg'> <img src="thumb.jpg" alt="Image 1"> </a> <a href='large.jpg'>Link is supported as well</a> ... </section>
3. That's it. To make the gallery fullscreen, just add the CSS class 'fs' to the container element:
<section class="fs gallery"> <a href='large.jpg'> <img src="thumb.jpg" alt="Image 1"> </a> <a href='large.jpg'> <img src="thumb.jpg" alt="Image 1"> </a> <a href='large.jpg'> <img src="thumb.jpg" alt="Image 1"> </a> <a class="fs" href='large.jpg'>Link is supported as well</a> ... </section>
4. You can also launch the gallery manually by calling a function:
SSG.run();
5. And then pass the optional settings as displayed below:
SSG.run({ // init image ID initImgID: 3 // no close icon, no ESC key noExit: true, // fullscreen mode fs: true });
Changelog:
2019-06-04
- right click protection, fix for opera browser
2019-05-27
- gallery from JS array, better final photo position
2019-05-03
- Better positioning of caption, minding the notch
2019-04-17
- better ordering with subIDs, transition with fading, deleting files
2019-04-04
- Css classes for controlling the gallery, initImgID parameter
2019-03-19
- optimize and enhace scrolling, code refactoring, fsa parameter
2019-02-15
- Complete reformat of the code for better readability, minor fixes
2019-02-12
- hash url for each image, onload error event, dark theme for chrome, bugs
2019-02-02
- Renamed to Story Show Gallery, dynamic landscape mode, a lot of minor improvements
2019-01-11
- ultra wide screen mode, visual tuning, info update
2019-01-09
- ultra wide screen mode, info update
2018-12-09
- CSS update
2018-12-04
- CSS update
2018-11-30
- update
2018-11-08
- no exit mode, a minimal crash course, new text style, info update
2018-11-01
- Bugfixes
2018-10-19
- Tuning of CSS (iPhoneX, responsiveness), SVG icons, UX, sample update
2018-09-27
- bug fixes, scrollbar in FF & Edge, sample update, better arrow & cursor
2018-09-26
- Bugfix
2018-09-22
- some fixes, not white scrollbar in FF and Edge, info update
This awesome jQuery plugin is developed by Roman-Flossler. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 04.06.2019
- Source