This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 1,000,000+ packages pre-installed, including
story-show-gallery with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
SSG nicely combines photos and captions to show a whole story in full screen, minimalist, non-distracting environment (no ugly arrows). SSG can support your brand and marketing. The gallery is vertical - optimized for use on smartphones.
Story Show Gallery versus usual gallery lightbox. Do you want more icons or more from a photo? SSG use whole smartphone display - even notch area and even on iPhone.
Story Show Gallery has very easy setup, it binds onto image hyperlinks on the page automatically. You can control this proccess by CSS classes. Define separate galleries, activate full screen mode, selectively deactivate SSG, etc.
Add ssg.min.css and jQuery in the <head> of the document. Add ssg.min.js before end of </body>. You can link files directly from CDN:
<head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/story-show-gallery@2/dist/ssg.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"> </script> </head> ... <script src="https://cdn.jsdelivr.net/npm/story-show-gallery@2/dist/ssg.min.js"></script> </body>
SSG binds onto image hyperlinks on the page automatically, BigImage1-3 will be in the gallery. You can control this proccess by CSS classes.
<div class='ssg fs'> <a href='BigImage1.jpg'> <img alt='This text will appear under picture as a caption' src='thumbnail.jpg'> </a> <a href='BigImage2.jpg' data-author='photo by Misty'> Also image caption </a> <a href='BigImage3.jpg'></a> <!-- an empty link, no caption --> <a href='BigImage4.jpg' class='nossg'> don't include me into SSG </a> </div>
The ssg class creates a separate gallery, the fs class will activate full screen mode. The BigImage4.jpg will open normally within a browser because of the nossg class. There are more control classes.
export default SSG;
Default SSG configuration and language localization are at the begining of ssg.js file. You can edit source ssg.js file and then minify it. Or copy selected settings into your document to override default configuration. See all possible settings. Place the selected settings after ssg.min.js:
Complete HTML5 example of SSG implementation and configuration:
Part of the configuration are also SSG events, you can use them to run your functions on the gallery start, on an image change, etc.
If you modify source files (src folder), you will probably want to minify the result. Use existing npm script:
npm install // it will install uglify-JS and uglify-CSS which are needed for minifying npm run-script dist // it will minify the source files and put them into the dist directory.
You can use Story Show Gallery freely within open source GNU GPL-3.0 license.
There is one exception from the license: Distributing Story Show Gallery within a Wordpress plugin or theme is only allowed for the author of Story Show Gallery.
If you want to use Story Show Gallery within your commercially distributed SW, the Commercial license is appropriate. With this option, your source code is kept proprietary. Email me at firstname.lastname@example.org for the Commercial license.