Story Show Gallery Enter the gallery

Story Show Gallery

jQuery vertical gallery created by Roman Flössler

Story Show Gallery nicely combines photos and captions to show a whole story in fullscreen, minimalist, non-distracting environment. You can browse through the gallery just by scrolling, touching or via vertical slider or keyboard.

View demo gallery

Download Story Show Gallery from GitHub or NPM
SSG is also in the form of a Wordpress plugin

Main features


You can use SSG freely within Mozilla Public License 2.0.
There is one exception from license: Distributing Story Show Gallery within a Wordpress plugin or theme is only allowed for the author of Story Show Gallery.

SSG is easy to implement

Story Show Gallery is easy to implement on your website, it binds onto images automatically. Download SSG files and add these two lines somewhere before the </body> tag:

<link rel="stylesheet" href="path/to/ssg.css" >
<script src="path/to/ssg.js"> </script>

For a quick try of SSG on your website you can link SSG files from

<link rel="stylesheet" href="">
<script src=""> </script>

SSG requires jQuery library at least in version 1.5. Place jQuery code inside the <head> section (Wordpress already includes jQuery):

<script src=""> </script>

Sample HTML5 gallery code and re-styling Story Show Gallery:

Sample HTML5 code and adding logo via CSS styles

Story Show Gallery consists of three files:

How Story Show Gallery works

Story Show Gallery looks for all hyperlinks (<a> tags) on the page that points to a picture file (extensions: jpg, jpeg, JPG, png, PNG, gif, GIF). And adds to all these hyperlinks an onclick function which runs the gallery. Unless nossg class is used.
Or you can pass an array of images and captions into SSG and it can be combined with images from the page.

A caption next to a photo is taken from a thumbnail's alt attribute or a link text. SSG will create the gallery from all these three images (BigImage1~3):

<a href='BigImage1.jpg'> <img alt='text caption' src='thumb.jpg'> </a>
<a href='BigImage2.jpg'> Another text caption </a>
<a href='BigImage3.jpg'></a> (an empty link, no caption)

Story Show Gallery activates after a user clicks on some hyperlink from the above example.

Fullscreen mode

Fullscreen mode can be activated three ways.

Adding the "gallery" or "wp-block-gallery" class to the wrapper tag of <a> tags. These two classes use the Wordpress built-in gallery. All images inside the gallery activate fullscreen mode:

<div class='gallery'>
<a href='big-image.jpg'> <img src='thumbnail.jpg'></a>
<a href='big-image2.jpg'> <img src='thumbnail2.jpg'></a>

Adding the fs class to <a> tag. This single image activates fullscreen mode:

<a class='fs' href='big-image.jpg'> <img src='thumbnail.jpg'></a>

Running the gallery by calling the method with the fs:true or fsa:true parameter.

<a onclick='{fs:true})'> Show gallery</a>

The fsa parameter is good to use when the gallery is initiate without an active click from a user. But that click is needed for entering fullscreen mode. So the gallery will ask if a user wants to switch into fullscreen mode.

The nossg and gossg class

You can selectively deactivate SSG by asigning nossg class to some photo or entire gallery. After clicking on a thumbnail Story Show Gallery won't run.

<div class='gallery nossg'> OR
<a href='bigimg.jpg' class='nossg' > <img src='thumbnail.jpg'></a>

An image with the gossg class can be only an initial image of the gallery if a user clicks on it. Otherwise images with gossg class won't show in the gallery. On this page gossg class has image with source code and responsive modes.

<a href='bigimg.jpg' class='gossg fs' > <img src='thumbnail.jpg'></a> method

You can run the gallery by Javascript calling method. Example: the body's onload event runs the gallery immediately after a page is loaded:

<body onload=''>

Use initImgId parameter to set the initial image in the gallery. SSG auto­mati­cally numbers photos on the page, the first photo has ID 0.

<button onclick=" {initImgID: 6} )"> Click me </button>

You can pass into SSG an array of images and captions to show them in the gallery via imgs parameter. If you also add imgsPos parameter, images can be combined with photos from the page. The imgsPos:'start' places imgs before photos from the page, imgsPos:'end' after them. The imgsPos:'whole' shows in the gallery just imgs. It is a default parameter, which is no need to use. If you don't define imgs parameter, imgsPos will be ignored. {imgs: [ { href: 'img URL', alt: 'img caption' }, {...} ], imgsPos:'start'} );

Run SSG immediately after page loads is useful, when the html page is just a plain list of links without any design. There is nothing much to see without SSG. So the gallery can run in the no e×it mode - no close icon, no ESC key.

<body onload='{noExit:true})'>

See a crash course - the most minimal way how to use Story Show Gallery:

SSG controls: a mouse wheel or arrow keys ↓→↑←
or TAP on the bottom (upper) part of the screen

Chain cloakroom for miners - a text link to a photo.
A broken link - You will notice it before site visitors do
an empty (invisible) link to the picture with SSG logo.
All three target pictures will appear in the gallery.

Bankang cave - a link with nossg class won't activate Story Show Gallery and a photo will open normally into a new tab.

The image a user clicked on is shown first, then Story Show Gallery displays following images and then the rest. Example: A user clicked on the sixth image. Images are shown in the following order - 6,7,8,9 and then it continues with images 1,2,3,4,5.
If a picture is part of a gallery (gallery class) and a user click up to third picture of the gallery, SSG prefers to show initial pictures of a gallery together: 3,1,2,4,5,6,7,8,9.

Deep linking into Story Show Gallery

SSG can be initiated by a link with photo's name in a hashtag. For example this link will activate Story Show Gallery and show the photo named paty-element. It is enough to have in the hashtag crucial part of the name - #element.

An address of each photo is shown in a browser’s navi­gation bar while browsing through the gallery. But it isn't visible in full­screen mode, so there is a little hack. If you hold an alt key and click on a thumb­nail, SSG won’t run into full­screen and you can copy an image address.

Examples of initiating the gallery by method

Run the gallery by Javascript calling
The first photo in this gallery will have ID 3, because previous photos on this page have gossg class.

Run the gallery by calling{ fs:true, initImgID: 0 })
The first photo will have ID 0.

Run the gallery by calling { imgs: [ { href: 'bankang-cave.jpg', alt: 'Bankang cave' } ], imgsPos:'start' });

iceland = []; iceland[ 0 ] = { href: 'img/reynisdrangar-black-beach.jpg', alt: 'Black beach Reynisfjara, Reynisdrangar rocks' }; iceland[ 1 ] = { href: 'img/Seljalandsfoss.jpg', alt: 'Aurora behind Seljalandsfoss waterfall' }; iceland[ 2 ] = { href: 'img/iceland-horses.jpg', alt: 'Icelandic horses' };

Run the gallery by calling { imgs: iceland, fs:true });

You can use Story Show Gallery also as a Javascript module. Just add into ssg.js file this line to export SSG object:

export default SSG;

Vertical scrolling through the gallery

There are two options. Classic vertical scrolling with scrollbar or finger. And then jump scroll. A mouse wheel and arrow keys have an altered function, they scroll from one image to next image.

Move to the next image:
mouse wheel, down arrow key, right arrow, PgDn key or spacebar.
Move to the previous image:
mouse wheel, press up arrow key, left arrow, or PgUP key.

For touch screens there are two invisible areas: the top and bottom half of the screen. After tapping somewhere into the bottom (top) half, SSG jump scroll to the next (previous) image.

Support Story Show Gallery

Any size donation is greatly appreciated. It will help me to continue developing Story Show Gallery.