Enter the gallery

Story Show Gallery

Javascript gallery created by Roman Flössler

Show a story with your photos! SSG is designed for that. A site visitor only needs to scroll down and he sees image by image in non-distracting environment. You can also tell a story by optimally placed text captions.

⌘ Try sample Story Show Gallery

Download Story Show Gallery from GitHub

Main features

SSG is fully responsive - works on a desktop, tablets and smartphones. For every image size SSG calculates optimal position of a text caption:

Fullscreen mode with an unobtrusive scrollbar and cursor. Even dark photos are well visible.
Story Show Gallery supports Google analytics. When a user views an image it is counted as a virtual pageview.
No e×it mode: You can write just a minimal HTML code and SSG creates a 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
SSG can display watermark - logo over images. Just add it via CSS styles.
Jump scroll automatically scrolls from image to image. As a user scrolls down images are being gradually lazy loaded.
You can link inside the gallery to show a particular photo.
Story Show Gallery can load a HTML signpost to other galleries behind the last photo. See a sample

License

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

SSG is easy to implement

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


                    <link rel="stylesheet" href="ssg.css" >

                    <script src="ssg.js"> </script>

For a quick try of SSG on your website you can link SSG files from Flor.cz:


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

                    <script src="http://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.3.1.min.js"> </script>

Sample HTML5 code and re-styling Story Show Gallery:

Story Show Gallery consists of three files:

ssg.js - the gallery code
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 an image file (extensions: jpg, jpeg, JPG, png, PNG, gif, GIF). And adds to all these hyperlinks an onclick function which runs the gallery.

Story Show Gallery excellently cooperates with the Wordpress built-in gallery. Wordpress creates image thumbnails with hyperlinks, and SGG will assemble them into a fullscreen image presentation.

The text caption below images is taken from a thumbnail's alt attribute or a link text. SSG will create the gallery from all theese 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. But you can also run the gallery by calling SSG.run method.
Example: the body's onload event runs the gallery immediately after a page is loaded:

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

Use arguments to show any image before the rest of images:


                <body onload="SSG.run({img: {href: 'url', alt: 'some text' }})">

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:

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

Running the gallery by calling the SSG.run method with the fs:true parameter.


                <a onclick='SSG.run({fs:true})'> Show gallery</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>

See SSG Sample:

Click a thumbnail & browse through the gallery by:
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

Chain cloakroom for miners - a text link to an image.
A broken link - You will notice it before site visitors do
⇐ an empty (invisible) link to the image with SSG logo.
All three target images will appear 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 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 user click up to third image, SSG prefers to show initial images together: 3,1,2,4,5,6,7,8,9.

Other ways to initiate Story Show Gallery

⌘ Run the gallery by calling SSG.run()

⌘ Run the gallery by calling
SSG.run({fs:true, img: { href: 'url', alt: 'some text' }})

You can link right inside the gallery to show a particular photo. Just add a hashtag with photo's name after url. For example this link http://ssg.flor.cz/#element shows the photo paty-element.jpg. It is enough to have in the hashtag crucial part of the name.

Browse through the gallery ~ jump scroll

There are two options. Classic scrolling with a scrollbar or fingers. 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.