-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
166 lines (166 loc) · 13 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<!-- 1. use /tools/modularscale/index.html?15&px&1.25,1.125&web&text for font size and line height
2. lazyload images
3. remove font face, display block, opacity 1, visibility visible in critical inline css
4. set font display swap in font face in css -->
<html class="no-js" lang="ru">
<head>
<meta charset="utf-8" />
<!-- <meta http-equiv="x-ua-compatible" content="ie=edge" /> -->
<!-- https://content-security-policy.com/ --><meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval' https:; connect-src 'self' 'unsafe-inline' https:; frame-src 'self' https:; media-src 'self' https:; img-src 'self' 'unsafe-inline' https: data:" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>iframe-lightbox Demo Page</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width" />
<link rel="dns-prefetch" href="https://fonts.googleapis.com" /><link rel="dns-prefetch" href="https://cdn.jsdelivr.net" /><link rel="dns-prefetch" href="https://cdnjs.cloudflare.com" /><link rel="dns-prefetch" href="https://farm9.staticflickr.com" /><link rel="dns-prefetch" href="https://farm8.staticflickr.com" /><link rel="dns-prefetch" href="https://farm7.staticflickr.com" /><link rel="dns-prefetch" href="https://farm6.staticflickr.com" /><link rel="dns-prefetch" href="https://farm5.staticflickr.com" /><link rel="dns-prefetch" href="https://farm4.staticflickr.com" /><link rel="dns-prefetch" href="https://farm3.staticflickr.com" /><link rel="dns-prefetch" href="https://farm2.staticflickr.com" /><link rel="dns-prefetch" href="https://farm1.staticflickr.com" /><link rel="dns-prefetch" href="https://i.vimeocdn.com" /><link rel="dns-prefetch" href="https://f.vimeocdn.com" /><link rel="dns-prefetch" href="https://w.soundcloud.com" /><link rel="dns-prefetch" href="https://a.disquscdn.com" /><link rel="dns-prefetch" href="https://api-maps.yandex.ru" /><link rel="dns-prefetch" href="https://chart.googleapis.com" /><link rel="dns-prefetch" href="https://connect.mail.ru" /><link rel="dns-prefetch" href="https://connect.ok.ru" /><link rel="dns-prefetch" href="https://disqus.com" /><link rel="dns-prefetch" href="https://graph.facebook.com" /><link rel="dns-prefetch" href="https://mc.yandex.ru" /><link rel="dns-prefetch" href="https://www.google-analytics.com" /><link rel="dns-prefetch" href="https://yastatic.net" /><link rel="dns-prefetch" href="https://audiomack.com" /><link rel="dns-prefetch" href="https://api.audiomack.com" /><link rel="dns-prefetch" href="https://platform.twitter.com" /><link rel="dns-prefetch" href="https://www.instagram.com" />
<link rel="stylesheet" href="./css/iframe-lightbox.css" />
<style>
/*!
* @see {@link https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.2/gh-fork-ribbon.css}
*/
.github-fork-ribbon{width:12.1em;height:12.1em;position:fixed;overflow:hidden;top:0;right:0;z-index:9999;pointer-events:none;font-size:13px;text-decoration:none;text-indent:-999999px;}.github-fork-ribbon.fixed{position:fixed;}.github-fork-ribbon:before,.github-fork-ribbon:after{position:absolute;display:block;width:15.38em;height:1.54em;top:3.23em;right:-3.23em;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}.github-fork-ribbon:before{content:"";padding:.38em 0;background-color:#a00;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.15)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.15));background-image:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.15));background-image:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.15));-webkit-box-shadow:0 .15em .23em 0 rgba(0,0,0,0.5);box-shadow:0 .15em .23em 0 rgba(0,0,0,0.5);pointer-events:auto;}.github-fork-ribbon:after{content:attr(data-ribbon);color:#fff;font:700 1em "Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.54em;text-decoration:none;text-shadow:0 -.08em rgba(0,0,0,0.5);text-align:center;text-indent:0;padding:.15em 0;margin:.15em 0;border-width:.08em 0;border-style:dotted;border-color:#fff;border-color:rgba(255,255,255,0.7);}.github-fork-ribbon.left-top,.github-fork-ribbon.left-bottom{right:auto;left:0;}.github-fork-ribbon.left-bottom,.github-fork-ribbon.right-bottom{top:auto;bottom:0;}.github-fork-ribbon.left-top:before,.github-fork-ribbon.left-top:after,.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.left-bottom:after{right:auto;left:-3.23em;}.github-fork-ribbon.left-bottom:before,.github-fork-ribbon.left-bottom:after,.github-fork-ribbon.right-bottom:before,.github-fork-ribbon.right-bottom:after{top:auto;bottom:3.23em;}.github-fork-ribbon.left-top:before,.github-fork-ribbon.left-top:after,.github-fork-ribbon.right-bottom:before,.github-fork-ribbon.right-bottom:after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
</style>
</head>
<body>
<h1 class="title">iframe-lightbox Demo</h1>
<p>Responsive no-jQuery pure JS/CSS Lightbox for iframes, no dependencies, customizable aspect ratio, 5kb unminified source code, with demo</p>
<h2>Demo</h2>
<p>
<a href="https://codepen.io/englishextra/full/jmjayV/">codepen</a>
<a href="https://fiddle.jshell.net/englishextra/8pzy6uhr/show/">jsfiddle</a>
<a href="https://output.jsbin.com/saqine">jsbin</a>
</p>
<h2>Features</h2>
<ul>
<li>Simple initialization</li>
<li>Nicely fits YouTube / Vimeo / SoundCloud / Audiomack or other URL via iframe</li>
<li>Customizable aspect ratio via <code>data-padding-bottom</code> attribute</li>
<li>Iframe content can be scrollable or not (default)</li>
<li>Debounced launch, default 500ms, custom rate can be set with <code>rate</code> property of options object</li>
<li>Preloading spinner that is unset after onload event succeeds</li>
<li>Pure CSS Retina Ready UI images, no external ones (prompted by github.com/jasomdotnet, thanks)</li>
<li>Custom event callbacks</li>
</ul>
<h2>CDN</h2>
<h4>jsDelivr</h4>
<p>
<code>https://cdn.jsdelivr.net/gh/englishextra/iframe-lightbox@@latest/js/iframe-lightbox.min.js</code>
<br />
<code>https://cdn.jsdelivr.net/gh/englishextra/iframe-lightbox@@latest/css/iframe-lightbox.min.css</code>
</p>
<h4>unpkg</h4>
<p>
<code>https://unpkg.com/iframe-lightbox@@latest/js/iframe-lightbox.js</code>
<br />
<code>https://unpkg.com/iframe-lightbox@@latest/css/iframe-lightbox.css</code>
</p>
<h2>Install</h2>
<h4>npm</h4>
<p>
<code>npm install iframe-lightbox</code>
</p>
<h2>Setup</h2>
<p><code>class</code> is not required. "iframe-lightbox-link" is used here to select elements. You may use some other method for elements selection.</p>
<p><code>data-src</code> is another method to get the source URL when you do not want the link to lead to some real URL.</p>
<p><code>href</code> is required, and contains URL of your content.</p>
<p><code>data-padding-bottom</code> 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 <code>height/width*100</code>.</p>
<p>For instance, HD would be: 9 / 16 * 100 + "%"</p>
<p>So, for YouTube or Vimeo, <code>data-padding-bottom="56.25%"</code> would be enough.</p>
<p>For SoundCloud embedded player via iframe, use: <code>data-padding-bottom="166px"</code>.</p>
<p>For Audiomack embedded player via iframe, use: <code>data-padding-bottom="252px"</code>.</p>
<p>For Scrollable content set <code>data-scrolling="true"</code>, or add <code>scrolling</code> option property with <code>true</code>.</p>
<p>The <code>data-scrolling</code> is optional, makes iframe content scrollable or not (default); this can be set with <code>scrolling</code> option property.</p>
<h2><a class="iframe-lightbox-link" href="https://www.youtube.com/embed/KK9bwTlAvgo?autoplay=0" data-padding-bottom="56.25%" aria-hidden="true" rel="lightbox" aria-label="Ëàéòáîêñ">YouTube</a></h2>
<pre><code><a
class="iframe-lightbox-link"
href="https://www.youtube.com/embed/KK9bwTlAvgo?autoplay=0"
data-padding-bottom="56.25%">YouTube</a></code></pre>
<h2><a class="iframe-lightbox-link" href="https://player.vimeo.com/video/165424115?autoplay=false" data-padding-bottom="56.25%" aria-hidden="true" rel="lightbox" aria-label="Ëàéòáîêñ">Vimeo</a></h2>
<pre><code><a
class="iframe-lightbox-link"
href="https://player.vimeo.com/video/165424115?autoplay=false"
data-padding-bottom="56.25%">Vimeo</a></code></pre>
<h2><a class="iframe-lightbox-link" href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/317031598&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true" data-padding-bottom="166px">SoundCloud</a></h2>
<pre><code><a
class="iframe-lightbox-link"
href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/317031598&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"
data-padding-bottom="166px">SoundCloud</a></code></pre>
<h2><a class="iframe-lightbox-link" href="https://audiomack.com/embed/song/lax/go-low" data-padding-bottom="252px" aria-hidden="true" rel="lightbox" aria-label="Ëàéòáîêñ">Audiomack</a></h2>
<pre><code><a
class="iframe-lightbox-link"
href="https://audiomack.com/embed/song/lax/go-low"
data-padding-bottom="252px">Audiomack</a></code></pre>
<h2><a class="iframe-lightbox-link" href="https://www.w3.org/" data-scrolling="true" aria-hidden="true" rel="lightbox" aria-label="Ëàéòáîêñ">Scrollable content</a></h2>
<pre><code><a
class="iframe-lightbox-link"
href="https://www.w3.org/"
data-scrolling="true">Scrollable content</a></code></pre>
<p>For those who don't use 3rd-party scripts that interfere with links behaviour and don't force <code>window.location</code> they have no need in either <code>data-touch="true"</code> or <code>{touch: true}</code>.</p>
<p>When you have scripts that interfere, then to keep lightbox working, use <code>{touch: true}</code> or <code>data-touch="true"</code>.</p>
<p><code>data-src</code> or <code>href</code> 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.</p>
<h2>Initialize</h2>
<pre><code>[].forEach.call(document.getElementsByClassName("iframe-lightbox-link"), function(el) {
el.lightbox = new IframeLightbox(el);
});</code></pre>
<h2>Tips</h2>
<p>SPA / PWA developers don't need to bother: work-related class is added to a link.</p>
<p>That way you avoid multiple assignments to a single element.</p>
<h2>Examples of event handling</h2>
<pre><code>(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 */
});
});
})("undefined" !== typeof window ? window : this, document);</code></pre>
<h2>GitHub</h2>
<p>Inspired by <a href="https://github.com/squeral/lightbox">squeral/lightbox</a></p>
<p><a href="https://github.com/englishextra/iframe-lightbox">englishextra/iframe-lightbox</a></p>
<h2>License</h2>
<p>Available under <a href="https://opensource.org/licenses/MIT">MIT License</a></p>
<a class="github-fork-ribbon right-top" href="https://github.com/englishextra/iframe-lightbox" title="Fork me on GitHub" data-ribbon="Fork me on GitHub">Fork me on GitHub</a>
<!-- <script src="./js/touch-keyboard-navigation.js"></script> -->
<script src="./js/iframe-lightbox.js"></script>
<script>
(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);
</script>
</body>
</html>