publicalbum

PublicAlbum.org javascript gallery decorator

Public album is a photo sharing serivice running on www.publicalbum.org. You can create simple stories based on photos that are organized in your public profile, for example: https://www.publicalbum.org/pavex.

More information about Public album photo sharing is available on: https://www.publicalbum.org/blog/photo-sharing-website or example of usage of this service: https://www.publicalbum.org/blog/how-to-start-successful-travel-blog.

Public album use a custom javascript decorator for the photo galleries. This package contain compiled version of main decorator, primary for embedding stories/photosets into custom websites.

Good to know.

First, you need this package npm i publicalbum or include script from CDN into your website.

<script src="https://cdn.jsdelivr.net/npm/publicalbum@latest/embed-ui.min.js" async></script>

Here are three way, how to use this decorator:

Decorate Public album story

Here is a example one of my photoset story presented on https://www.publicalbum.org/pavex/neowise-comet?story=517990128.

<div class="pa-gallery-player-widget" style="width:100%; height:480px; visibility:hidden;"
  data-id="517990128"
  data-link="https://www.publicalbum.org/pavex/neowise-comet?story=517990128">
</div>

Similar, but static only way may be look like then:

Decorate HTLM code

<div class="pa-gallery-player-widget" style="width:100%; height:480px; visibility:hidden;"
  data-link="remote link of album" data-title="Album title">
  <object data="image1.jpg"></object>
  <object data="image2.jpg"></object>
</div>

Or decorate dynamicly:

Decorate custom data

var player = new GalleryPlayerWidget();
player.decorate(document.getElementById('widget1'));

After Public album script loaded, there are following object constructors are available:

• CarouselWidget,
• GalleryPlayerWidget.

And supported methods:

• .decorate(Element element) – decorate element with widget data
• .setDataset(object) - setup widget by custom data
• .update() – update widget completely
• .refresh() – update widget dimensions only, when size changed or etc.

*

Now, code is not open-source. If you want get to more information about code or donate, please contant me or check my blog for more information and examples.