Story Show Gallery

Theme: Dim Dark Black Light

Switch on fancy borders:

↑ Optional 3D animation of image thumbnails is part of this plugin.

SSG lightbox works with existing WordPress galleries (and images) or optionally with galleries made with other plugins. Story Show Gallery is Gutenberg ready and works out of the box.

Your photos in the main role

Give your photos maximum space with SSG full screen lightbox, it works on every display size. The gallery doesn’t have any ugly shining arrows next to a photo, which ruin visual experience.

On smartphones, full screen mode works like on YouTube. It activates after rotating a phone into landscape mode. Also is possible to start the gallery in full screen portrait or forced landscape mode.

Story Show Gallery can use whole smartphone display (unlike others galleries) - even notch area and even on iPhone.

There is no icon for full screen mode, according to statistics users simply don’t use it. So it’s up to you, if the gallery will go into full screen.

Browsing without clicking and thinking

Scrolling is the most natural interaction with a webpage. Story Show Gallery works like Facebook - as a user scrolls down new pictures are constantly loading.

Story Show Gallery is vertical and therefore great for use with smartphones. In portrait mode a user usually sees a part of the next photo, so he keeps scroll­ing to see it whole.

Brand building and social sharing

SSG can display your logo or some text (emoji) over images. You can configure it in the SSG settings.

Social sharing icon is not put aside, it is part of a content, but subtle. A spectator’s eyes will literally crash into the share icon at the end of a caption or in the corner of a photo. It can be disabled in the settings.

SSG supports deep linking into the gallery to show a part­icular pict­ure.  Just use image name in the hashtag:  🐑 https://FaroeIslands.io#klaksvik

Complete your photos with captions

With captions you can tell the whole story behind pictures or amuse a spec­tator with some fun fact. Captions can also contain EXIF data (camera info, exposure, iso, etc.) with link to EXIF listing.

Google treats captions as a text content. Especially when you haven’t much text on your page, captions will help a lot your page to rank higher in Google search.

SSG is probably the only gallery which can place each caption individually according to image size vs. screen size. It is really important on smartphones.

Some more features

• Support of  Google analytics. Find out, how long site visitors view each photo and how many times.
• Animated transition while scrolling is similar to old slide projectors – it is combi­nation of sliding and fading.
• Protection of photos from being copied via right click menu.
• The gallery has administration panel with six sections. It is already set up for standard functioning.

Gutenberg is the new block editor which came with WordPress 5 and it has also new gallery. Story Show Gallery is compatibile with Gutenberg.

Theme: Dim Dark Black Light

You can control each gallery or image individually by CSS classes. Thera are 8 control classes, four of them are for visual themes.

With nossg class you can selectively deactivate Story Show Gallery for some image or whole gallery. After click on the image below SSG won’t activate and the image will open normally into a new tab of a browser.

Warning: When you want to enter class for individual image, you have to enter it into image link settings. It is not class for the image itself, but for its link:

The fs class opens image into full screen. Images inside a galleries open into full screen by default, but you can change it in the SSG settings.

Visual theme classes

SSG offers four visual themes and each one has its own class:
light theme ⇒ class: ssglight, dim theme ⇒ class: ssgdim, dark theme ⇒ class: ssgdark and black theme ⇒ class: ssgblack.

With theme classes you can set a visual theme individually for each gallery or image. In the SSG configuration you can set the global visual theme. Dark theme is default.

Gossg class and separate galleries

An image with gossg class will show in the gallery lightbox only if a user clicks on it. If a user activates Story Show Gallery through another image, images with gossg class won’t be in the gallery lightbox.

By default, SSG lightbox shows all images from a post (from top to bottom), unless you limit it by classes. So if you click on the image above with display sizes or SSG logo, 1 + 3 images will show in the gallery lightbox.

If you click on some thumbnail of the gallery below, only three images will show in the gallery lightbox. This happens because of the gossg class assigned to both single images.

• 

• 

• 

This three image gallery has the ssglight class for light theme.

And finally there is the ssg class. If you set this class to some gallery, it will be separated from individual images and other galleries. SSG class creates isolated gallery, only photos from that gallery will show in the lightbox.

If you set Separate galleries option in the settings, all galleries become separated.

Story Show Gallery supports Google Analytics – every viewed image is logged into your Google Analytics account. So you can see statistics for all images viewed via Story Show Gallery – how many times each photo was seen and for how long:

Photo called its-time.jpg was viewed 106 times, and visitors look at this photo for average time of four seconds. Unique pageviews means that photo was viewed within 48 unique visits, so in the each visit it was viewed in average twice a time.

If you already have GA tracking code on your website, SSG already counts image views into your statistics.

Setting up Google Analytics

1. Set up account at https://analytics.google.com/analytics/web/. You will get an unique ID for your website. There are a lot of tutorials on YouTube about Google Analytics.
2. Install the WordPress plugin, which adds Google Analytics on your website. I can  recommend this one – https://wordpress.org/plugins/ga-google-analytics/
3.  Enter the your GA tracking ID into the plugin settings and set the tracking method to Universal Analytics / analytics.js
4. After few hours you will see first numbers – detailed statistics for your whole website (not only photos).

It’s important to give each photo some meaningful name, before you upload it into WordPress. Because you will see that name in the statistics.

SSG Wordpress plugin is based on SSG javascript library, which can be used on every website. It is very easy to implement, you just need to add three lines of code. Story Show Gallery is also in the form of the React component.

Find out more about Story Show Gallery - Javascript.