Skip to content
Lightweight vanilla-JS image lightbox crafted with CSS3 and inline SVG icons for modern browsers
TypeScript CSS HTML JavaScript
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.
src
test
.editorconfig
.gitignore
.npmignore
DEVELOPMENT.md
Jenkinsfile
LICENSE
README.md
build-package-json-template.json
build.js
package.json
tsconfig.json
yarn.lock

README.md

Bilderrahmen

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


 

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

 

DEMO


 

Usage

Browser: Use directly from CDN with RequireJS.

<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bilderrahmen@1.0.0/bilderrahmen.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/gh/requirejs/requirejs@2.3.5/require.js"></script>
</head>
<body>


  <a href="https://codeclou.github.io/bilderrahmen/demo/demo-gallery-02/images/DSC05104.JPG" target="_blank"><img
        src="https://codeclou.github.io/bilderrahmen/demo/demo-gallery-02/thumbs/DSC05104.JPG"
        data-bilderrahmen="gallery-02"
        data-bilderrahmen-title="Image Four"
  /></a>

  <!-- Video only supports MP4 and one video source! -->
  <a href="https://codeclou.github.io/bilderrahmen/demo/demo-videos/demo-720p.mp4" target="_blank"><img
          src="https://codeclou.github.io/bilderrahmen/demo/demo-videos/demo-720p-poster.jpg"
          style="width:200px;border:1px solid #ccc"
          data-bilderrahmen-video="https://codeclou.github.io/bilderrahmen/demo/demo-videos/demo-720p.mp4"
          data-bilderrahmen="gallery-02"
          data-bilderrahmen-title="Video One"
  /></a>

  <script>
    require(['https://cdn.jsdelivr.net/npm/bilderrahmen@1.0.0/bilderrahmen.umd.es5.js'], function(module) {
        new module.Bilderrahmen({ closeOnOutsideClick: true });
    });
  </script>
</body>
</html>

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

npm install bilderrahmen --save
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
import { Bilderrahmen } from 'bilderrahmen';

new Bilderrahmen({
   closeOnOutsideClick: true
});

Note that depending on your buildchain language target files are automatically loaded by package.json convention.

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


 

Browser Support

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

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


 

Development and Release

See DEVELOPMENT.md


 

License

MIT © Bernhard Grünewaldt

You can’t perform that action at this time.