ꐠ View demo 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.
SSG is vertical and therefore great for use on smartphones. BTW: 63% of global website visits are from smartphones.

Download SSG: GitHub - NPM - Wordpress plugin

Main features

Story Show Gallery is fully responsive and mobile friendly vertical gallery - works on desktops, tablets and mobiles. For every photo size SSG calculates optimal position of a caption:
SSG has Fullscreen lightbox with an unobtrusive vertical slider and cursor. No ugly arrows around the image - it's a minimalist gallery. Great for photographers to present their photos.

On smartphones, full screen mode works like on YouTube. It activates after rotating a phone into landscape mode.
Story Show Gallery supports Google analytics to measure views of each photo. SSG detects and uses GA tracking code on your site.
There are 3 ways how a photo gallery can be created. Automatically from images on the page, by passing an array of images into SSG, or by combination of both.
SSG can display watermark - logo over images. Just link it via CSS.
You can control behaviour of SSG by CSS classes. Define separate galleries, activate full screen mode, selectively deactivate SSG, etc.
Easy browsing through the gallery by scrolling, tapping or keyboard.
Behind the last image Story Show Gallery can load a HTML signpost to other photo galleries. See a sample
Another features is Lazy loading of photos and jump scrolling between them. Animated transition while scrolling is similar to old slide projectors - it is combination of sliding and fading.
You can deep link into the gallery to show a particular photo. Just use image name in the hashtag:
No e×it mode: You can write just minimal HTML code and SSG creates a vertical gallery which works like a separate webpage. Because there is not much to display without SSG, the gallery can run in the no exit mode. See a minimal crash course
Only 0.2% to 0.3% of users ever click on a social sharing button. So there are no social sharing buttons in the gallery. They are almost useless, ugly and occupy screen space.

License

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. You can control it by CSS classes. 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 Flor.cz:


                    <link rel="stylesheet" href="https://ssg.flor.cz/ssg.css">

                    <script src="https://ssg.flor.cz/ssg.js"> </script>

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


                    <script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>

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

Story Show Gallery consists of three files:

ssg.js - all Javascript - jQuery code. At the begining is configuration and language localization.
ssg.css - the gallery styles, includes icons and cursor
ssg-loaded.html (optional) - a html file to load behind the last photo, typically a signpost to other galleries. Edit it to contain your links.

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.

Controling SSG by CSS classes

CSS classes can control gallery behaviour. There are five classes: ssg, nossg, gossg, vipssg and fs. They have to be assigned to a hyperlink tag or to some parrent element of hyperlinks. Following example has structure as images and galleries on this page, it will help you understand how the classes work together.


                        <!--  column 1 -->

                        <p class='fs'>

                         <a class='gossg'> <img  alt="SSG is fully responsive"> </a>

                         <a class='gossg'> <img  alt="SSG source code"> </a>

                        
                        </p> 



                        <!--  column 2 -->

                         <a class='gossg fs'> <img  alt="upper SSG logo"> </a>

                        

                         <div class='ssg fs vipssg'>

                          ... the main gallery with image thumbnails

                         </div>

                        

                         <p class='ssg'>

                          ... the gallery with text hyperlinks

                         </p>

                        

                         <a class='nossg'> SSG logo </a>

Lets begin from the end. The nossg class means, that SSG will ignore the image. After clicking the image will open normally into browser's tab. The nossg class can be also assigned to a parrent element of photo hyperlinks and it will affect all of them:


                <div class='nossg'> ...photo hyperlinks..  </div>

The ssg class creates a separate gallery, assign it to some parent element of many photo hyperlinks. In the gallery will show only images that are inside the tag with ssg class.

The fs class will activate full screen mode. It can be assigned to a single photo hyperlink or a parrent element of many hyperlinks.

The first three images aren't part of any gallery, but they will bind to the gallery (or hyperlinks) with vipssg class, so that they won't display alone.

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. So if I click on the image with SSG source code, it will display first and then will display images from the gallery with vipssg class.

SSG.run() method

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

                
                <body onload='SSG.run()'>

The fs:true parameter will activate full screen mode. Use the fsa parameter instead, if the gallery is initiated without an active click from a user. That active click is needed for entering fullscreen mode. The fsa parameter will ask if a user wants to switch into fullscreen mode.


                <a onclick='SSG.run({fs:true})'> Show gallery</a>

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='SSG.run({noExit:true})'>

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

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


                <button onclick="SSG.run( {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.


                SSG.run( {imgs: [ { href: 'img URL', alt: 'img caption' }, {...} ], imgsPos:'start'} );

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

I couldn't believe my eyes. She just climbed up and hanged on the hook.

Do you like this CSS effect? Fork it on GitHub

I like steampunk style, so this is my dream place for shooting.

All the photos are from Michal coal mine in Ostrava city. This is the engine room.

Inspired by The Fifth Element - cult sci-fi movie with Bruce Willis and Milla Jovovich

Another gallery with text links

Story Show Gallery also supports text hyperlinks. All four following pictures will appear in separate gallery (because of .ssg class):

🐰 Massive pink rabbit man‑eater - a text link to a photo.
Enlightment inside Bankang cave
🔗 A broken link - You will notice it before site visitors do
⇐ an empty (invisible) link to the picture with SSG logo.

Order of photos in the gallery

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 fourth image. Images are shown in the following order - 4,5,6,7 and then it continues with images 1,2,3.
If a picture is part of a separate gallery (.ssg 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.

An example of nossg class

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

Deep linking into Story Show Gallery

SSG can be initiated by a link with photo's name in a hashtag. For example this link https://ssg.flor.cz/#paty-element 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 navigation bar while browsing through the gallery. But it isn't visible in fullscreen mode, so there is a little hack. If you hold an alt key and click on a thumbnail, SSG won’t run into fullscreen and you can copy an image address.

Examples of initiating the gallery by SSG.run() method

⌘ Run the gallery by Javascript calling:


                    SSG.run()

The first photo in this gallery will be the photo with ID 3, because previous photos on this page have gossg class. SSG.run without parameters shows photos from all galleries on the page.

⌘ Run the gallery by Javascript calling:

SSG.run({ initImgID: 0, fs:true })

The first photo will be the photo with ID 0, even if it has gossg class. The initImgID parameter respects .ssg classes and shows only photos from galleries related to initImgID photo. The fs:true activates full screen mode.

⌘ Run the gallery by Javascript calling:

SSG.run( { imgs: [ { href: 'traelanipa.jpg', alt: 'Trælanípa (Slave) Cliff' } ], imgsPos:'start' });

The imgsPos parameter tells the gallery to put Bankang-cave.jpg at the start of the gallery - before images from the page.

⌘ Run the gallery by Javascript calling:


SSG.run( { imgs: iceland, fs:true, initImgID: 1 });

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

Without the imgsPos parameter, in the gallery will be only photos from array iceland. The initImgID works even with arrays.

SSG as a Javascript module

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.