-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
279 lines (272 loc) · 11.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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!doctype html>
<head>
<meta charset="utf-8">
<title>React-Images</title>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="keywords" content="react,reactjs,react component,lightbox,react lightbox,react images,image,images,ui,javascript">
<meta name="description" content="A simple, responsive Lightbox component for displaying an array of images.">
<meta property="og:locale" content="en-us">
<meta property="og:title" content="React-Images">
<meta property="og:description" content="A simple, responsive Lightbox component for displaying an array of images.">
<meta property="og:url" content="https://jossmac.github.io/react-images">
<meta property="og:site_name" content="React-Images">
<meta property="og:type" content="article">
<link rel="stylesheet" href="example.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="page-wrapper">
<div class="container">
<nav class="left-col">
<ul class="page-nav">
<li class="page-nav__item">
<a class="page-nav__link" href="#examples">Examples</a>
</li>
<li class="page-nav__item">
<a class="page-nav__link" href="#getting-started">Getting started</a>
</li>
<li class="page-nav__item">
<a class="page-nav__link" href="#options">Options</a>
</li>
<li class="page-nav__item">
<a class="page-nav__link" href="#license">License</a>
</li>
<li class="page-nav__item">
<a class="page-nav__link" href="#help">Help</a>
</li>
</ul>
</nav>
<div class="right-col">
<div class="page-content">
<header class="page-header">
<h1 class="page-header__title">React Images</h1>
<p class="page-header__subtitle">A simple, responsive Lightbox component for <a href="http://facebook.github.io/react/" target="_blank">ReactJS</a> to display an array of images.</p>
</header>
<div class="page-subheader">
<a href="http://github.com/jossmac/react-images" class="page-subheader__link" target="_blank">Code and Docs on GitHub</a>
<span class="page-subheader__button">
<a id="github-stars-button" class="github-button" data-style="" href="https://github.com/jossmac/react-images" data-count-href="/jossmac/react-images/stargazers" data-count-api="/repos/jossmac/react-images#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star jossmac/react-images on GitHub">Star</a>
</span>
</div>
<div class="page-body">
<section id="examples" class="section-examples">
<h2>Examples</h2>
<div id="example"></div>
</section>
<section id="getting-started" class="section-getting-started">
<h2>Getting Started</h2>
<p>1. Install using yarn:</p>
<pre>yarn add react-images</pre>
<p>… or npm:</p>
<pre>npm install react-images --save</pre>
<p>2. Example usage with JSX:</p>
<pre><code><Lightbox
images={[
{ src: '../images/photo-1.jpg' },
{ src: '../images/photo-2.jpg' }
]}
isOpen={this.state.lightboxIsOpen}
onClickPrev={this.gotoPrevLightboxImage}
onClickNext={this.gotoNextLightboxImage}
onClose={this.closeLightbox}
/></code></pre>
</section>
<section id="options" class="section-options">
<h2>Options</h2>
<div class="options-table-container">
<table class="options-table">
<thead>
<tr>
<th align="left">Property</th>
<th align="left">Type</th>
<th align="left">Default</th>
<th align="left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">backdropClosesModal</td>
<td align="left">bool</td>
<td align="left">false</td>
<td align="left">Allow users to exit the lightbox by clicking the backdrop</td>
</tr>
<tr>
<td align="left">currentImage</td>
<td align="left">number</td>
<td align="left">0</td>
<td align="left">The index of the image to display initially</td>
</tr>
<tr>
<td align="left">customControls</td>
<td align="left">array</td>
<td align="left">undefined</td>
<td align="left">An array of elements to display as custom controls on the top of lightbox</td>
</tr>
<tr>
<td align="left">enableKeyboardInput</td>
<td align="left">bool</td>
<td align="left">true</td>
<td align="left">Supports keyboard input - <code>esc</code>, <code>arrow left</code>, and <code>arrow right</code></td>
</tr>
<tr>
<td align="left"><a href="#images">images</a></td>
<td align="left">array</td>
<td align="left">undefined</td>
<td align="left">Required. An array of objects containing valid src and srcset values of img element</td>
</tr>
<tr>
<td align="left">imageCountSeparator</td>
<td align="left">string</td>
<td align="left">' of '</td>
<td align="left">Custom separator for the image count</td>
</tr>
<tr>
<td align="left">isOpen</td>
<td align="left">bool</td>
<td align="left">false</td>
<td align="left">Whether or not the lightbox is displayed</td>
</tr>
<tr>
<td align="left">onClickPrev</td>
<td align="left">func</td>
<td align="left">undefined</td>
<td align="left">Fired on request of the previous image</td>
</tr>
<tr>
<td align="left">onClickNext</td>
<td align="left">func</td>
<td align="left">undefined</td>
<td align="left">Fired on request of the next image</td>
</tr>
<tr>
<td align="left">onClickImage</td>
<td align="left">func</td>
<td align="left">undefined</td>
<td align="left">Handle click event on the current image</td>
</tr>
<tr>
<td align="left">onClickThumbnail</td>
<td align="left">func</td>
<td align="left">undefined</td>
<td align="left">Handle click on thumbnail</td>
</tr>
<tr>
<td align="left">onClose</td>
<td align="left">func</td>
<td align="left">undefined</td>
<td align="left">Required. Handle closing of the lightbox</td>
</tr>
<tr>
<td align="left">preloadNextImage</td>
<td align="left">bool</td>
<td align="left">true</td>
<td align="left">Based on the direction the user is navigating, preload the next available image.</td>
</tr>
<tr>
<td align="left">preventScroll</td>
<td align="left">bool</td>
<td align="left">true</td>
<td align="left">Determines whether scrolling is prevented</td>
</tr>
<tr>
<td align="left">showCloseButton</td>
<td align="left">bool</td>
<td align="left">true</td>
<td align="left">Optionally display a close "X" button in top right corner</td>
</tr>
<tr>
<td align="left">showImageCount</td>
<td align="left">bool</td>
<td align="left">true</td>
<td align="left">Optionally display image index, e.g., "3 of 20"</td>
</tr>
<tr>
<td align="left">showThumbnails</td>
<td align="left">bool</td>
<td align="left">false</td>
<td align="left">Optionally display thumbnails beneath the Lightbox</td>
</tr>
<tr>
<td align="left">theme</td>
<td align="left">object</td>
<td align="left">undefined</td>
<td align="left">Pass through styles to theme each component; <code>arrow</code>, <code>container</code>, etc.</td>
</tr>
<tr>
<td align="left">width</td>
<td align="left">number</td>
<td align="left">1024</td>
<td align="left">Maximum width of the carousel; defaults to 1024px</td>
</tr>
</tbody>
</table>
</div>
<h2>Images</h2>
<div class="options-table-container" id="images">
<table class="options-table">
<thead>
<tr>
<th align="left">Property</th>
<th align="left">Type</th>
<th align="left">Default</th>
<th align="left">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">src</td>
<td align="left">string</td>
<td align="left">undefined</td>
<td align="left">Required. The primary image path</td>
</tr>
<tr>
<td align="left">srcset</td>
<td align="left">array</td>
<td align="left">undefined</td>
<td align="left">List of alternative image sizes</td>
</tr>
<tr>
<td align="left">caption</td>
<td align="left">string</td>
<td align="left">undefined</td>
<td align="left">Displayed benath the current image. Great for description or attribution</td>
</tr>
<tr>
<td align="left">thumbnail</td>
<td align="left">string</td>
<td align="left">undefined</td>
<td align="left">Thumbnail to display if <code>showThumbnails</code> is set to <code>true</code></td>
</tr>
</tbody>
</table>
</div>
</section>
<section id="license" class="section-license">
<h2>License</h2>
<p>React Images is free to use for personal and commercial projects under <a target="_blank" href="https://github.com/jossmac/react-images/blob/master/LICENSE">the MIT license</a>.</p>
<p>Attribution is not required, but greatly appreciated. It does not have to be user-facing and can remain within the code.</p>
</section>
<section id="help" class="section-help">
<h2>Help</h2>
<h3>Have a question?</h3>
<p>Follow the <a target="_blank" href="https://github.com/jossmac/react-images#quick-start">quick start guide</a> on GitHub to get up and running quickly. Please do not use Github Issues to report personal support requests.</p>
<h3>Found a bug?</h3>
<p>If you find a bug, please read the <a target="_blank" href="https://github.com/jossmac/react-images/blob/master/CONTRIBUTING.md">Contribution Guildelines</a> before you <a target="_blank" href="https://github.com/jossmac/react-images/issues">report the issue</a>.</p>
</section>
</div>
</div>
</div>
<footer class="page-footer">
<span class="page-footer__copyright--small">Copyright </span>
<span class="page-footer__copyright--large">© </span>
<a target="_blank" href="https://twitter.com/jossmackison" target="_blank">Joss Mackison</a> 2016
</footer>
</div>
</div>
<script>
document.getElementById('github-stars-button').dataset.style = window.innerWidth > 480 ? 'mega': null;
</script>
<script src="common.js"></script>
<script src="app.js"></script>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
</body>