PSK Gallery
Frontend package for PSK Gallery
Install
npm i @positioner/psk-gallery
Usage
JS
<!-- Include with a CDN -->
<!-- jsdelivr supports minified files (generated by them) -->
<script src="https://cdn.jsdelivr.net/npm/@positioner/psk-gallery@1.1.0-5/js/psk-gallery.min.js"></script>
<!-- unpkg does not -->
<script src="https://unpkg.com/@positioner/psk-gallery@1.1.0-5/js/psk-gallery.js"></script>
SCSS
// Include in your stylesheet
@import '../node_modules/@positioner/psk-gallery/scss/psk-gallery';
API
void PskGallery.init(url, [options])
Initializes the gallery and opens it.
url
Type: string
Url pointing to the JSON API (e.g /Umbraco/Api/PskGallery/…
)
options
Type: object
A configuration object, see properties below
void PskGallery.close()
Closes the gallery if it's open.
Options
Property | Type | Default | Description |
---|---|---|---|
initialSlide | number |
0 |
The index of the slide that should be opened first |
onOpen | function |
()=>{} |
Function called when the gallery is open. A TransitionEvent will be passed as the first parameter |
onClose | function |
()=>{} |
Function called when the gallery is closed. A TransitionEvent will be passed as the first parameter |
visibleMediaIds | function |
()=>[] |
Function that should return an array of IDs of the currently visible elements. The IDs returned refer to the Umbraco media ID. Should be used when a filtrable gallery is present |
Customization
Some commonly customized properties have exposed variables
Variable | Default | Description |
---|---|---|
--psk-gallery-bg |
$body-bg or black |
Gallery background color |
--psk-gallery-fg |
$body-color or white |
Gallery foreground color |
--psk-gallery-padding |
60px |
Padding around the image / video |
--psk-gallery-z-index |
1000 |
Gallery z-index value |
--psk-gallery-close-top |
1.5rem |
Close button distance from the top |
--psk-gallery-close-right |
1.5rem |
Close button distance from the right |
--psk-gallery-transition-speed |
$base-duration or 0.25s |
Opacity transition speed |
Release notes
- Fix flashing of first image for a brief period on open
- Prevent slides content from being selected and looking ugly
- Remove obsolete styles for swiper@8
- Added
visibleMediaIds
option for filtrable galleries (to be used with/Umbraco/Api/PskGallery/GetMediaItems
URL)
- Added support for swiper@11
- Dropped support for swiper@8
- Added support for mimeType in video
- Added lazy load in previous and next slides
-
BREAKING First release where the frontend package is separated from the backend, install this separately with
npm i @positioner/psk-gallery
-
BREAKING Renamed main export from
pskGallery
toPskGallery
- Added small threshold to swiper slider to prevent accidental swipes
- Added check for video ready state before trying to play it
- Converted JS code to ES6 class
- Fixed vertically stretched video bug (controls not aligned with video)