Skip to content

Commit bc5b920

Browse files
author
ben
committed
-redundant docs, now points to gh page.
1 parent 8fb8708 commit bc5b920

File tree

1 file changed

+1
-310
lines changed

1 file changed

+1
-310
lines changed

‎examples/index.html

+1-310
Original file line numberDiff line numberDiff line change
@@ -79,316 +79,7 @@ <h2>
7979
);</pre></div>
8080

8181

82-
83-
<h2><a id="user-content-image-options" class="anchor" href="#image-options" aria-hidden="true"></a>Image Options</h2>
84-
85-
<table><thead>
86-
<tr>
87-
<th align="left">Property</th>
88-
<th align="left">Type</th>
89-
<th align="left">Default</th>
90-
<th align="left">Description</th>
91-
</tr>
92-
</thead><tbody>
93-
<tr>
94-
<td align="left">src</td>
95-
<td align="left">string</td>
96-
<td align="left">undefined</td>
97-
<td align="left">Required. A string referring to any valid image resource (file, url, etc).</td>
98-
</tr>
99-
<tr>
100-
<td align="left">thumbnail</td>
101-
<td align="left">string</td>
102-
<td align="left">undefined</td>
103-
<td align="left">Required. A string referring to any valid image resource (file, url, etc).</td>
104-
</tr>
105-
<tr>
106-
<td align="left">thumbnailWidth</td>
107-
<td align="left">number</td>
108-
<td align="left">undefined</td>
109-
<td align="left">Required. Width of the thumbnail image.</td>
110-
</tr>
111-
<tr>
112-
<td align="left">thumbnailHeight</td>
113-
<td align="left">number</td>
114-
<td align="left">undefined</td>
115-
<td align="left">Required. Height of the thumbnail image.</td>
116-
</tr>
117-
<tr>
118-
<td align="left">tags</td>
119-
<td align="left">array</td>
120-
<td align="left">undefined</td>
121-
<td align="left">Optional. An array of objects containing tag attributes (value and title). e.g. <code>{value: "foo", title: "bar"}</code></td>
122-
</tr>
123-
<tr>
124-
<td align="left">isSelected</td>
125-
<td align="left">bool</td>
126-
<td align="left">undefined</td>
127-
<td align="left">Optional. The selected state of the image.</td>
128-
</tr>
129-
<tr>
130-
<td align="left">caption</td>
131-
<td align="left">string</td>
132-
<td align="left">undefined</td>
133-
<td align="left">Optional. Image caption.</td>
134-
</tr>
135-
<tr>
136-
<td align="left">srcset</td>
137-
<td align="left">array</td>
138-
<td align="left">undefined</td>
139-
<td align="left">Optional. Array of srcsets for lightbox.</td>
140-
</tr>
141-
<tr>
142-
<td align="left">customOverlay</td>
143-
<td align="left">element</td>
144-
<td align="left">undefined</td>
145-
<td align="left">Optional. A custom element to be rendered as a thumbnail overlay on hover.</td>
146-
</tr>
147-
148-
</tbody></table>
149-
150-
<h2><a id="user-content-gallery-options" class="anchor" href="#gallery-options" aria-hidden="true"></a>Gallery Options</h2>
151-
152-
<table><thead>
153-
<tr>
154-
<th align="left">Property</th>
155-
<th align="left">Type</th>
156-
<th align="left">Default</th>
157-
<th align="left">Description</th>
158-
</tr>
159-
</thead><tbody>
160-
<tr>
161-
<td align="left">images</td>
162-
<td align="left">array</td>
163-
<td align="left">undefined</td>
164-
<td align="left">Required. An array of objects containing image properties (see Image Options above).</td>
165-
</tr>
166-
<tr>
167-
<td align="left">enableImageSelection</td>
168-
<td align="left">bool</td>
169-
<td align="left">true</td>
170-
<td align="left">Optional. Allow images to be selectable. Setting this option to <code>false</code> whilst supplying images with <code>isSelected: true</code> will result in those images being permanently selected.</td>
171-
</tr>
172-
<tr>
173-
<td align="left">onSelectImage</td>
174-
<td align="left">func</td>
175-
<td align="left">undefined</td>
176-
<td align="left">Optional. Function to execute when an image is selected. Optional args: index (index of selected image in images array), image (the selected image). This function is only executable when <code>enableImageSelection: true</code>.</td>
177-
</tr>
178-
<tr>
179-
<td align="left">rowHeight</td>
180-
<td align="left">number</td>
181-
<td align="left">180</td>
182-
<td align="left">Optional. The height of each row in the gallery.</td>
183-
</tr>
184-
<tr>
185-
<td align="left">maxRows</td>
186-
<td align="left">number</td>
187-
<td align="left">undefined</td>
188-
<td align="left">Optional. The maximum number of rows to show in the gallery.</td>
189-
</tr>
190-
<tr>
191-
<td align="left">margin</td>
192-
<td align="left">number</td>
193-
<td align="left">2</td>
194-
<td align="left">Optional. The margin around each image in the gallery.</td>
195-
</tr>
196-
<tr>
197-
<td align="left">enableLightbox</td>
198-
<td align="left">bool</td>
199-
<td align="left">true</td>
200-
<td align="left">Optional. Enable lightbox display of full size image when thumbnail clicked.</td>
201-
</tr>
202-
<tr>
203-
<td align="left">onClickThumbnail</td>
204-
<td align="left">func</td>
205-
<td align="left">openLightbox</td>
206-
<td align="left">Optional. Function to execute when gallery thumbnail clicked. Optional args: index (index of selected image in images array), event (the click event). Overrides openLightbox.</td>
207-
</tr>
208-
<tr>
209-
<td align="left">lightboxWillOpen</td>
210-
<td align="left">func</td>
211-
<td align="left">undefined</td>
212-
<td align="left">Optional. Function to be called before opening lightbox. Optional arg: index (index of selected image in images array).</td>
213-
</tr>
214-
<tr>
215-
<td align="left">lightboxWillClose</td>
216-
<td align="left">func</td>
217-
<td align="left">undefined</td>
218-
<td align="left">Optional. Function to be called before closing lightbox.</td>
219-
</tr>
220-
<tr>
221-
<td align="left">tagStyle</td>
222-
<td align="left">object</td>
223-
<td align="left">tagStyle</td>
224-
<td align="left">Optional. Style to pass to tag elements. Overrides internal tag style.</td>
225-
</tr>
226-
</tbody></table>
227-
228-
<h2><a id="user-content-lightbox-options" class="anchor" href="#lightbox-options" aria-hidden="true"></a>Lightbox Options</h2>
229-
230-
<p>NOTE: these options are passed inside the Gallery tag.</p>
231-
232-
<p>e.g.</p>
233-
234-
<div class="highlight highlight-source-js"><pre><span class="pl-k">&lt;</span>Gallery images<span class="pl-k">=</span>{<span class="pl-c1">IMAGES</span>} backdropClosesModal<span class="pl-k">=</span>{<span class="pl-c1">true</span>}<span class="pl-k">/</span><span class="pl-k">&gt;</span></pre></div>
235-
236-
<table><thead>
237-
<tr>
238-
<th align="left">Property</th>
239-
<th align="left">Type</th>
240-
<th align="left">Default</th>
241-
<th align="left">Description</th>
242-
</tr>
243-
</thead><tbody>
244-
<tr>
245-
<td align="left">backdropClosesModal</td>
246-
<td align="left">bool</td>
247-
<td align="left">false</td>
248-
<td align="left">Optional. Allow users to exit the lightbox by clicking the backdrop.</td>
249-
</tr>
250-
<tr>
251-
<td align="left">currentImage</td>
252-
<td align="left">number</td>
253-
<td align="left">0</td>
254-
<td align="left">Optional. The index of the image to display initially (only relevant when used in conjunction with <code>isOpen: true</code> property).</td>
255-
</tr>
256-
<tr>
257-
<td align="left">preloadNextImage</td>
258-
<td align="left">bool</td>
259-
<td align="left">true</td>
260-
<td align="left">Optional. Based on the direction the user is navigating, preload the next available image.</td>
261-
</tr>
262-
<tr>
263-
<td align="left">customControls</td>
264-
<td align="left">array</td>
265-
<td align="left">undefined</td>
266-
<td align="left">Optional. An array of elements to display as custom controls on the top of lightbox.</td>
267-
</tr>
268-
<tr>
269-
<td align="left">enableKeyboardInput</td>
270-
<td align="left">bool</td>
271-
<td align="left">true</td>
272-
<td align="left">Optional. Supports keyboard input - <code>esc</code>, <code>arrow left</code>, and <code>arrow right</code>.</td>
273-
</tr>
274-
<tr>
275-
<td align="left">imageCountSeparator</td>
276-
<td align="left">string</td>
277-
<td align="left">' of '</td>
278-
<td align="left">Optional. Customize separator in the image count.</td>
279-
</tr>
280-
<tr>
281-
<td align="left">isOpen</td>
282-
<td align="left">bool</td>
283-
<td align="left">false</td>
284-
<td align="left">Optional. Whether or not the lightbox is displayed when gallery first rendered (can be used in conjunction with <code>currentImage</code> property, otherwise the first image will be diplayed).</td>
285-
</tr>
286-
<tr>
287-
<td align="left">showCloseButton</td>
288-
<td align="left">bool</td>
289-
<td align="left">true</td>
290-
<td align="left">Optional. Display a close "X" button in top right corner.</td>
291-
</tr>
292-
<tr>
293-
<td align="left">showImageCount</td>
294-
<td align="left">bool</td>
295-
<td align="left">true</td>
296-
<td align="left">Optional. Display image index, e.g., "3 of 20".</td>
297-
</tr>
298-
<tr>
299-
<td align="left">onClickImage</td>
300-
<td align="left">func</td>
301-
<td align="left">onClickImage</td>
302-
<td align="left">Optional. Function to execute when lightbox image clicked. Overrides internal implementation of onClickImage.</td>
303-
</tr>
304-
<tr>
305-
<td align="left">onClickPrev</td>
306-
<td align="left">func</td>
307-
<td align="left">onClickPrev</td>
308-
<td align="left">Optional. Function to execute when lightbox left arrow clicked. Overrides internal implementation of onClickPrev.</td>
309-
</tr>
310-
<tr>
311-
<td align="left">onClickNext</td>
312-
<td align="left">func</td>
313-
<td align="left">onClickNext</td>
314-
<td align="left">Optional. Function to execute when lightbox right arrow clicked. Overrides internal implementation of onClickNext.</td>
315-
</tr>
316-
<tr>
317-
<td align="left">showLightboxThumbnails</td>
318-
<td align="left">bool</td>
319-
<td align="left">false</td>
320-
<td align="left">Optional. Display thumbnails beneath the Lightbox image.</td>
321-
</tr>
322-
<tr>
323-
<td align="left">onClickLightboxThumbnail</td>
324-
<td align="left">func</td>
325-
<td align="left">gotoImage</td>
326-
<td align="left">Optional. Function to execute when lightbox thumbnail clicked. Overrides internal function: gotoImage.</td>
327-
</tr>
328-
<tr>
329-
<td align="left">theme</td>
330-
<td align="left">object</td>
331-
<td align="left">undefined</td>
332-
<td align="left">Optional. Pass through styles to theme each component; <code>arrow</code>, <code>container</code>, etc.</td>
333-
</tr>
334-
<tr>
335-
<td align="left">lightboxWidth</td>
336-
<td align="left">number</td>
337-
<td align="left">1024</td>
338-
<td align="left">Optional. Maximum width of the lightbox carousel; defaults to 1024px.</td>
339-
</tr>
340-
</tbody></table>
341-
342-
<h3>
343-
<a id="general-notes" class="anchor" href="#general-notes" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>General Notes</h3>
344-
345-
<ul>
346-
<li><p>As the inspiration for this component comes from <a href="https://photos.google.com/">Google Photos</a>, very small thumbnails may not be the most aesthetically pleasing due to the border size applied when selected. A sensible rowHeight default of 180px has been chosen, but rowHeights down to 100px are still reasonable.</p></li>
347-
<li><p>Gallery width is determined by the containing element.</p></li>
348-
<li><p>Image Options: <code>thumbnail</code> can point to the same resource as <code>src</code>, bearing in mind the resultant data size of the gallery and page load cost. Thumbnails of whatever size will be scaled to match <code>rowHeight</code>.</p></li>
349-
</ul>
350-
351-
<ul>
352-
<li>If you don't know your <code>thumbnailWidth</code> and <code>thumbnailHeight</code> values, you can find these out using any number of <a href="http://stackoverflow.com/a/1944298">javascript hacks</a>, bearing in mind the load penalty associated with these methods.</li>
353-
</ul>
354-
355-
<h3>
356-
<a id="license" class="anchor" href="#license" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>License</h3>
357-
358-
<p>React Grid Gallery is free to use for personal and commercial projects under the <a href="https://github.com/benhowell/react-grid-gallery/blob/master/LICENSE">MIT License</a>. Attribution is not required, but appreciated.</p>
359-
360-
361-
362-
<h3>
363-
<a id="acknowledgements" class="anchor" href="#acknowledgements" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Acknowledgements</h3>
364-
365-
<ul>
366-
<li><p>Visual design inspired by <a href="https://photos.google.com/">Google Photos</a>.</p></li>
367-
<li><p>Thumbnail viewport implementation inspired by <a href="http://fmaul.de/gallery-grid-example/">GPlusGallery</a> by Florian Maul.</p></li>
368-
<li><p>Backend lightbox functionality via <a href="https://github.com/jossmac/react-images">React Images</a> by <a href="https://github.com/jossmac">jossmac</a>.</p></li>
369-
370-
<li><p>The following gallery functions were obtained from the <a href="https://github.com/jossmac/react-images/blob/b85bd83ae651d0fd373bb495ac88670ee4dfadab/examples/src/components/Gallery.js">React Images example</a> demo: closeLightbox, gotoNext, gotoPrevious, handleClickImage, openLightbox.</p></li>
371-
372-
<li><p><a href="https://github.com/cust0dian">cust0dian</a> for critical bug fixes in <a href="https://github.com/benhowell/react-grid-gallery/pull/6">PR 6</a> and <a href="https://github.com/benhowell/react-grid-gallery/pull/7">PR 7</a>.</p></li>
373-
374-
<li><p><a href="https://github.com/ValYouW">ValYouW</a> for lightboxWillOpen and lightBoxWillClose functionality: <a href="https://github.com/benhowell/react-grid-gallery/pull/20">PR 20</a> and customOverlay option: <a href="https://github.com/benhowell/react-grid-gallery/pull/22">PR 22</a>.</p></li>
375-
376-
<li><p><a href="https://github.com/danalloway">danalloway</a> for theme pass-through prop <a href="https://github.com/benhowell/react-grid-gallery/pull/27">PR 27</a>.</p></li>
377-
378-
379-
<li><p>Demo stock photos:</p>
380-
381-
<ul>
382-
<li><a href="http://designerspics.com">Jeshu John - designerspics.com</a></li>
383-
<li><a href="http://gratisography.com">Gratisography</a></li>
384-
<li><a href="http://isorepublic.com">Tom Eversley - isorepublic.com</a></li>
385-
<li><a href="http://jeshoots.com">Jan Vasek - jeshoots.com</a></li>
386-
<li><a href="http://moveast.me">moveast.me</a></li>
387-
<li><a href="http://unsplash.com">贝莉儿 NG. - unsplash.com</a></li>
388-
<li><a href="/benhowell/react-grid-gallery/blob/master/unsplash.com">Matthew Wiebe. - unsplash.com</a></li>
389-
</ul>
390-
</li>
391-
</ul>
82+
<h2><a href="https://github.com/benhowell/react-grid-gallery#image-options">See the documentation for all available options</a></h2>
39283

39384

39485
<h2>Examples</h2>

0 commit comments

Comments
 (0)