Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including story-show-gallery with all npm packages installed. Try it out:

var storyShowGallery = require("story-show-gallery")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

story-show-gallery v2.4.0

Fully responsive, jQuery photo gallery with vertical jump scroll. SSG optimally combines images and captions to show a whole story in fullscreen, non-distracting environment.

Story Show Gallery - minimalist, vertical photo gallery, mobile friendly

Show a story with your photos in fullscreen lightbox without distracting elements. Story Show Gallery is verticall and a site visitor just need to scroll (or touch) to view image by image with optimally placed captions. The goal of Story Show Gallery is making the best possible experience when viewing photos.

View demo gallery and documentation at ssg.Flor.cz.
SSG is also in the form of a Wordpress plugin.

Main features

  • Story Show Gallery is fully responsive - works on a desktop, tablets and smartphones. SSG compares image size vs. screen size and place a caption to an optimal position: SSG is fully responsive image gallery

  • Fullscreen mode with an unobtrusive scrollbar and cursor. Even dark photos are well visible. On smartphones, full screen mode works like on YouTube, it activates after rotating a phone into landscape mode

  • Story Show Gallery supports Google analytics. When a user views an image it is counted as a virtual pageview.
    Google Analytics

  • 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.

  • 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 how to use SSG.

  • Story Show Gallery can display watermark - logo over images.
    watermark - logo

  • Jump scroll automatically scrolls from image to image. Images are being gradually lazy loaded as a user scrolls down.

  • Every image has its own address, so you can link into the gallery to show a particular photo.
    watermark - logo

  • Story Show Gallery can load a signpost to other galleries behind the last photo. See the sample.

  • Animated transition between images combines sliding and fading. The visual effect is similar to old slide projectors.

  • Protection of photos from being copied via right click menu.

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.

Support Story Show Gallery

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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free