3.3.12 - slightly sharpen enlarged gallery images

New setting SSG.cfg.sharpenEnlargedImg. Images can be slightly sharpened when enlarged due to setting SSG.cfg.enlargeImg or due to high resolution display. When scaling in Windows is larger then 100% every image in a browser is enlarged by those scale.

E.g.: windows scaling 150% means that 1000px image is upscaled and rendered on 1500px. And it makes the picture look a bit blurry.

Unfortunatelly sharpening doesn't apply on Mac platform, because the sharpened images looks really ugly on Mac or iPhones.

Much faster loading of deeplinked image

A deeplink into the gallery will run the gallery immediately and it will show the desired photo. Eg. https://roman-flossler.github.io/StoryShowGallery/#element

In this case SSG will stop loading of all images on the underlying page, so the desired photo can load much faster. It has all the bandwidth. When a user exits the gallery, the whole page will load.

Fix possible problem with scroll-behavior, new down arrow

When a webpage has the html tag styled with Scroll-behavior:smooth it totally messes up the gallery scrolling. So after the gallery initialization Scroll-behavior on the html and the body is set to auto and deactivated. After the gallery exit it is restored back.

New down arrow without any text and with the new cool animation.

Configuration and localization

Configuration and language localization were added to the beginning of ssg.js file.

Speed optimization

Speed optimization of Jump scroll animation based on frame by frame analysis from Chrome performance.
Measures taken: Img.decode used for pre-decode images. Loading of the next image and setting pages's hash was postponed after the animation. Animation is much more fluent now.

GA sends image views to log just if the page is scrolled very slowly or not scrolled at all - if a user is really watching.

On tablet devices the gallery is directly switched into fullscreen mode, it solves problems with mobile browsers (height of address bar is changing).

Real full screen in Chrome mobile

Real full screen mode in Chrome mobile. No white bars, a whole screen just for photos.

Full screen reinvented

There was some problems (mainly on Chrome mobile) with turning the gallery into full screen while the gallery was beeing created. So now the gallery is created after the full screen mode was activated (fullscreenchange event).

On smart phones full screen mode works like on YouTube, it activates after rotating a phone from portrait to landscape mode. It is much more smoother experience for a user. On mobile Chrome there is a lot of blinking, when the full screen is activated after a user tap. If a smart phone is already in landscape mode (not usual), then the gallery goes into full screen directly.

Redrawing of the gallery happens on different events for smart phones, desktops and iPhones.

Fixing bugs that occured on Safari iOS

Optimization and UX

Optimized launch and orientation change

Dealing with the multiple resize event in some browsers when the gallery is being switched into full screen mode.
Fixing the problem with orientation change on mobiles. The gallery reliably preserves an actual photo now.

Hint for a user how to browse through the gallery on touch devices

based on a little UX testing. SSG will show the hint if a user doesn't know he can use a jumps scroll to browse the gallery.

Notice "photos look better in landscape mode" was moved after the first photo, because the mobile chrome shows at the top of the screen notice about switching into the full screen mode

Right click protection

Protection of photos from being copied via right click menu. SSG displays the quick help with fullscreen option instead of the context menu.

Fix problem with Opera browser

Gallery from JS array

Newly there are 3 ways how a photo gallery can be created. Automatically from images on the page, by passing an Javascript array of images into SSG, or by combi­nation of both.

Better positioning of final horizontal menu in case that there is no html signpost behind the gallery.

Preventing potential problems with too general CSS styles of underlaying webpage