jQuery Full Screen Story Image Gallery

Category: | October 12, 2019
Author: Roman-Flossler
Official Page: Go to Website
Last Update: October 12, 2019
License: MIT
jQuery Full Screen Story Image Gallery

Here is a jQuery mobile-friendly fullscreen image gallery which allows you to show a story with your photos. It is a minimalist and vertical photo gallery.

Basically its a full of feature plugins which make your work fast and allow you to step up a gallery within few mints. You can easily showcase images in different formats.

The story show gallery allows developers to add the images in the different layouts such as two columns, three columns or full width without distracting elements.

When a user clicks on an image, it will open a fullscreen lightbox and allow the site visitor to vertical scroll to view image by image.

Furthermore, the gallery also has an option to place caption in different positions which show with each image in lightbox mode.

In addition, it allows you to browse the gallery by just scrolling, touching or via the vertical slider. It also supports the keyboard keys to see the next or previous image by using the keyword arrow up and down.

The purpose of this SSG (Story Show Gallery) is to offer the best possible photos of the viewing experience.

How to Create Full-Screen Story Image Gallery

The implement of this gallery on any kind of project is quite simple and easy. All you require to add its Javascript and CSS files into your HTML document.

Let’s first add the stylesheet files before closing the head tag.

<!-- Gallery CSS -->
<link rel='stylesheet' href='css/sample-gallery.css' media='all' />
<link rel="stylesheet" href="css/ssg.css" media="all">

After that, you need to add the jQuery and Javascript files to your webpage. If you want to load your site faster then include these scripts just before the closing body tag.

For dynamic sites such as WordPress or other CMS sites, you can add them in the footer.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 
<!-- SSG JS -->
<script type="text/javascript" src="js/ssg.js"></script>

After loading the scripts your fullscreen image gallery will automatically activate and now you can write the HTML code to make it work.

Any developer really wants the plugin markup should be simple and easy to customize so its good to know that, this SSG full-screen gallery comes with clean markup.

All you need to define a section with a class name gallery then define the images within the href link tag.

<section class="gallery">
    <a href='path/to/actual-image.jpg'>
        <img src="path/to/thumbnail.jpg" alt="It's time! For a photo shoot of course." />
    </a>
    <a href='path/to/actual-image.jpg'>
        <img src="path/to/thumbnail.jpg" alt="I couldn't believe my eyes." />
    </a>                <a href='path/to/actual-image.jpg'>
        <img src="path/to/thumbnail.jpg" alt="Add your own caption" />
    </a>                <a href='path/to/actual-image.jpg'>
        <img src="path/to/thumbnail.jpg" alt="Its a nice gallery with clean layout" />
    </a>                <a href='path/to/actual-image.jpg'>
        <img src="path/to/thumbnail.jpg" alt="What do you think about this gallery" />
    </a>                <a href='path/to/actual-image.jpg'>
        <img src="path/to/thumbnail.jpg" alt="lets build a simple and unique gallery for your website" />
    </a>
    <br clear='all'/>
</section>

That’s It. Your gallery is ready, Just change the images with your own and you are done.

Main features

  • Its a fully responsive gallery that works well on desktop, tablets, and smartphones.
  • The SSG check the image and screen size and place the caption to an optimal position.
  • The fullscreen mode works with an unobtrusive scrollbar and cursor. Additionally, the dark photos also visible well.
  • On small devices such as mobile, the full-screen mode work like Youtube. This feature activates after rotating the smartphone into landscape mode.
  • You can create a gallery using any of the three ways provided by the plugin. Automatically from images on the page, bypassing an array of images into SSG, or by the combination of both.
  • You can also display a logo and watermark over the images.

You May Also Like