Rokka Gallery Embed

Teaser Overview Carousel
Teaser Overview Gallery

Usage

To use the Rokka Gallery Embed on your site, embed it with

<script
        src="/rokka-gallery.js"
        data-org="your-rokka-organization"
        data-album="your-album"
></script>

You can either build the project yourself and host the script on your site, or use a CDN.

API

We provide the following events on the document

  • rokkagallery.open is triggered when the Overlay is opened
  • rokkagallery.close is triggered when the Overlay is closed

document.addEventListener('rokkagallery.open', rokkaOverlayOpened)
document.addEventListener('rokkagallery.close', rokkaOverlayClosed)

You may wish to restrict scrolling or tabbing on your page while the user has opened Rokka Gallery.

Development

Clone the repository, and install all dependencies with npm i.

Preview the project with npm run dev. Be careful with this, as some styles may get overwritten by the ‘host’ page, so building is more often the safer option.

Lint the project before committing with npm run lint.

Build

Build the Rokka Gallery Embed project with npm run build. The output file is located at dist/rokka-gallery.js.

GitHub

View Github