Noteworthy Programming Masterpiece

npm

Need private packages and team management tools?Check out npm Orgs. »

img-lightbox

0.2.3 • Public • Published

img-lightbox Demo

Responsive no-jQuery pure JS/CSS Lightbox for images, no dependencies, 10kb unminified source code, with demo

NPM

npm Bower Build Status Codacy Badge

Demo

codepen

jsfiddle

jsbin

Features

  • Simple initialization

  • SPA / PWA friendly: prevents multiple same events assigning

  • Debounced launch, default 500ms, custom rate can be set with rate property of options object

  • Preloading spinner that is unset after onload event succeeds

  • Pure CSS Retina Ready UI images, no external ones (prompted by github.com/jasomdotnet, thanks)

  • Custom event callbacks

CDN

jsDelivr

https://cdn.jsdelivr.net/gh/englishextra/img-lightbox@0.2.3/js/img-lightbox.min.js

https://cdn.jsdelivr.net/gh/englishextra/img-lightbox@0.2.3/css/img-lightbox.min.css

unpkg

https://unpkg.com/img-lightbox@0.2.3/js/img-lightbox.js

https://unpkg.com/img-lightbox@0.2.3/css/img-lightbox.css

Install

npm

npm install img-lightbox

bower

bower install img-lightbox

Setup

class "img-lightbox-link" can be any name you choose.

data-src is deprecated, but supported for compatibility.

href is required, and contains URL of your image.

For those who don't use 3rd-party scripts that interfere with links behaviour and don't force window.location they have no need in either data-touch="true" or {touch: true}.

When you have scripts that interfere, then to keep lightbox working, use {touch: true} or data-touch="true".

data-src or href doesn't matter, but you shouldn't enable touch override if you have a full screen image in a lighbox link and have no other space to scroll down.

Build Status

<a href="https://farm1.staticflickr.com/955/27854475488_4f2b7f52e4_k.jpg"
class="img-lightbox-link"
data-src="https://farm1.staticflickr.com/955/27854475488_4f2b7f52e4_k.jpg"
aria-hidden="true"
rel="lightbox"><img src="https://farm1.staticflickr.com/955/27854475488_5f82a379ca_z.jpg" alt="Image Lightbox" /></a>

Initialize

imgLightbox("img-lightbox-link");

Tips

SPA / PWA developers don't need to bother: built-in class is added to a link.

That way you avoid multiple assignments to a single element.

Examples of event handling

(function(root) {
   "use strict";
   if (root.imgLightbox) {
    imgLightbox("img-lightbox-link", {
    onCreated: function() {
    /* show your preloader */
    },
    onLoaded: function() {
    /* hide your preloader */
    },
    onError: function() {
    /* hide your preloader */
    },
    onClosed: function() {
    /* hide your preloader */
    },
    rate: 500 /* default: 500 */,
    touch: false /* default: false - use with care for responsive images in links on vertical mobile screens */
    });
   }
})("undefined" !== typeof window ? window : this);

GitHub

englishextra/img-lightbox

License

Available under MIT license.

install

npm i img-lightbox

Downloadsweekly downloads

19

version

0.2.3

license

(MIT)

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability