@positioner/psk-gallery

PSK Gallery

Frontend package for PSK Gallery

Install

npm i @positioner/psk-gallery

Usage

JS

<!-- Include with a CDN -->
<script src="https://unpkg.com/@positioner/psk-gallery@1.1.0-8/js/psk-gallery.min.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.initWithJson(json, [options])

Initializes the gallery and opens it.

json

Type: object

JSON object equal to the one returned by the API /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

Development and release

• Install dependencies:

  npm install
  

• Make changes, update version number and release notes (below), tag your release commit with new version.

• Publish the updated library

  npm publish
  

Release notes

1.1.0-8 - 03.02.2025

• Add missing "loop playsinline autoplay" attributes to video tag
• Move prev arrow so it comes before the next arrow

1.1.0-7 - 31.10.2024

• Add minified version of the script
• Add "Development and release" section in readme
• Suggest usage of unpkg cdn rather than jsdelivr in readme

1.1.0-6 - 29.10.2024

• Add initWithJson method

1.1.0-5 - 11.01.2024

• 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

1.1.0-4 - 10.01.2024

• Added visibleMediaIds option for filtrable galleries (to be used with /Umbraco/Api/PskGallery/GetMediaItems URL)

1.1.0-3 - 06.12.2023

• Added support for swiper@11
• Dropped support for swiper@8

1.1.0-2 - 18.10.2023

• Added support for mimeType in video

1.1.0-1 - 07.07.2022

• Added lazy load in previous and next slides

1.1.0-0 - 14.06.2022

• 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 to PskGallery
• 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)