Responsive Fullscreen Photo Gallery - jQuery Story-Show-Gallery

Responsive Fullscreen Photo Gallery - jQuery Story-Show-Gallery
File Size: 150 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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="" 
<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 href='large.jpg'>
    <img src="thumb.jpg" alt="Image 1">

  <a href='large.jpg'>
    <img src="thumb.jpg" alt="Image 1">

  <a href='large.jpg'>Link is supported as well</a>


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 href='large.jpg'>
    <img src="thumb.jpg" alt="Image 1">

  <a href='large.jpg'>
    <img src="thumb.jpg" alt="Image 1">

  <a class="fs" href='large.jpg'>Link is supported as well</a>



4. You can also launch the gallery manually by calling a function:;

5. And then pass the optional settings as displayed below:{

  // init image ID
  initImgID: 3

  // no close icon, no ESC key
  noExit: true,

  // fullscreen mode
  fs: true


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

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

v2.5.5 (2019-11-22)

  • hotfix of loading bar and little CSS tuning

v2.5.4 (2019-11-20)

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


  • exit icon is following caption, minding the notch


  • right click protection, fix for opera browser


  • gallery from JS array, better final photo position


  • Better positioning of caption, minding the notch


  • better ordering with subIDs, transition with fading, deleting files


  • Css classes for controlling the gallery, initImgID parameter


  • optimize and enhace scrolling, code refactoring, fsa parameter


  • Complete reformat of the code for better readability, minor fixes


  • hash url for each image, onload error event, dark theme for chrome, bugs


  • Renamed to Story Show Gallery, dynamic landscape mode, a lot of minor improvements


  • ultra wide screen mode, visual tuning, info update


  • ultra wide screen mode, info update


  • CSS update


  • CSS update


  • update


  • no exit mode, a minimal crash course, new text style, info update


  • Bugfixes


  • Tuning of CSS (iPhoneX, responsiveness), SVG icons, UX, sample update


  • bug fixes, scrollbar in FF & Edge, sample update, better arrow & cursor


  • Bugfix


  • 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.