-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
137 lines (128 loc) · 6.75 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
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lightbox.js - A simple and easily customizable lightbox plugin.</title>
<link href="assets/dist/css/main.css" rel="stylesheet">
<link href="lightbox/lightbox.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="canonical" href="https://victordiego.com/lightbox/">
<meta name="title" content="Lightbox.js">
<meta name="description" content="Lightbox.js is a simple, lightweight and easily customizable lightbox plugin built with Javascript and CSS which suports images, videos (Vimeo/Youtube) and inline content.">
<meta name="keywords" content="lightbox, plugin, javascript, responsive, lightweight">
<meta name="thumbnail" content="https://victordiego.com/lightbox/assets/dist/img/lightbox-thumbnail.jpg">
<meta property="og:title" content="Lightbox.js">
<meta property="og:description" content="Lightbox.js is a simple, lightweight and easily customizable lightbox plugin built with Javascript and CSS which suports images, videos (Vimeo/Youtube) and inline content.">
<meta property="og:image" content="https://victordiego.com/lightbox/assets/dist/img/lightbox-thumbnail.jpg">
<meta property="og:type" content="website">
<meta property="og:locale" content="pt_br">
<meta property="og:site_name" content="Lightbox.js">
<meta property="og:url" content="https://victordiego.com/lightbox/">
<meta name="twitter" content="Lightbox.js" />
<meta name="twitter:description" content="Lightbox.js is a simple, lightweight and easily customizable lightbox plugin built with Javascript and CSS which suports images, videos (Vimeo/Youtube) and inline content.">
<meta name="twitter:image" content="https://victordiego.com/lightbox/assets/dist/img/lightbox-thumbnail.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@victordieggo">
</head>
<body>
<header class="header text-light align-center relative">
<h1>Lightbox.js</h1>
<p class="text-block title-6 spacer-top-05 spacer-bottom-10">
A simple and easily customizable lightbox plugin.
</p>
<a class="btn" href="https://github.com/victordieggo/lightbox.js/releases/latest" target="_blank">
Download
</a>
<a class="btn btn-outline smooth-scroll" href="#get-started" data-scroll>
Get started
</a>
</header>
<main class="container block">
<section id="get-started" class="section">
<h2 class="title-5">Get started</h2>
<br/>
<p class="text-block">Everything you'll need is located under the lightbox/ directory. Include the javascript and css files in your HTML document and you're all set up:</p>
<br/>
<script src="https://gist.github.com/victordieggo/1f2226d8328f878586e366639d0e7fb9.js"></script>
</section>
<section id="usage" class="section">
<h2 class="title-5">Usage</h2>
<br/>
<p class="text-block">Add the <span class="code">data-lightbox</span> attribute to an <span class="code"><a></span> tag and set its <span class="code">href</span> to the content you want to be opened in the lightbox. When opening an image, you can send its alt text using the <span class="code">data-image-alt</span> attribute:</p>
<br/>
<div class="examples">
<a class="btn" href="assets/dist/img/image-1.png" data-lightbox data-image-alt="Image 1">
Image
</a>
<a class="btn" href="#modal" data-lightbox>
Modal
</a>
<a class="btn" href="https://vimeo.com/83897470" data-lightbox>
Vimeo
</a>
<a class="btn" href="youtube.com/watch?v=Xyu_MdKBXic" data-lightbox>
Youtube
</a>
<div id="modal" hidden>
<div class="modal-content bg-light pad-15">
<h3>Welcome!</h3>
<p class="spacer-bottom-10">Sign in to your account.</p>
<form action="/lightbox.js" method="post">
<input class="input full-width spacer-bottom-10" type="email" name="email" placeholder="e-mail account">
<input class="input full-width spacer-bottom-10" type="password" name="password" placeholder="password">
<input class="btn" type="submit" name="submit" value="Sign In">
</form>
</div>
</div>
</div>
<br/>
<script src="https://gist.github.com/victordieggo/a1dea4bf30ebfaf5ef6608e5333066a5.js"></script>
<br/>
<p>If you prefer, you can also trigger the lightbox programmatically:</p>
<br/>
<script src="https://gist.github.com/victordieggo/4147d9040841b37efdb54c6b3ed869ed.js"></script>
<br/>
<button class="btn trigger-lightbox">
Open Modal
</button>
</section>
<section id="gallery" class="section">
<h2 class="title-5">Gallery</h2>
<br/>
<p class="text-block">
Set the <span class="code">data-lightbox</span> attribute to <span class="code">"gallery"</span> on all <span class="code"><a></span> tags under the same parent element and any previous or next items will be found automatically:</p>
<br/>
<div class="image-gallery">
<div class="image-gallery--item vcenter">
<a href="assets/dist/img/image-1.png" data-lightbox="gallery" data-image-alt="Image 1">
<img class="vcenter" src="assets/dist/img/thumbnail-gallery.png" alt="Alt Text" />
</a>
</div>
<div class="image-gallery--item vcenter">
<a href="assets/dist/img/image-2.png" data-lightbox="gallery" data-image-alt="Image 2">
<img class="vcenter" src="assets/dist/img/thumbnail-gallery.png" alt="Alt Text" />
</a>
</div>
<div class="image-gallery--item vcenter">
<a href="assets/dist/img/image-3.png" data-lightbox="gallery" data-image-alt="Image 3">
<img class="vcenter" src="assets/dist/img/thumbnail-gallery.png" alt="Alt Text" />
</a>
</div>
<div class="image-gallery--item vcenter">
<a href="assets/dist/img/image-4.png" data-lightbox="gallery" data-image-alt="Image 4">
<img class="vcenter" src="assets/dist/img/thumbnail-gallery.png" alt="Alt Text" />
</a>
</div>
</div>
<br/>
<script src="https://gist.github.com/victordieggo/b2fe992b7722e4d5b66aaa4106763935.js"></script>
</section>
</main>
<footer class="footer text-light align-center pad-20">
Built by <a href="https://victordiego.com/" target="_blank">Victor Diego</a> under the <a href="https://victordieggo.mit-license.org/" target="_blank">MIT license</a>.
</footer>
<script src="assets/dist/js/main.js"></script>
<script src="lightbox/lightbox.min.js"></script>
</body>
</html>