By Rizon September 1, 2020

jQuery Responsive Full screen Image Gallery – Story Show Gallery Plugin

jQuery Responsive Full screen Image Gallery, Story Show Gallery Plugin (SSG) is supposed to support your brand and marketing. It combines photos and captions very well to show the entire story in full screen and non-diverting environment. The gallery is upright and optimized for smartphones use.

Story Show Gallery has very easy setup as it fixes onto image hyperlinks on the page automatically. This process can be controlled by CSS classes. It describes separate galleries, activate full screen mode, and side by side deactivate SSG, etc.

How to use it:

1: 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>

2. SSG fixes onto image hyperlinks on the page repeatedly, BigImage1-3 will be in the gallery. Process can be controlled 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>

Configuration

Default SSG configuration and language localization are at the start of ssg.js file. You can edit source ssg.js file and then minify it. You can also copy selected settings into your document to overrule default configuration. See all the possible settings and place the carefully chosen settings after ssg.min.js:

25+ Really Useful Tools For CSS Developers

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;

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.

Minifying

If you modify source files (src folder), you may want to minify the result. Use existing npm script:

Best PHP Frameworks for Agile Application Development

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 jQuery Responsive Fullscreen Image Gallery, Story Show Gallery without restrictions inside open source GNU GPL-3.0 license.

There is one exclusion from the license. Distributing Story Show Gallery within a WordPress plugin or theme is only allowable for the author of Story Show Gallery.

10 Brilliant Scrolling Effects Examples with JQuery

source

download