Story Show Gallery for WordPress nicely combines photos and captions to show a whole story in full screen, non-distracting environment. SSG is vertical and therefore great for use on smart-phones. View demo gallery:
Story Show Gallery is fully responsive vertical lightbox – works on a desktop, tablets and smartphones. For every image SSG calculates optimal position of a text caption to utilize a whole screen:
Fullscreen mode with an unobtrusive scrollbar and cursor. Even dark photos are well visible.
Ready to go out of the box. SSG works with existing WordPress galleries and individual images. Optionally even with galleries made with other plugins. SSG uses standard WordPress gallery, so working with photos stays the same.
3D animation of image thumbnails.
Story Show Gallery supports Google analytics. Find out, how long site visitors view each photo and how many times.
Every image has its own adress, so you can link into the gallery to show a particular photo.
Browsing through the gallery by scrolling, tapping or keyboard.
Protection of photos from being copied via right click menu.
Firstly, let me write few important things about WordPress image captions. When you look into the gallery settings, there are four fields for each image, where you can enter some image’s description:
Story Show Gallery displays as an image caption only Alt text for a very good reason:
An alt text is required by HTML standard. Google considers the alt text as a part of page’s content, it helps the page to rank higher in Google search. Other fields are matter of WordPress. Title and Description are shown on a separate Attachment page, so they don’t help page in Google search. Caption is great for a single image, below the small gallery’s thumbnail isn’t enough space for a caption.
But isn’t the alt text field too short?
Yes, it is. That is why I use Quick Alt Editorplugin. It has much longer alt text field and you can easily edit the alt text at multiple images. But it works only within the Media Library:
To have as much space as possible it is necessary to deactivate all columns in the Media Library except the alternative text column. To deactivate them click on the Screen options at the top of Media Library.
My workflow of adding photos into the gallery is following:
I upload all photos into the Media Library
I enter the alt text for all photos
And finally I add the photos into the gallery in some post
You can selectively deactivate Story Show Gallery by the nossg class. After click on the image below SSG won’t activate and the full image will open normally into a new tab of a browser.
You can enter nossg and other classes into a Gallery and Image settings:
An image with gossg class will show in the gallery 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. The fs class opens image into full screen. Images inside a gallery opens into full screen by default, but you can change it in the SSG settings.
The gallery below has no classes, it is here just for complete showcase:
If you click on the image with classes settings, four images will show in the full screen gallery. If you click on some thumbnail above, only three images will show in the full screen gallery. This happens because of the gossg class assigned to the single image.
Every image in Story Show Gallery has its own URL adress in following format: www.myblog.com/postname/#photoname. So you can use it to link directly into your gallery to show the photo.
As you are browsing through the gallery, the #photoname is constantly changing according to currently viewed photo. And the whole address is shown in the browser’s navigation bar, but the bar isn’t visible in the full-screen mode.
So there is a little hack. If you will hold alt key and click on a thumbnail the SSG won’t run into full-screen. And you can copy image address in browser’s navigation bar:
There is one exception, it doesn’t work in Opera browser due to some conflict with CSS image cursor.
If you click on it, Story Show Gallery will open and show the linked photo. SSG will also offer a full-screen mode for better experience. It can’t be activated without a click of a site visitior.
If the #photoname is too long, you can use just a crucial part of it. For example: #bats-in-bankang-cave.jpg can be shortened just to #bankang, #bats or #cave. Story Show Gallery displays the first photo which name contains bankang, bats or cave. SSG search for the photo just within one page which address is in the link.
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.