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

Responsive Fullscreen Photo Gallery - jQuery Story-Show-Gallery

File Size:	91.9 KB
Views Total:	13088
Last Update:	01/15/2021 00:10:00 UTC
Publish Date:	09/04/2018 02:54:06 UTC
Official Website:	Go to website
License:	MIT

Demo Download

How to start using jQuery?

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

// 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
SSG.cfg.onGalleryStart = null; // fires after creating a gallery
SSG.cfg.onImgChange = null; // fires on every image change (even the first one)
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.5 (2021-01-15)

update

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)

fixed for Android

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.

Responsive Fullscreen Photo Gallery - jQuery Story-Show-Gallery

How to use it:

Changelog:

Related jQuery Plugins

You Might Also Like

Add Your Review