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' data-author='photo by…'>
    <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' data-author="Custom Author" data-caption="Custom Caption">
    <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.
• ssglight: Light theme.
• ssgdim: Dark theme.
• ssgblack: Black theme.

<section class="ssg fs vipssg ssgblack">

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

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,

  // ask if a user wants to switch into fullscreen mode
  fsa: false,

  // pass options here
  cfg: {}
  
});

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',
  initImgID: 12
});

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. There is an exception for smartphones and tablets
SSG.cfg.neverFullscreen = false;

// When a mobile phone is in portrait mode, start SSG in fullscreen mode. But only if FS is demanded - fs class or fs:true.
SSG.cfg.mobilePortraitFS = false;

// Visual theme of the gallery - four possible values: dim, light, black, dark (default)
SSG.cfg.theme = 'dark'

// unobtrusive cross cursor
SSG.cfg.crossCursor = false;

// URL of the HTML file to load behind the gallery (usually a signpost to other galleries). 
// HTML file has to be loaded over http(s) due to a browser's CORS policy. Set to null if you don't want it.
SSG.cfg.fileToLoad = null;

// display social share icon and menu
SSG.cfg.socialShare = true;

// hide image captions, it doesn't impact global caption or exif
SSG.cfg.hideImgCaptions = false;

// Enlarge image above its original resolution. But only if the image is smaller than two third of screen. It doesn't work on mobiles and tablets.
SSG.cfg.enlargeImg = false; 

// EXIF info (or just the EXIF icon) appears as a part of the caption with link to full EXIF listing
// 4 possible values: 'none' (no exif, default), 'standard', 'trim' (reduced lens info to save space), 'icon'
SSG.cfg.captionExif = 'none';

// 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;

// Caption location depends on a photo size vs. screen size and SSG.cfg.preferedCaptionLocation.
// Negative number => more likely side caption. Positive number => more likely caption below the photo.
// If the number will be too large (eg: 300 or -300 ) a caption will be only in one location.
SSG.cfg.preferedCaptionLocation = 3;

// Side caption for smaller, landscape oriented photos, where is enough space below them as well as on their side.
SSG.cfg.sideCaptionforSmallerLandscapeImg = false;  // false means caption below, true side caption

// an author signature (or some text), which will appear in every caption. The data-author attribute overrides it.
SSG.cfg.globalAuthorCaption = "";

// Show first 3 images of a separate gallery together - e.g. third image clicked - image order will be 3,1,2,4,5,6...
SSG.cfg.showFirst3ImgsTogether = true;

// Locking the scale of mobile viewport at 1. Set it to true if the gallery has scaling problem on your website. 
SSG.cfg.scaleLock1 = false; 

// observe DOM for changes, so SSG will know about image hyperlinks that are added into page after page render
SSG.cfg.observeDOM = false;

// image border width in pixels
SSG.cfg.imgBorderWidthX = 1;
SSG.cfg.imgBorderWidthY = 1;
// image border color in CSS format (eg: #366988 or black)
SSG.cfg.imgBorderColor = "";
// image outline color in CSS format - imgBorderWidthX and imgBorderWidthY should be the same, otherwise outline won't fit
SSG.cfg.imgOutlineColor = "";
// Light effect on image border - it looks good mainly on thicker borders
SSG.cfg.imgBorderLightFx = false;
// radius is in vh unit, but above 33 is in percent of image size, so it is possible to achieve circle/ellipse (50)
SSG.cfg.imgBorderRadius = 0;
// display shadow around the image (border) as it is defined in the theme
SSG.cfg.imgBorderShadow = true;

// Watermark - logo configuration. Enter watermark text or image URL to display it
SSG.cfg.watermarkWidth = 147; // image watermark width in pixels, it is downsized on smaller screens.
SSG.cfg.watermarkImage = '';  // watermark image URL e.g. 'https://www.flor.cz/img/florcz.png'
SSG.cfg.watermarkText = '';  //  watermark text, use <br> tag for word wrap
SSG.cfg.watermarkFontColor = ""; // custom font color, it will deactivate dark text-shadow from theme
SSG.cfg.watermarkFontSize = 20; // font size in pixels, it is downsized on smaller screens.
SSG.cfg.watermarkOffsetX = 1.8; // watermark horizontal offset from left border in percents of photo, for align to right use value near 100
SSG.cfg.watermarkOffsetY = 0.6; // vertical offset from bottom border in percents of photo, for align to top use value near 100 
// Watermark can be also positioned inside image border, use negative values to do so. Negative values are in pixels - as border width
SSG.cfg.watermarkOpacity = 0.42; // opacity

// Here you can translate SSG into other language. Leave tags <> and "" as they are.
SSG.cfg.hint1 = "Browse through Story Show Gallery by:";
SSG.cfg.hint2 = "a mouse wheel <strong>⊚</strong> or arrow keys <strong>↓→↑←</strong>";
SSG.cfg.hint3 = "or <strong>TAP</strong> on the bottom (top) of the screen";
SSG.cfg.hintTouch = "<strong>TAP</strong> on the bottom (top) of the screen<br> or <strong>swipe</strong> to left (right) <br> to browse through Story Show Gallery.";
SSG.cfg.hintFS = 'For a better experience <br><a><abbr>⎚</abbr> go full screen</a>';
SSG.cfg.toTheTop = "Scroll to top";
SSG.cfg.exitLink = "Exit the Gallery";

// share link dialog
SSG.cfg.imageLink = "The link to selected image:";
SSG.cfg.copyButton  = "⎘ Copy the link to clipboard";
SSG.cfg.linkPaste = "…and you can paste it anywhere via ctrl+v";

// 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:

v3.1.9 (2022-07-30)

• observer optimalization

---

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