chrisburnell/instant-photo
1
0
Fork 0
mirror of https://github.com/chrisburnell/instant-photo.git synced 2026-01-08 18:33:21 +00:00
Code Issues Projects Releases Packages Wiki Activity
A Web Component for presenting an img like an instant photograph. https://chrisburnell.com/instant-photo
9 commits 1 branch 6 tags 50 KiB
Find a file
Exact
Chris Burnell 51116f02bb
 feat: show alt text as caption
2025-06-14 18:23:12 +08:00
.github fix package info and publish to npm with provenance 2024-08-05 19:00:09 +08:00
.editorconfig chore: code clean up 2024-08-06 14:03:57 +08:00
.npmignore chore: code clean up 2024-08-06 14:03:57 +08:00
.prettierignore chore: code clean up 2024-08-06 14:03:57 +08:00
.prettierrc chore: code clean up 2024-08-06 14:03:57 +08:00
demo.html feat: show alt text as caption 2025-06-14 18:23:12 +08:00
instant-photo.js feat: show alt text as caption 2025-06-14 18:23:12 +08:00
LICENSE initial 2024-01-22 18:54:10 +08:00
package-lock.json initial 2024-01-22 18:54:10 +08:00
package.json feat: show alt text as caption 2025-06-14 18:23:12 +08:00
README.md bump to v1.0.0 2024-01-24 14:33:21 +08:00

README.md

instant-photo

A Web Component for presenting an img like an instant photograph.

Demo | Further reading

Examples

General usage example:

<script type="module" src="instant-photo.js"></script>

<instant-photo>
  <img src="example.jpg" alt="">
</instant-photo>

Example setting the image to develop over time:

<script type="module" src="instant-photo.js"></script>

<instant-photo develop>
  <img src="example.jpg" alt="">
</instant-photo>

Features

This Web Component presents an img to make it look like an instant photo. With the develop attribute it will “develop” over time after it becomes slightly visible in the browser viewport.

Installation

You have a few options (choose one of these):

  1. Install via npm: npm install @chrisburnell/instant-photo
  2. Download the source manually from GitHub into your project.
  3. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

Usage

Make sure you include the <script> in your project (choose one of these):

<!-- Host yourself -->
<script type="module" src="instant-photo.js"></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://www.unpkg.com/@chrisburnell/instant-photo@1.0.0/instant-photo.js"
></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://esm.sh/@chrisburnell/instant-photo@1.0.0"
></script>

Credit

With thanks to the following people: