https://github.com/codeclou/bilderrahmen

Lightweight vanilla-JS image lightbox crafted with CSS3 and inline SVG icons for modern browsers
https://github.com/codeclou/bilderrahmen

gallery image-gallery image-lightbox javascript lightbox vanilla-javascript

Last synced: about 1 month ago
JSON representation

Lightweight vanilla-JS image lightbox crafted with CSS3 and inline SVG icons for modern browsers

• Host: GitHub
• URL: https://github.com/codeclou/bilderrahmen
• Owner: codeclou
• License: mit
• Created: 2017-02-12T14:30:07.000Z (almost 8 years ago)
• Default Branch: main
• Last Pushed: 2023-01-27T16:50:58.000Z (almost 2 years ago)
• Last Synced: 2024-10-28T15:39:37.907Z (2 months ago)
• Topics: gallery, image-gallery, image-lightbox, javascript, lightbox, vanilla-javascript
• Language: TypeScript
• Homepage: https://codeclou.github.io/bilderrahmen/
• Size: 19.6 MB
• Stars: 21
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Security: SECURITY.md

Awesome Lists containing this project

README

        
# Bilderrahmen

> Lightweight vanilla-JS image lightbox for minimalists crafted with CSS3 and inline SVG icons for modern browsers.

[![](https://codeclou.github.io/bilderrahmen/img/github-product-logo-bilderrahmen.png)](https://github.com/codeclou/bilderrahmen)

-----

 

### Features

 * pure JavaScript, no dependencies

 * multiple galleries per page supported

 * minimal look

 * image title support

 * responsive

 * inline SVG buttons

 * MP4 video support (HTML 5 video)

 * minified: js 4.7 KB css 4.2 KB total 8.9 KB

 * gzipped: js 1.5 KB css 2.0 KB total 3.5 KB

-----

 

**:sparkles: [DEMO](https://codeclou.github.io/bilderrahmen/)**







-----

 

### Usage

**Browser**: Use directly from CDN with [RequireJS](http://requirejs.org/).

```html

  

  

  

  

  

  

    require(['https://cdn.jsdelivr.net/npm/[email protected]/bilderrahmen.umd.es5.js'], function(module) {

        new module.Bilderrahmen({ closeOnOutsideClick: true });

    });

  

```

----

**UMD**: Use `bilderrahmen.umd.es5.js` as AMD or CommonJS module.

```

npm install bilderrahmen --save

```

```js

var Bilderrahmen = require('bilderrahmen').Bilderrahmen;

new Bilderrahmen({

   closeOnOutsideClick: true

});

```

Load css from `node_modules/bilderrahmen/dist/bilderrahmen.min.css`

-----

**ES5/ES2015**: Use `bilderrahmen.es2015.es5.js` or `bilderrahmen.es2015.es2015.js` as ES-Module.

```

npm install bilderrahmen --save

```

```js

import { Bilderrahmen } from 'bilderrahmen';

new Bilderrahmen({

   closeOnOutsideClick: true

});

```

Note that depending on your buildchain language target files are automatically loaded by [`package.json` convention](./build-package-json-template.json).

Load css from `node_modules/bilderrahmen/dist/bilderrahmen.min.css`

-----

 

### Browser Support

Works in all modern browsers and was tested in the following versions

![](https://codeclou.github.io/bilderrahmen/img/browser-support.svg?v2)

Note: SVG loading animation will not work in IE11 or Edge due to poor SVG animation support.

-----

 

### Development and Release

See [DEVELOPMENT.md](./DEVELOPMENT.md)

-----

 

## License

[MIT](./LICENSE) © [Bernhard Grünewaldt](https://github.com/clouless)