@mgnmrt/pure-js-lightbox
v1.0.2
Published
Vanilla JS Lightbox
Downloads
1
Maintainers
Readme
Pure JS Lightbox
Simple and lightweight JavaScript lightbox.
Features
- Simple
- Mobile friendly
- Touch and swipe support
- Keyboard navigation
- Lightweight: ~9KB (generated js file)
Getting started
Download the zip file of the latest release from GitHub. You will find a js and a css file inside.
Include the css file at the top of your page in the head section:
<link href="path/to/pure-js-lightbox.css" rel="stylesheet" />
Place the script tag at the bottom of your page right before the closing body tag:
<script src="path/to/pure-js-lightbox.js"></script>
Add
<img>
tags with attributes to your html:<img class="preview-image" data-lightbox-id="nature" src="images/1.jpg" alt="Goettingen/Diemarden: Hay Bales After Mowing" data-photographer="© light.tales.photography by Micha Z." />
Add markup for overlay:
<div class="lightbox-overlay hidden"></div>
Add markup for backdrop:
<div class="lightbox-backdrop hidden"></div>
| Attribute | Required/Optional | Description |
|:------------------|-------------------|:--------------------------------------------------|
| class | required | Defaults to preview-image
. |
| data-lightbox-id | required | Distinguish images between multiple image sets. |
| src | required | Relative image path. For example: images/3.jpg
. |
| alt | optional | Text appears under the image. |
| data-photographer | optional | Source of the image. Appears under the image. |
Local development
Installation
For installation cd into the project root and run npm install
.
Development
To serve on localhost run npm run start
on the command line.
Build
For a production build run npm run build
on the command line.
This will generate a dist
directory with index.html
, pure-js-lightbox.js
and pure-js-lightbox.css
.
Demo
Built with
TypeScript
TypeScript is JavaScript with syntax for types.
Sass
CSS with superpowers.
webpack
Module Bundler for JavaScript.
Lorem Picsum
Demo images for the repository.
light.tales.photography
Beautiful demo images (on the demo web page).