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/[email protected]/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

1. Install dependencies:

   npm install

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

3. Publish the updated library

   npm publish

Release notes

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)