Installation
This plugin requires its stylesheet. Import
@photo-sphere-viewer/gallery-plugin/index.css or add the CDN link to your <head>.Usage
Configuration
The list of panorama items. Not updatable after init — use
setItems() instead.Show the gallery when the first panorama loads. The user can toggle it with the navbar button.
Close the gallery when the user selects an item. Always
true on screens narrower than 500px. Updatable.Show left/right navigation arrows on the sides of the gallery.
Size of each thumbnail in pixels. Updatable.
Localization strings merged with the main viewer
lang object.Item options
Unique identifier for the item.
The panorama to display. Accepts the same value as the main viewer
panorama option.URL of the thumbnail image shown in the gallery strip.
Text label shown over the thumbnail.
Any options supported by the
setPanorama() method, applied when this item is selected.Methods
setItems(items)
Replaces the current gallery items.
Navbar button
This plugin adds agallery button to the default navbar to toggle the gallery panel.
If you use a custom navbar, add
'gallery' to your navbar configuration manually.SCSS variables
| Variable | Default | Description |
|---|---|---|
$breakpoint | 500px | Screen width below which the gallery is displayed full-height |
$padding | 15px | Container padding |
$border | 1px solid core.$buttons-color | Border between gallery and navbar |
$background | core.$navbar-background | Gallery background |
$item-radius | 5px | Corner radius of gallery items |
$item-active-border | 3px solid white | Border of the active gallery item |
$title-font | core.$caption-font | Font of the item title |
$title-color | core.$caption-text-color | Color of the item title |
$title-background | rgba(0, 0, 0, .6) | Background behind the item title |
$thumb-hover-scale | 1.2 | Scale factor of thumbnails on hover |
$arrow-color | rgba(255, 255, 255, 0.6) | Color of navigation arrows |
$arrow-background | rgba(0, 0, 0, 0.6) | Gradient behind navigation arrows |
$scrollbar-color | $arrow-color | Scrollbar color (browser support required) |
