Nominating Presidential Muppets
    Wondering what’s next for npm?Check out our public roadmap! »

    story-show-gallery

    2.10.9 • Public • Published

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

    Known Vulnerabilities

    SSG nicely combines photos and captions to show a whole story in full ­screen, mini­­mal­ist, non-dis­tracting environ­­ment (no ugly arrows). SSG can support your brand and mar­ket­ing. The gallery is vertical - optimized for use on smart­phones.

    View demo gallery and documentation at github.io
    SSG is also in the form of a Wordpress plugin


    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.

    Google Analytics

    Story Show Gallery has very easy setup, it binds onto image hyper­links on the page auto­mati­cally. You can control this proccess by CSS classes. Define sepa­rate galleries, activate full screen mode, selectively deactivate SSG, etc.


    Not another photo gallery

    • On smartphones, full screen mode works like on You­Tube. It activa­tes after rotating a phone into landscape mode.
    • Brand building (image or text), social sharing icon that can be hardly overlooked
    • Easy browsing without clicking and thinking
    • Goo­gle Analytics support
    • Deeplinking
    • Four visual themes
    • HTML signpost to other galleries
    • No e×it mode for galleries based on bare HTML
    • SSG is probably the only gallery which can place each caption individually according to image size vs. screen size:

    SSG is fully responsive image gallery


    Implementation

    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 hyper­links on the page auto­mati­cally, BigImage1-4 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 data-caption='this caption has priority over link text or alt'> some text </a>
        <a href='BigImage4.jpg'></a> <!-- an empty link, no caption -->
        
    
        <a href='BigImage5.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.

    You can also run the gallery by calling SSG.run method and passing an JS array of images into SSG. Story Show Gallery can also work as a Javascript module. Just add into ssg.js file this line to export SSG object:

    export default SSG;
    

    Configuration

    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:

       <script type="text/javascript" src="ssg.min.js"></script>    
        <script>
            SSG.cfg.fileToLoad = 'signpost.html'; // HTML file to load behind the gallery
            SSG.cfg.watermarkText = '〽️ Misty';  // watermark text overlaying a photo
            SSG.cfg.watermarkFontSize = 18;
        </script>

    Complete HTML5 example of SSG implementation and configuration:

    HTML5 example of SSG implementation

    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.


    Minifying

    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. 

    License

    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.

    Install

    npm i story-show-gallery

    DownloadsWeekly Downloads

    16

    Version

    2.10.9

    License

    GPL-3.0

    Unpacked Size

    321 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar