Photo Sphere Viewer

# ResolutionPlugin

NPM version NPM Downloads jsDelivr Hits
API Documentation

Adds a button to choose between multiple resolutions of the panorama. Requires the Settings plugin.

This plugin is available in the @photo-sphere-viewer/resolution-plugin (opens new window) package.

WARNING

ResolutionPlugin is not compatible with GalleryPlugin.

# Usage

Once enabled the plugin will add a new setting the user can use to change the resolution of the panorama.

const viewer = new PhotoSphereViewer.Viewer({
    plugins: [
        PhotoSphereViewer.SettingsPlugin,
        [PhotoSphereViewer.ResolutionPlugin, {
            defaultResolution: 'SD',
            resolutions: [
                {
                    id: 'SD',
                    label: 'Small',
                    panorama: 'sphere_small.jpg',
                },
                {
                    id: 'HD',
                    label: 'Normal',
                    panorama: 'sphere.jpg',
                },
            ],
        }],
    ],
});

# Example

The following example provides two resolutions for the panorama, "small" is loaded by default.

# Configuration

# resolutions

  • type: object[]
  • updatable: no, use setResolutions() method

List of available resolutions. Each resolution consists of an object with the properties id, label and panorama.

# defaultResolution

  • type: string
  • updatable: no

The id of the default resolution to load. If not provided the first resolution will be used.

WARNING

If a panorama is initially configured on the viewer, this setting is ignored.

# showBadge

  • type: boolean
  • default: true
  • updatable: no

Show the resolution id as a badge on the settings button.

# lang

  • type: object
  • default:
lang: {
    resolution: 'Quality',
}

Note: this option is not part of the plugin but is merged with the main lang object.

# Methods

# setResolutions(resolutions, defaultResolution?)

Changes the available resolutions.

# Events

# resolution-changed(id)

Triggered when the resolution is changed.

resolutionPlugin.addEventListener('resolution-changed', ({ resolutionId }) => {
    console.log(`Current resolution: ${resolutionId}`);
});

← SettingsPlugin →