GalleryPlugin Styles

Adds a gallery on the bottom of the viewer to navigate between multiple panoramas.

This plugin is available in the @photo-sphere-viewer/gallery-plugin package.

WARNING

GalleryPlugin is not compatible with ResolutionPlugin.

Usage

The plugin has a list of items, each configuring the corresponding panorama, a name and a thumbnail.

import { GalleryPlugin } from '@photo-sphere-viewer/gallery-plugin';

const viewer = new Viewer({
    plugins: [
        GalleryPlugin.withConfig({
            items: [
                {
                    id: 'pano-1',
                    name: 'Panorama 1',
                    panorama: 'path/to/pano-1.jpg',
                    thumbnail: 'path/to/pano-1-thumb.jpg',
                },
                {
                    id: 'pano-2',
                    name: 'Panorama 2',
                    panorama: 'path/to/pano-2.jpg',
                    thumbnail: 'path/to/pano-2-thumb.jpg',
                },
            ],
        }),
    ],
});

Example

Configuration

items

• type: GalleryItem[]
• updatable: no, use setItems() method

The list of items, see below.

navigationArrows

• type: boolean
• default: false
• updatable: no

Displays navigation arrows on the sides of the gallery.

visibleOnLoad

• type: boolean
• default: false
• updatable: no

Displays the gallery when loading the first panorama. The user will be able to toggle the gallery with the navbar button.

hideOnClick

• type: boolean
• default: true
• updatable: yes

Hides the gallery when the user clicks on an item (forced to true on screens < 500px).

thumbnailSize

• type: { width: number, height: number }
• default: { width: 200, height: 100 }
• updatable: yes

Size of the thumbnails.

lang

• type: object
• default:

lang: {
    gallery: 'Gallery',
}

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

Items

id (required)

• type: number|string

Unique identifier of the item.

thumbnail (recommended)

• type: string
• default: ''

URL of the thumbnail.

name

• type: string
• default: ''

Text visible over the thumbnail.

panorama (required)

Refer to the main config page.

options

• type: PanoramaOptions
• default: null

Any option supported by the setPanorama() method.

Methods

setItems(items)

Changes the list of items.

Buttons

This plugin adds buttons to the default navbar:

• gallery allows to toggle the gallery panel

If you use a custom navbar you will need to manually add the buttons to the list.

SCSS variables

variable	default	description
$breakpoint	500px	Screen size below which the gallery is displayed full-height
$padding	15px	Padding of the container
$border	1px solid core.$buttons-color	Border between the gallery and the navbar
$background	core.$navbar-background	Background of the gallery
$item-radius	5px	Corner radius of gallery items
$item-active-border	3px solid white	Border of active gallery item
$title-font	core.$caption-font	Font of the gallery item title
$title-color	core.$caption-text-color	Color of the gallery item title
$title-background	rgba(0, 0, 0, .6)	Background of the gallery item title
$thumb-hover-scale	1.2	Scale factor of thumbnails on mouse hover
$arrow-color	rgba(255, 255, 255, 0.6)	Color of the navigation arrows
$arrow-background	rgba(0, 0, 0, 0.6)	Color of the gradient behind navigation arrows
$scrollbar-color	$arrow-color	Color of the scrollbar (browser support needed)