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 GNU General Public License v3.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="/path/to/cdn/jquery.min.js"></script>
<link rel="stylesheet" href="ssg.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. More CSS classes to control the gallery.

• ssg: To create a separate gallery, add this CSS class to the parent container.
• nossg: Ignore images with this CSS class.
• gossg: Set the initial image with this CSS class.
• vipssg: Set the VIP image.

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

SSG.run();

6. 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
  
});

7. The plugin also allows you to define images displayed in the gallery via 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'
});

8. Override the default configurations at the beginning 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>

Changelog:

v2.8.2 (2020-06-26)

• minor fixes

v2.8.1 (2020-06-16)

• minor fixes

v2.8.0 (2020-06-12)

• structure change, readme update, minification

v2.7.3 (2020-06-06)

• better sharing menu, CSS tuning, tablet FS

v2.7.2 (2020-05-30)

• fixed error with scroll listener in Firefox

v2.7.1 (2020-05-27)

• Tweaking CSS and full screen mode

v2.7.0 (2020-05-25)

• social sharing, brand building, picture tag,webp,fixes

v2.6.4 (2020-05-01)

• bugfix

v2.6.3 (2020-04-16)

• fix problem with scroll-behavior, arrow animation

---

This awesome jQuery plugin is developed by Roman-Flossler. For more Advanced Usages, please check the demo page or visit the official website.