v1.0.0

First stable release. The API is a handful of data attributes and a small mount / mountAll surface, and it is not going to change under you.

Use it

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flickr-teaser@1/dist/flickr-teaser.min.css">
<script src="https://cdn.jsdelivr.net/npm/flickr-teaser@1/dist/flickr-teaser.min.js" defer></script>

<div class="flickr-teaser" data-set="72157708563248894" data-nsid="75595126@N00" data-user="vlumi">
  <a href="https://www.flickr.com/photos/vlumi/albums/72157708563248894">See the album on Flickr</a>
</div>

or npm install flickr-teaser and import { mountAll } from "flickr-teaser".

Since 0.1.0

• TypeScript source; dist/ holds an ES module with type declarations and a minified script-tag build, plus the stylesheet in plain and minified form
• mount() returns a teaser with next(), back() and a new destroy(), instead of attaching methods to the element
• JSONP callback names are unique per page load, so two copies of the library can share a page
• Reduced motion is honoured when it changes mid-visit, not only at mount
• 28 tests on jsdom, covering the crossfade burst and stale-load cases, stepping order, failure states, timing, and teardown
• Published to npm with provenance; the built files are attached below

v0.1.0

First release. One script, one stylesheet, one element per album; no dependencies, no build step, no API key.

• Loads a public Flickr album's feed (JSONP; the feeds send no CORS header) and shows its latest photos shuffled, one at a time, with a crossfade
• Jittered timing so several teasers on one page don't change in lockstep
• ‹ › buttons and arrow keys step back and forward through the same shuffled order
• The photo links to its Flickr page; the album link is optional
• Pauses on hover or focus; never auto-advances under prefers-reduced-motion
• Themed through --ft-* custom properties; the element's children are the no-JS / failure fallback
• Also does tag searches and photostreams

Use from the CDN, pinned to this tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vlumi/flickr-teaser@v0.1.0/flickr-teaser.css">
<script src="https://cdn.jsdelivr.net/gh/vlumi/flickr-teaser@v0.1.0/flickr-teaser.js" defer></script>

Or download the two files below.