Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/englishextra/img-lightbox

Responsive no-jQuery pure JS/CSS Lightbox for images, no dependencies, 10kb unminified source code, with demo
https://github.com/englishextra/img-lightbox

audiomack browser css front-end frontend html iframe js lightbox no-dependencies no-framework no-jquery pwa soundcloud ui vanilla-javascript vanilla-js vimeo webapp

Last synced: 2 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/englishextra/img-lightbox
Owner: englishextra
License: mit
Created: 2018-05-03T07:38:54.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2021-10-03T16:39:20.000Z (over 3 years ago)
Last Synced: 2024-10-31T10:43:29.624Z (3 months ago)
Topics: audiomack, browser, css, front-end, frontend, html, iframe, js, lightbox, no-dependencies, no-framework, no-jquery, pwa, soundcloud, ui, vanilla-javascript, vanilla-js, vimeo, webapp
Language: JavaScript
Homepage: https://codepen.io/englishextra/full/YLQxRp/
Size: 678 KB
Stars: 13
Watchers: 4
Forks: 2
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.md

Awesome Lists containing this project

README

        # img-lightbox

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

[![npm](https://img.shields.io/npm/v/img-lightbox.svg)](https://www.npmjs.com/package/img-lightbox)

[![Build Status](https://travis-ci.com/englishextra/img-lightbox.svg?branch=master)](https://travis-ci.com/englishextra/img-lightbox)

[![Codacy Badge](https://app.codacy.com/project/badge/Grade/2fbe9cbd4dcb4d3b8fe83dac98633f67)](https://www.codacy.com/manual/englishextra/img-lightbox/dashboard?utm_source=github.com&utm_medium=referral&utm_content=englishextra/img-lightbox&utm_campaign=Badge_Grade)

[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/img-lightbox/badge)](https://www.jsdelivr.com/package/npm/img-lightbox)

## Demo

[codepen](https://codepen.io/englishextra/full/YLQxRp/)

[jsfiddle](https://fiddle.jshell.net/englishextra/8hhpbv4h/show/)

[jsbin](https://output.jsbin.com/laxudog)

## 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@latest/js/img-lightbox.min.js`

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

### unpkg

`https://unpkg.com/img-lightbox@latest/js/img-lightbox.js`

`https://unpkg.com/img-lightbox@latest/css/img-lightbox.css`

## Install

### npm

`npm install img-lightbox`

## Setup

`class` is required, and can be any class name you choose (in this demo it's `img-lightbox-link`).

`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"` (you shouldn't enable this touch override if you have a full screen image in a lighbox link and have no other space to scroll down).

`data-src` or `href` doesn't matter.

[![Build Status](https://farm1.staticflickr.com/955/27854475488_5f82a379ca_z.jpg)](https://farm1.staticflickr.com/955/27854475488_5f82a379ca_z.jpg)

```html



```

## Initialize

```js

imgLightbox("img-lightbox-link");

```

## Tips

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

That way you avoid multiple assignments to a single element.

## Examples of event handling

```js

(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](https://github.com/englishextra/img-lightbox)

## License

Available under [MIT license](https://opensource.org/licenses/MIT).