lig

lightningbox

A fast and super-small image viewer lightbox.

Showing:

Popularity

Downloads/wk

1

GitHub Stars

2

Maintenance

Last Commit

4yrs ago

Contributors

0

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

Travis Build npm version

Lightningbox

A small (2.2kB gzipped) and blazing fast vanilla javascript image viewer. View Demo

Lightningbox - A small and blazing fast vanilla javascript image viewer.

Install

$ npm install --save lightningbox

Usage

API

/**
* Takes a selector and initialises the image-viewer for the matched element(s).
* The selector needs to point to a single or multiple <a> elements.
* Whenever the <a> elements are clicked the image-viewer will open.
* Required <a> parameters:
*
*    href="..." => the URL of the image that will be displayed in the modal
*
* @param {string} selector The selector of the <a> element(s)
*/
function lightningbox (selector) {
    // ...
}

Single Image

import lightningbox from 'lightningbox';

lightningbox('.gallery > a');
<div class="gallery">
    <a href="/images/1.jpg" title="First"><img src="/images/1-small.jpg" alt="First" /></a>
</div>

Multiple Images

import lightningbox from 'lightningbox';

lightningbox('.gallery > a');
<div class="gallery">
    <a href="/images/1.jpg" title="First"><img src="/images/1-small.jpg" alt="First" /></a>
    <a href="/images/2.jpg" title="Second"><img src="/images/2-small.jpg" alt="Second" /></a>
    <a href="/images/3.jpg" title="Third"><img src="/images/3-small.jpg" alt="Third" /></a>
</div>

Using CDN

<head>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightningbox@latest/dist/lightningbox.min.css" />
</head>
<body>
    <div class="gallery">
        <a href="/images/1.jpg" title="First"><img src="/images/1-small.jpg" alt="First" /></a>
        <a href="/images/2.jpg" title="Second"><img src="/images/2-small.jpg" alt="Second" /></a>
        <a href="/images/3.jpg" title="Third"><img src="/images/3-small.jpg" alt="Third" /></a>
    </div>
    <!-- Javascript -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lightningbox@latest/dist/lightningbox.min.js"></script>
    <script>
        window.lightningbox('.gallery > a');
    </script>
</body>

Using NPM

The lightningbox module exposes the lightningbox() function only which you can start using right away.

import lightningbox from 'lightningbox';

lightningbox('.gallery > a');

Styling

You can either use the compiled lightningbox.min.css file or you can require in the SASS file from node_modules/lightningbox/src/style.scss.

Customizable SASS variables:

$gutter                 // The default spacing used
$color                  // Text color
$font-family            // Font family
$background             // Background color of the modal
$nav-background         // Background color of the close button
$pagination-background  // Background color of the pagination
$border-radius:         // Default border radius
$transition-time:       // Default transition times

CDN

Just use the following code to make window.lightningbox available on your site.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lightningbox@latest/dist/lightningbox.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightningbox@latest/dist/lightningbox.min.css" />

Development

# Run webpack-dev-server and example page on http://localhost:8080/
$ yarn dev

# Run a production build
$ yarn build

# Run the tests
$ yarn test

# Play some TDD!
$ yarn tdd

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

lj
lightgallery.jsFull featured JavaScript image & video gallery. No dependencies
User Rating
5.0/ 5
1
Top Feedback
1Performant
1Highly Customizable
1Responsive Maintainers
GitHub Stars
5K
Weekly Downloads
12K
vie
viewerjsJavaScript image viewer.
User Rating
5.0/ 5
2
Top Feedback
1Great Documentation
1Easy to Use
GitHub Stars
6K
Weekly Downloads
32K
cornerstone-coreJavaScript library to display interactive medical images including but not limited to DICOM
User Rating
5.0/ 5
2
Top Feedback
N/A
GitHub Stars
2K
Weekly Downloads
8K
kal
kaleidoscopejs:crystal_ball: An embeddable, lightweight 360º video/image viewer
User RatingN/A
Top Feedback
N/A
GitHub Stars
313
Weekly Downloads
855
pho
photoswipeJavaScript image gallery for mobile and desktop, modular, framework independent
User Rating
4.3/ 5
16
Top Feedback
1Great Documentation
1Easy to Use
1Performant
GitHub Stars
21K
Weekly Downloads
74K
See 11 Alternatives

Tutorials

No tutorials found
Add a tutorial