Little Planet Showcase

This document is a part of the <little-planet> project. Learn about it, see more examples and study the docs at the official README.

The goal of this page is to demonstrate most of the functionality available for the Little Planet element. Feel free to study its source code. Note that most examples are interactive and are thus blocking page scrolling; to scroll the page, use the empty area on the sides.

Okoř Castle

This is the default usage, interactive, starting with the planet view. Try clicking/touching the image!

Rooftop view,, Praha

Starting with the panoramic view. Mouse and touch supported, including pinch-to-zoom. Double click/tap to transition back to Planet view.

Sanatorium, Vráž u Písku

Non-interactive image (via the static attribute), square aspect ratio.

Cargo Gallery, Vltava, Praha

Kamínek, Zlatníky-Hodkovice

It is possible to specify any aspect ratio; the resulting field-of-view will respect it. The Fullscreen API can be used to display an element in fullscreen; to do so. This will require you to handle the aspect ratio change, as the element gets stretched accordingly. There is a dedicated page with instructions regarding sizing and resolution.