❤
npm
Sign UpSign In

@averagemarcus/photo-frame

0.0.3 • Public • Published

PhotoFrameComponent

Web Component based PhotoFrame using justified-layout from Flickr

Example usage

Source: https://glitch.com/edit/#!/photo-frame-component?path=index.html

Live Demo: https://photo-frame-component.glitch.me/

The page will slowly scroll through all images and then scroll back up once it reaches the bottom (on repeat). Clicking/tapping anywhere on the page will toggle fullscreen mode.

image

Usage

  1. Include a script reference to the module:
<script type="module" src="https://unpkg.com/@averagemarcus/photo-frame?module"></script>
  1. Add a <photo-frame> element to your page and fill it with images:
<photo-frame>
  <img src="https://placekitten.com/200/300">
  <img src="https://placekitten.com/200/300">
  <img src="https://placekitten.com/1025/800">
  <img src="https://placekitten.com/500/500">
  <img src="https://placekitten.com/250/250">
  <img src="https://placekitten.com/200/300">
</photo-frame>

Configuration

spacing - Increase the space between images

<photo-frame spacing="10">
  <img src="https://placekitten.com/200/300">
  <img src="https://placekitten.com/200/300">
  <img src="https://placekitten.com/1025/800">
  <img src="https://placekitten.com/500/500">
  <img src="https://placekitten.com/250/250">
  <img src="https://placekitten.com/200/300">
</photo-frame>

Contributions

Contributions welcome!

Found a bug? File an issue

Running locally

Once checked out:

  1. npm install
  2. npm run build
  3. npm run serve

Readme

Keywords

none

Package Sidebar

Install

npm i @averagemarcus/photo-frame

Repository

github.com/AverageMarcus/PhotoFrameComponent

Homepage

github.com/AverageMarcus/PhotoFrameComponent#readme

Weekly Downloads

3

Version

0.0.3

License

ISC

Unpacked Size

106 kB

Total Files

6

Last publish

Collaborators

  • averagemarcus
Try on RunKit
Report malware