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

Responsive Fullscreen Photo Gallery - jQuery Story-Show-Gallery

File Size:	122 KB
Views Total:	17187
Last Update:	12/10/2021 00:06: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' 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;

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

// 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.onImgLoad = null; // fires when an image is completely loaded from a server.
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:

v3.0.1 (2021-12-10)

Story Show Gallery for React, DOM observer

v2.11.4 (2021-11-04)

unobtrusive cross cursor option

v2.11.3 (2021-09-30)

onImgLoad event, gallery id, bugfixes

v2.11.1 (2021-08-27)

EXIF styling, EXIF icon option

v2.11.0 (2021-08-24)

viewing EXIF info, refactoring

v2.10.12 (2021-07-07)

bugfix for older versions of jQuery

v2.10.11 (2021-07-06)

Wordpress functionality, minor updates

v2.10.10 (2021-05-25)

bugfix

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)

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