jQuery Plugins › jQuery Gallery Plugins › jQuery Story-Show-Gallery

Responsive Fullscreen Photo Gallery - jQuery Story-Show-Gallery

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

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2021

Chrome, IE9+, FireFox, Opera, Safari#photo gallery#gallery lightbox

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'

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

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

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

// An author signature (or some text), which will appear in every caption
// The data-author attribute overrides it
SSG.cfg.globalAuthorCaption = ['','author: RF'];

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

// 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.watermarkFontSize = 20; // font size in pixels  
SSG.cfg.watermarkOffsetX = 1.8; // watermark horizontal offset from left in percents of photo
SSG.cfg.watermarkOffsetY = 1.2; // watermark vertical offset from bottom in percents of photo
SSG.cfg.watermarkOpacity = 0.36; // 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> to browse through Story Show Gallery.";
SSG.cfg.hintFS = "For a better experience <br><a>click for fullscreen mode</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';

// SSG events - see complete example of SSG events in the example directory
// parameter: data
// data objects:
// data.imgCount // count of images in the gallery
// data.imgGalleryId // ID of current Image in the gallery
// data.imgPageId // ID of current image on the page
// data.GalleryId // ID of a gallery which belongs to initial image
// data.imgPath // whole path to current image
// data.imgName  // image name of current image (no extension)
// data.imageCaption // image caption for current image
SG.cfg.onGalleryStart = null; // fires on the gallery start before loading and displaying of the first image.
SSG.cfg.onImgScrollsIn = null; // fires when the next/previous/first image starts scrolling in to display (doesn't apply on manual scrolling)
SSG.cfg.onImgView = null; // fires when an image is viewed
SSG.cfg.onOrientationChange = null; // fires when a device orientation changes
SSG.cfg.onBeyondGallery = null; // fires when a user gets beyond the gallery - usually on a signpost
SSG.cfg.onGalleryExit = null;  // fires on the gallery exit

Changelog:

v2.10.9 (2021-05-05)

  • bugfix for mobile landscape mode, cursor

v2.10.8 (2021-04-29)

  • two new gallery events, light visual tuning

v2.10.7 (2021-04-06)

  • new fluent fade-in animation on start up

v2.10.6 (2021-03-22)

  • globalAuthorCaption, data-caption, bugfixes

v2.10.5 (2021-01-15)

v2.10.4 (2021-01-07)

  • hint arrow in portrait mode

v2.10.3 (2021-01-04)

  • mobile portrait FS, live config, bug fix

v2.10.2 (2020-11-18)

  • minor bug fixes, theme contrast, index update

v2.10.0 (2020-10-23)

  • light theme tuning
  • new complete example

v2.10.0 (2020-10-21)

  • Added four visual themes
  • Bug fixes

v2.9.6 (2020-09-25)

  • reworked faster loading of deeplinked img

v2.9.5 (2020-09-24)

  • optimization

v2.9.4 (2020-09-12)

  • optimization

v2.9.3 (2020-08-31)

  • new social icons, SSG.restart, signpost, bugfix

v2.9.2 (2020-07-30)

v2.9.1 (2020-07-17)

  • minor fix for apple

v2.9.0 (2020-06-26)

  • SSG events, author caption, bug fixes

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.