bilderrahmen
Advanced tools
Readme
Lightweight vanilla-JS image lightbox crafted with CSS3 and inline SVG icons for modern browsers
:sparkles: DEMO
Browser: Use directly from CDN
<html>
<body>
<link href="https://unpkg.com/bilderrahmen@0.3.0/dist/bilderrahmen.min.css" rel="stylesheet" />
<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 src="https://unpkg.com/bilderrahmen@0.3.0/dist/bilderrahmen.min.js"></script>
<script>
new bilderrahmen({
closeOnOutsideClick: true
});
</script>
</body>
</html>
UMD: Use bilderrahmen.js as AMD or CommonJS module.
npm install bilderrahmen --save
var Bilderrahmen = require('bilderrahmen');
new Bilderrahmen({
closeOnOutsideClick: true
});
Load css from node_modules/bilderrahmen/dist/bilderrahmen.min.css
ESM and SystemJS use bilderrahmen.esm.js as ES6-module and transpile it yourself with babel
<html>
<body>
<link href="https://unpkg.com/bilderrahmen@0.3.0/dist/bilderrahmen.min.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/systemjs/systemjs/0.20.9/dist/system.js"></script>
<script>
SystemJS.config({
map: {
'plugin-babel': 'https://cdn.rawgit.com/systemjs/plugin-babel/0.0.21/plugin-babel.js',
'systemjs-babel-build': 'https://cdn.rawgit.com/systemjs/plugin-babel/0.0.21/systemjs-babel-browser.js',
'bilderrahmen': 'https://unpkg.com/bilderrahmen@0.3.0/dist/bilderrahmen.esm.js'
},
transpiler: 'plugin-babel'
});
SystemJS.import('./main.js');
</script>
</body>
</html>
main.js
import Bilderrahmen from 'bilderrahmen';
new Bilderrahmen({
closeOnOutsideClick: true
});
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.
See DEVELOPMENT.md
FAQs
Lightweight vanilla-JS image lightbox crafted with CSS3 and inline SVG icons for modern browsers
The npm package bilderrahmen receives a total of 10 weekly downloads. As such, bilderrahmen popularity was classified as not popular.
We found that bilderrahmen demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A new report explores how advancements in LLMs are enhancing cyber threats, including polymorphic malware, personalized spearphishing, and the risk of hijacking customer service bots.
Security News
ESLint has approved an RFC that adds support for TypeScript configuration files, which is aimed at improving the developer experience and recognizing changes in the evolving JavaScript ecosystem.
Security News
The NVD is facing a significant backlog with over 12,500 CVEs awaiting analysis, and more than 50% of known exploited vulnerabilities (KEVs) left unenriched since mid-February.