-
Notifications
You must be signed in to change notification settings - Fork 196
/
index.html
144 lines (113 loc) · 6.2 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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lity - Lightweight, accessible and responsive lightbox</title>
<meta name="description" content="Lity is a ultra-lightweight, accessible and responsive lightbox plugin which supports images, iframes and inline content out of the box.">
<link href='https://fonts.googleapis.com/css?family=Lato:400,400italic|Arvo:700,400,400italic' rel='stylesheet' type='text/css'>
<link href="assets/style.css" media="all" rel="stylesheet" type="text/css">
<link href="assets/prism.css" media="all" rel="stylesheet" type="text/css">
<link href="dist/lity.css" rel="stylesheet"/>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-34232738-1', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
</script>
</head>
<body>
<h1><a href="./">Lity</a></h1>
<h2>Lightweight, accessible and responsive lightbox.</h2>
<p class="wrap wrap-center">
<a class="btn btn-primary" href="https://github.com/jsor/lity/releases/latest">Download</a>
</p>
<div class="wrap">
<p>Lity is a ultra-lightweight, accessible and responsive lightbox plugin which supports
images, iframes and inline content out of the box.</p>
<p>Minified and gzipped, its total footprint weights about 3kB.</p>
<p>
It requires <a href="http://jquery.com">jQuery</a> or
<a href="http://zeptojs.com">Zepto</a> (with the
<a href="https://github.com/madrobby/zepto/blob/master/src/callbacks.js">callbacks</a>,
<a href="https://github.com/madrobby/zepto/blob/master/src/deferred.js">deferred</a>
and <a href="https://github.com/madrobby/zepto/blob/master/src/data.js">data</a>
modules).
</p>
<h3>Demos</h3>
<p>
<a class="btn" href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity data-lity-desc="Photo of a flower">Image</a>
<a class="btn" href="#inline" data-lity>Inline</a>
<a class="btn" href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity>Google Maps</a>
<a class="btn" href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>YouTube</a>
<a class="btn" href="//vimeo.com/1084537" data-lity>Vimeo</a>
<a class="btn" href="index.html" data-lity>URL</a>
</p>
<div id="inline" style="overflow:auto;background:#FDFDF6;padding:20px;width:600px;max-width:100%;border-radius:6px" class="lity-hide">
<form>
<fieldset style="border:0;">
<ul style="list-style:none">
<li>
<label for="input">Input</label>
<input type="text" required name="name" id="input">
</li>
<li>
<label for="textarea" style="width:100%">Textarea</label><br>
<textarea id="textarea" rows="10" style="width:100%"></textarea>
</li>
<li>
<input type="submit">
</li>
</ul>
</fieldset>
</form>
</div>
</div>
<div class="wrap">
<h3>Installation</h3>
<p>All ready-to-use files are located in the <code>dist/</code> directory.</p>
<p>Include the Lity javascript and css files and its dependencies in your HTML document:</p>
<pre><code class="language-markup"><link href="dist/lity.css" rel="stylesheet">
<script src="vendor/jquery.js"></script>
<script src="dist/lity.js"></script></code></pre>
<p>Lity can also be installed via Bower or <a href="https://www.npmjs.com/package/lity">npm</a>.</p>
</div>
<div class="wrap">
<h3>Usage</h3>
<h4>Declarative</h4>
<p>Add the <code>data-lity</code> attribute to <code><a></code> elements for which you want the links to
be opened in a lightbox:</p>
<pre><code class="language-markup"><a href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity data-lity-desc="Photo of a flower">Image</a>
<a href="#inline" data-lity>Inline</a>
<a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>iFrame Youtube</a>
<a href="//vimeo.com/1084537" data-lity>iFrame Vimeo</a>
<a href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity>Google Maps</a>
<div id="inline" style="background:#fff" class="lity-hide">
Inline content
</div></code></pre>
<p>If you want to open another URI than defined in the <code>href</code> attribute, just add a <code>data-lity-target</code> with the URI:</p>
<pre><code class="language-markup"><a href="/image.html" data-lity data-lity-target="/image-preview.jpg">Image</a>
</code></pre>
<h4>Programmatic</h4>
<p>Use the global <code>lity</code> function to open URLs (or HTML) in a lightbox or as an event handler.</p>
<pre><code class="language-javascript">// Open a URL in a lightbox
var lightbox = lity('//www.youtube.com/watch?v=XSGBVzeBUbk');
// Bind as an event handler
$(document).on('click', '[data-lightbox]', lity);</code></pre>
<p>If you want to close the opened lightbox, use <code>lightbox.close()</code>.</p>
</div>
<div class="wrap wrap-center">
<p><small>Copyright (c) 2015-<script>document.write(new Date().getFullYear());</script> Jan Sorgalla. Released under the MIT license.</small></p>
</div>
<a href="https://github.com/jsor/lity"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<script src="vendor/jquery.js"></script>
<script src="dist/lity.js"></script>
<script src="dist/plugins/googlemaps/googlemaps.js"></script>
<script src="dist/plugins/vimeo/vimeo.js"></script>
<script src="dist/plugins/youtube/youtube.js"></script>
<script src="assets/prism.js"></script>
</body>
</html>