Lightbox web component.
npm i -S @substrate-system/lightboxThis exposes ESM and common JS via
package.json exports field.
import '@substrate-system/lightbox'require('@substrate-system/lightbox')import '@substrate-system/lightbox/css'Or minified:
import '@substrate-system/lightbox/min/css'This calls the global function customElements.define. Just import, then use
the tag in your HTML. See ./example.
import '@substrate-system/lightbox'<light-box>
<div>
<img src="./100.jpg" alt="Bullet cat" />
</div>
<div>
<img src="./20190814_102301.jpg" alt="llamas" />
</div>
<div>
<img src="./cinnamon-roll.jpg" alt="Cinnamon roll cat" />
</div>
<div>
<img src="./raccoons.jpg" alt="3 raccoons looking out of a storm drain" />
</div>
</light-box>This package exposes minified JS and CSS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.
cp ./node_modules/@substrate-system/lightbox/dist/index.min.js ./public/light-box.min.js
cp ./node_modules/@substrate-system/lightbox/dist/style.min.css ./public/light-box.css<head>
<link rel="stylesheet" href="./light-box.css">
</head>
<body>
<!-- ... -->
<script type="module" src="./light-box.min.js"></script>
</body>npm testnpm run test:a11y