Responsive Fullscreen Photo Gallery - jQuery Story-Show-Gallery

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:

v2.5.6/7 (2020-01-01)

• new color scheme based on user survey and tested on many devices
• hotfix of SSG.run method

v2.5.5 (2019-11-22)

• hotfix of loading bar and little CSS tuning

v2.5.4 (2019-11-20)

• Update

v2.5.3 (2019-11-14)

• speed optimization, better hash & GA, fixes

v2.5.2 (2019-10-31)

• separate galleries, vipssg class, bigger imgs

v2.4.2 (2019-10-16)

• howto update, initImgID for arrays, fixes

v2.4.1 (2019-08-07)

• Real full screen mode in Chrome mobile. No white bars, a whole screen just for photos.

v2.4.0 (2019-08-07)

• fullscreen like on YouTube, iOS fix

v2.3.3 (2019-07-19)

• Optimized launch and orientation change
• Hint for a user how to browse through the gallery on touch devices

2019-06-24

• exit icon is following caption, minding the notch

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.