-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
131 lines (131 loc) · 9.77 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
<!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>img-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/img-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">img-lightbox Demo</h1>
<p>Responsive no-jQuery pure JS/CSS Lightbox for images, no dependencies, 10kb unminified source code, with demo</p>
<h2>Demo</h2>
<p>
<a href="https://codepen.io/englishextra/full/YLQxRp/">codepen</a>
<a href="https://fiddle.jshell.net/englishextra/8hhpbv4h/show/">jsfiddle</a>
<a href="https://output.jsbin.com/laxudog">jsbin</a>
</p>
<h2>Features</h2>
<ul>
<li>Simple initialization</li>
<li>SPA / PWA friendly: prevents multiple same events assigning</li>
<li>Debounced launch, default 500ms, custom rate can be set with rate 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/img-lightbox@latest/js/img-lightbox.min.js</code>
<br />
<code>https://cdn.jsdelivr.net/gh/englishextra/img-lightbox@latest/css/img-lightbox.min.css</code>
</p>
<h4>unpkg</h4>
<p>
<code>https://unpkg.com/img-lightbox@latest/js/img-lightbox.js</code>
<br />
<code>https://unpkg.com/img-lightbox@latest/css/img-lightbox.css</code>
</p>
<h2>Install</h2>
<h4>npm</h4>
<p>
<code>npm install img-lightbox</code>
</p>
<h2>Setup</h2>
<p><code>class</code> is required, and can be any class name you choose (in this demo it's "img-lightbox-link").</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 image.</p>
<h2><a href="https://farm1.staticflickr.com/955/27854475488_5f82a379ca_z.jpg" class="img-lightbox-link" aria-hidden="true" rel="lightbox" aria-label="Ëàéòáîêñ"><img src="https://farm1.staticflickr.com/955/27854475488_5f82a379ca_z.jpg" alt="Image Lightbox" /></a></h2>
<pre><code><a href="https://farm1.staticflickr.com/955/27854475488_5f82a379ca_z.jpg"
class="img-lightbox-link"
aria-hidden="true"
rel="lightbox"><img src="https://farm1.staticflickr.com/955/27854475488_5f82a379ca_z.jpg" alt="Image Lightbox" /></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> (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>
<p><code>data-src</code> or <code>href</code> doesn't matter.</p>
<h2>Initialize</h2>
<pre><code>imgLightbox("img-lightbox-link");</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){
"use strict";
if (root.imgLightbox) {
imgLightbox("img-lightbox-link", {
onCreated: function () {
/* show your preloader */
},
onLoaded: function () {
/* hide your preloader */
},
onError: function () {
/* hide your preloader */
},
onClosed: function () {
/* hide your preloader */
},
rate: 500 /* default: 500 */
});
}
})("undefined" !== typeof window ? window : this);</code></pre>
<h2>GitHub</h2>
<p><a href="https://github.com/englishextra/img-lightbox">englishextra/img-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/img-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/img-lightbox.js"></script>
<script>
(function(root) {
"use strict";
if (root.imgLightbox) {
imgLightbox("img-lightbox-link", {
onCreated: function() {
/* show your preloader */
},
onLoaded: function() {
/* hide your preloader */
},
onError: function() {
/* hide your preloader */
},
onClosed: function() {
/* hide your preloader */
},
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);
</script>
</body>
</html>