-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
132 lines (101 loc) · 5.41 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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lity - Lightweight responsive lightbox</title>
<meta name="description" content="Lity is a ultra-lightweight 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 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 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 2kB.</p>
<p>It works with <a href="http://jquery.com">jQuery</a> and <a href="http://zeptojs.com">Zepto</a>.</p>
<h3>Demos</h3>
<p>
<a class="btn" href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity>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>iFrame Youtube</a>
<a class="btn" href="//vimeo.com/1084537" data-lity>iFrame Vimeo</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>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>
<h4>Programmatic</h4>
<p>First create a lity instance:</p>
<pre><code class="language-javascript">var lightbox = lity();</code></pre>
<p><code>lightbox</code> is now a function which can be either used directly to open links in a lightbox or as an event handler:</p>
<pre><code class="language-javascript">// Open a URL in a lightbox
lightbox('//www.youtube.com/watch?v=XSGBVzeBUbk');
// Bind as an event handler
$(document).on('click', '[data-lightbox]', lightbox);</code></pre>
<p>If you want to close the currently opened lightbox, use <code>lightbox.close()</code>.</p>
</div>
<div class="wrap wrap-center">
<p><small>Copyright (c) <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="assets/prism.js"></script>
</body>
</html>