Stacks4Stacks

Dozens of Javascript plugins exist that can do panoramic image viewers. But many of these run on hugely complicated code bases that easily "glitch-out" and break in RapidWeaver. And a lot of these panoramic image viewers are not mobile compatible or have appalling usability standards (like stealing mouse focus or replacing images with canvases), often without any adequate fallbacks as a safety net. Some only accept images in formats that are difficult for the average RapidWeaver user to create. They are just not conducive to the high quality websites we want to create!

Panorama is different. This stack is pure HTML and CSS. It weighs less than 1 KB! Yet it offers a friendly panoramic image viewer that everybody can access. No nasty surprises. Panorama uses some ground breaking CSS code like scroll snapping (to safely enhance the scrolling) and clamp sizing (to fine-tune the responsiveness). The end result is a near indestructible panoramic image viewer made to stand the test of time.

Examples

The first example demonstrates how Panorama can be used to display a long photograph. The second example displays several normal images that can be scrolled horizontally and use some 'scroll snapping'.

Whenever using Panorama, it would be a good idea to include a label below the stack, informing users that they can scroll the photographs. Some web browsers and operating systems don't display scrollbars.

Setup

Install Panorama within Stacks and RapidWeaver in the normal way. Like other stacks, open your Stacks library. Drag a copy of Panorama into your page. Click the blue button to add images to your Panorama stack. You can either add images as RapidWeaver resources and link to them, or link to images you already have published online. Settings exist for the main Panorama stack and the images you add.

Scroll Snapping

This can be a great option to use for Panorama stacks that contain multiple images. Scroll snapping works in all newer web browsers, and is ignored by older browsers that don't support it. The purpose of scroll snapping is to give scrolling more of a "magnetic" feel. The second example above has scroll snapping set to 'start' for the first image, 'centre' for the other images, and 'end' for the last image. You can set scroll snapping alignment on an image-by-image basis. A subtlety smart feature that gives your Panorama stacks more of an "app-like" feel.

 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.