Vertical photo gallery optimized for smartphones (notch area included). SSG will support your brand and marketing. Optimally placed captions, full screen lightbox, no ugly arrows
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.
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 language localization were added to the beginning of ssg.js file.
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 mode in Chrome mobile. No white bars, a whole screen just for photos.
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
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.
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
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
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 combination 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
Minding the notch on mobiles - to prevent the notch intervene into a caption, SSG swaps caption and photo if necessary. So photo is always next to notch regardless how a user holds his phone.
Better positioning of caption and photo.