Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/englishextra/iframe-lightbox
Responsive no-jQuery pure JS/CSS Lightbox for iframes, no dependencies, customizable aspect ratio, 5kb unminified source code, with demo
https://github.com/englishextra/iframe-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 youtube
Last synced: 4 days ago
JSON representation
Responsive no-jQuery pure JS/CSS Lightbox for iframes, no dependencies, customizable aspect ratio, 5kb unminified source code, with demo
- Host: GitHub
- URL: https://github.com/englishextra/iframe-lightbox
- Owner: englishextra
- License: mit
- Created: 2017-05-27T17:30:25.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-10-03T16:37:03.000Z (about 3 years ago)
- Last Synced: 2024-10-24T08:45:50.946Z (13 days 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, youtube
- Language: JavaScript
- Homepage: https://codepen.io/englishextra/pen/jmjayV
- Size: 1.17 MB
- Stars: 28
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# iframe-lightbox
Responsive no-jQuery pure JS/CSS Lightbox for iframes, no dependencies, customizable aspect ratio, 5kb unminified source code, with demo
[](https://www.npmjs.com/package/iframe-lightbox)
[](https://travis-ci.com/englishextra/iframe-lightbox)
[](https://www.codacy.com/manual/englishextra/iframe-lightbox/dashboard?utm_source=github.com&utm_medium=referral&utm_content=englishextra/iframe-lightbox&utm_campaign=Badge_Grade)
[](https://www.jsdelivr.com/package/npm/iframe-lightbox)
## Demo
[codepen](https://codepen.io/englishextra/full/jmjayV/)
[jsfiddle](https://fiddle.jshell.net/englishextra/8pzy6uhr/show/)
[jsbin](https://output.jsbin.com/saqine)
## Features
* Simple initialization
* Nicely fits YouTube / Vimeo / SoundCloud / Audiomack or other URL via iframe
* Customizable aspect ratio via `data-padding-bottom` attribute
* Iframe content can be scrollable or not (default)
* 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/iframe-lightbox@latest/js/iframe-lightbox.min.js`
`https://cdn.jsdelivr.net/gh/englishextra/iframe-lightbox@latest/css/iframe-lightbox.min.css`
### unpkg
`https://unpkg.com/iframe-lightbox@latest/js/iframe-lightbox.js`
`https://unpkg.com/iframe-lightbox@latest/css/iframe-lightbox.css`
## Install
### npm
`npm install iframe-lightbox`
## Setup
`class` is not required. `iframe-lightbox-link` is used here to select elements. You may use some other method for elements selection.
`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 content.
`data-padding-bottom` is optional, and can be used to change default 16/9 Aspect Ratio to the one of yours with the formula: a percentage value of
```txt
height/width*100
```
For instance, HD would be: 9 / 16 * 100 + "%"
So, for YouTube or Vimeo, `data-padding-bottom="56.25%"` would be enough.
For SoundCloud embedded player via iframe, use: `data-padding-bottom="166px"`.
For Audiomack embedded player via iframe, use: `data-padding-bottom="252px"`.
For Scrollable content set `data-scrolling="true"`, or add `scrolling` option property with `true`.
The `data-scrolling` is optional, makes iframe content scrollable or not (default); this can be set with `scrolling` option property.
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"`.
`data-src` or `href` doesn't matter, but 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.
### YouTube
```html
YouTube
```
### Vimeo
```html
Vimeo
```
### SoundCloud
```html
SoundCloud
```
### Audiomack
```html
Audiomack
```
## Scrollable content
```html
Scrollable content
```
## Initialize
```js
[].forEach.call(document.getElementsByClassName("iframe-lightbox-link"), function (el) {
el.lightbox = new IframeLightbox(el);
});
```
## 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, document) {
"use strict";
[].forEach.call(document.getElementsByClassName("iframe-lightbox-link"), function(el) {
el.lightbox = new IframeLightbox(el, {
onCreated: function() {
/* show your preloader */
},
onLoaded: function() {
/* hide your preloader */
},
onError: function() {
/* hide your preloader */
},
onClosed: function() {
/* hide your preloader */
},
scrolling: false,
/* default: false */
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, document);
```
## GitHub
Inspired by [squeral/lightbox](https://github.com/squeral/lightbox)
[englishextra/img-lightbox](https://github.com/englishextra/img-lightbox)
## License
Available under [MIT license](https://opensource.org/licenses/MIT).