Responsive Fullscreen Image Slideshow/Gallery Plugin | Story-Show-Gallery

Fullscreen Vertical Image Gallery – SSG(Story-Show-Gallery) nicely combines images and captions to showcase a full story in full-screen mode, in a simple and non-distracting environment. SSG will support your branding and marketing.

Story-Show-Gallery is a lightweight, flexible, and responsive jQuery Photo Gallery plugin created for desktop, tablet, and mobile.

How to make use of it:

1. Insert the newest version of the jQuery library and the Simple Scroll Gallery plugin’s records data into the doc.

<script src="/path/to/cdn/jquery.min.js"></script>
<link rel="stylesheet" href="ssg.css">
<script src="ssg.js"></script>

2. Wrap the pictures & links into a gallery container.

<section class="gallery">

  <a href="#!">
    Add Image Here
  </a>

  <a href="#!">
    Add Image Here
  </a>

  <a href="#!">
    Add Image Here
  </a>

  <a href="#!" "="">Link is supported as well</a>

  ...
  
</section>

3. To make the gallery fullscreen, simply add the CSS class ‘fs’ to the container component:

<section class="fs gallery">

  <a href="#!">
    Add Image Here
  </a>

  <a href="#!">
    Add Image Here
  </a>

  <a href="#!" "="">
    Add Image Here
  </a>

  <a class="fs" href="#!">Link is supported as well</a>

  ...

</section>

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

SSG.run();

5. And then move the optionally available settings as displayed under:

SSG.run({

  // init image ID
  initImgID: 3

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

  // fullscreen mode
  fs: true
  
});

6. The plugin additionally means that you can outline pictures displayed within the gallery through JavaScript:

SSG.run({
  imgs: [
    { 
      href: '1.jpg', 
      alt: 'Img caption 1' 
    }, 
    { 
      href: '2.jpg', 
      alt: 'Img caption 2' 
    },{ 
      href: '3.jpg', 
      alt: 'Img caption 3' 
    }
  ], 
  imgsPos:'start'
});

7. Override the default configurations initially of the ssg.js.

// duration of scroll animation in miliseconds. Set to 0 for no scroll animation.
SSG.cfg.scrollDuration = 500;

// Force SSG to always display in fullscreen - true/false
SSG.cfg.alwaysFullscreen = false;

// Force SSG to never display in fullscreen - true/false
SSG.cfg.neverFullscreen = false;

// URL of the HTML file to load behind the gallery (usually a signpost to other galleries). Set to null if you don't want it.
SSG.cfg.fileToLoad = 'ssg-loaded.html';   // URL is relative to parent HTML file, it's safer to use absolute path https://...

// log image views into Google Analytics - true/false. SSG supports only ga.js tracking code.
SSG.cfg.logIntoGA = true;

// Protect photos from being copied via right click menu - true/false
SSG.cfg.rightClickProtection = true;

// Side caption for smaller, landscape oriented photos, where is enough space below them as well as on their side. true/false
SSG.cfg.sideCaptionforSmallerLandscapeImg = false;  // false means caption below
// in other cases caption position depends on photo size vs. screen size.

// in the portrait mode the gallery suggest to turn phone into landscape mode
SSG.cfg.showLandscapeHint = true;
SSG.cfg.landscapeHint = 'photos look better in landscape mode <span></span>

Responsive Fullscreen Photo Gallery, HTML Photo Gallery Full Screen, Best Full Screen Photo Gallery, Story Show Gallery Github


See Demo And Download

Official Website(Roman-Flossler): Click Here

This superior jQuery/javascript plugin is developed by Roman-Flossler. For extra Advanced Usage, please go to the official website.

Share