Skip to content
Responsive no-jQuery pure JS/CSS Lightbox for images, no dependencies, 10kb unminified source code, with demo
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
css
js
scss
src
.editorconfig
.eslintrc
.gitignore
.gulp-browser-sync.bat
.jshintrc
.npm-list.json
.remove-tag.txt
.travis.yml
CHANGELOG.md
LICENSE.md
README.md
component.json
gulpfile.js
image-@1x.jpg
image-@1x.png
image-@2x.jpg
index.html
index.js
main.js
package-lock.json
package.json https://github.com/nodejs/node-gyp/issues/1717 May 10, 2019

README.md

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" is required, and can be any name you choose.

data-src is another method to get the source URL when you do not want the link to lead to some real URL.

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.

You can’t perform that action at this time.