Skip to content

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

License

Notifications You must be signed in to change notification settings

codeclou/bilderrahmen

Repository files navigation

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/[email protected]/bilderrahmen.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/gh/requirejs/[email protected]/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/[email protected]/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