README.md — Responsive Lightbox & Gallery 2.5.3

responsive-lightbox / assets / featherlight / README.md

responsive-lightbox / assets / featherlight Last commit date

LICENSE 4 years ago README.md 1 year ago featherlight.css 4 years ago featherlight.gallery.css 4 years ago featherlight.gallery.js 5 years ago featherlight.gallery.min.css 4 years ago featherlight.gallery.min.js 4 years ago featherlight.js 4 years ago featherlight.min.css 4 years ago featherlight.min.js 4 years ago

README.md

511 lines

1	Featherlight - ultra slim jQuery lightbox [](https://travis-ci.org/noelboss/featherlight![Build Status](https://travis-ci.org/noelboss/featherlight.svg?branch=master)](https://travis-ci.org/noelboss/featherlight](https://travis-ci.org/noelboss/featherlight)
2	------------------------
3
4	Featherlight is a very lightweight jQuery lightbox plugin. For more information and demos, visit the [](https://www.noevu.ch/featherlight-js-the-ultra-slim-lightbox/official website](https://www.noevu.ch/featherlight-js-the-ultra-slim-lightbox/](https://www.noevu.ch/featherlight-js-the-ultra-slim-lightbox/).
5
6	* Simple yet flexible
7	* Image, Ajax, iFrame and custom content support
8	* [](https://github.com/noelboss/featherlight/#featherlight-galleryGallery Extension](https://github.com/noelboss/featherlight/#featherlight-gallery](https://github.com/noelboss/featherlight/#featherlight-gallery)
9	* Minimal CSS
10	* Name-spaced CSS and JavaScript
11	* Responsive
12	* Accessible
13	* Customizable via javascript or attributes
14
15
16
17	## [](https://github.com/noelboss/featherlight/archive/v.1.7.14.zip» Download Current Release 1.7.14](https://github.com/noelboss/featherlight/archive/v.1.7.14.zip](https://github.com/noelboss/featherlight/archive/v.1.7.14.zip)
18
19	Here you'll find a [](https://github.com/noelboss/featherlight/blob/master/CHANGELOG.mdlist of all the changes](https://github.com/noelboss/featherlight/blob/master/CHANGELOG.md](https://github.com/noelboss/featherlight/blob/master/CHANGELOG.md) and you can also download [](https://github.com/noelboss/featherlight/releasesold releases](https://github.com/noelboss/featherlight/releases](https://github.com/noelboss/featherlight/releases) or [](https://github.com/noelboss/featherlight/archive/master.zipthe master including all the latest bling](https://github.com/noelboss/featherlight/archive/master.zip](https://github.com/noelboss/featherlight/archive/master.zip).
20
21
22	# Installation
23
24	All styling is done using CSS so you'll want to include the Featherlight CSS in your head.
25
26	<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />
27
28	Be aware that Featherlight uses very unspecific CSS selectors to help you overwrite every aspect. This means in turn, that if you're not following a modularized approach to write CSS (which you should! It's terrific!) and have many global and specific definitions (read ID's and such – which you shouldn't), these definitions can break the Featherlight styling.
29
30	Featherlight requires jQuery version 1.7.0 or higher (regular version, not the slim one). It's recommended to include the javascript at the bottom of the page before the closing `</body>` tag.
31
32	<script src="//code.jquery.com/jquery-latest.js"></script>
33	<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
34
35
36	# Usage
37
38	By default, featherlight acts on all elements using the 'data-featherlight' attribute. An element with this attribute triggers the lightbox. The value of the attribute acts as selector for an element that's opened as lightbox.
39
40	<a href="#" data-featherlight="#mylightbox">Open element in lightbox</a>
41	<div id="mylightbox">This div will be opened in a lightbox</div>
42
43	Featherlight is smart. 'data-featherlight' can also contain a link to an image, an ajax-url or even DOM code:
44
45	<a href="#" data-featherlight="myimage.png">Open image in lightbox</a>
46	<a href="#" data-featherlight="myhtml.html .selector">Open ajax content in lightbox</a>
47	<a href="#" data-featherlight="<p>Fancy DOM Lightbox!</p>">Open some DOM in lightbox</a>
48
49	it also works with links using href and the "image" and "ajax" keywords (this can also be manually set with the configuration options like `{image: 'photo.jpg'}` or `{type: 'image'}`):
50
51	<a href="myimage.png" data-featherlight="image">Open image in lightbox</a>
52	<a href="myhtml.html .selector" data-featherlight="ajax">Open ajax content in lightbox</a>
53	<a href="#" data-featherlight-ajax="myhtml.html .selector">Open ajax content in lightbox</a>
54	<a href="#" data-featherlight="myhtml.html .selector" data-featherlight-type="ajax">Open ajax content in lightbox</a>
55
56	By default, Featherlight initializes all elements matching `$.featherlight.autoBind` on document ready. If you want to prevent this, set `$.featherlight.autoBind` to `false` before the DOM is ready.
57
58	## Bind Featherlight
59	You can bind the Featherlight events on any element using the following code:
60
61	$('.myElement').featherlight($content, configuration);
62
63	It will then look for the `targetAttr` (by default "data-featherlight") on this element and use its value to find the content that will be opened as lightbox when you click on the element.
64
65	*$content* – jQuery Object or String: You can manually pass a jQuery object or a string (see [](#content-filterscontent filters](#content-filters](#content-filters)) to be opened in the lightbox. Optional
66
67	*configuration* – Object: Object to configure certain aspects of the plugin. See [](#configurationConfiguration](#configuration](#configuration). Optional
68
69	## Manual calling of Featherlight
70	In cases where you don't want an Element to act as Trigger you can call Featherlight manually. You can use this for example in an ajax callback to display the response data.
71
72	$.featherlight($content, configuration);
73
74	*$content* – jQuery Object or String: You can manually pass a jQuery object or a string (see [](#content-filterscontent filters](#content-filters](#content-filters)) to be opened in the lightbox. Optional
75
76	*configuration* – Object: Object to configure certain aspects of the plugin. See [](#configurationConfiguration](#configuration](#configuration). Optional
77
78	# Configuration
79
80	Featherlight comes with a bunch of configuration-options which make it very flexible.
81	These options can be passed when calling `featherlight`.
82	Alternatively, they can specified as attribute on the elements triggering the lightbox;
83	for example, `<a data-featherlight-close-on-esc="false" ...>` has the same effect as
84	passing `{closeOnEsc: false}`.
85	You can also modify the `$.featherlight.defaults` directly which holds all the defaults:
86
87	```javascript
88	/* you can access and overwrite all defaults using $.featherlight.defaults */
89	defaults: {
90	namespace: 'featherlight', /* Name of the events and css class prefix */
91	targetAttr: 'data-featherlight', /* Attribute of the triggered element that contains the selector to the lightbox content */
92	variant: null, /* Class that will be added to change look of the lightbox */
93	resetCss: false, /* Reset all css */
94	background: null, /* Custom DOM for the background, wrapper and the closebutton */
95	openTrigger: 'click', /* Event that triggers the lightbox */
96	closeTrigger: 'click', /* Event that triggers the closing of the lightbox */
97	filter: null, /* Selector to filter events. Think $(...).on('click', filter, eventHandler) */
98	root: 'body', /* A selector specifying where to append featherlights */
99	openSpeed: 250, /* Duration of opening animation */
100	closeSpeed: 250, /* Duration of closing animation */
101	closeOnClick: 'background', /* Close lightbox on click ('background', 'anywhere', or false) */
102	closeOnEsc: true, /* Close lightbox when pressing esc */
103	closeIcon: '✕', /* Close icon */
104	loading: '', /* Content to show while initial content is loading */
105	persist: false, /* If set, the content will persist and will be shown again when opened again. 'shared' is a special value when binding multiple elements for them to share the same content */
106	otherClose: null, /* Selector for alternate close buttons (e.g. "a.close") */
107	beforeOpen: $.noop, /* Called before open. can return false to prevent opening of lightbox. Gets event as parameter, this contains all data */
108	beforeContent: $.noop, /* Called when content is about to be presented. `this` is the featherlight instance. Gets event as parameter */
109	beforeClose: $.noop, /* Called before close. can return false to prevent closing of lightbox. `this` is the featherlight instance. Gets event as parameter */
110	afterOpen: $.noop, /* Called after open. `this` is the featherlight instance. Gets event as parameter */
111	afterContent: $.noop, /* Called after content is ready and has been set. Gets event as parameter, this contains all data */
112	afterClose: $.noop, /* Called after close. `this` is the featherlight instance. Gets event as parameter */
113	onKeyUp: $.noop, /* Called on key up for the frontmost featherlight */
114	onResize: $.noop, /* Called after new content and when a window is resized */
115	type: null, /* Specify content type. If unset, it will check for the targetAttrs value. */
116	contentFilters: ['jquery', 'image', 'html', 'ajax', 'text'] /* List of content filters to use to determine the content */
117	jquery/image/html/ajax/text: undefined /* Specify content type and data */
118	}
119	```
120
121	================================================
122
123	namespace – String: 'featherlight'
124	All functions bound to elements are namespaced. This is also used to prefix all CSS classes for the background, the content-wrapper and the close button.
125
126
127	================================================
128
129	targetAttr – String: 'data-featherlight'
130	Attribute on the triggering element pointing to the target element or content that will be opened in the lightbox.
131
132	================================================
133
134	variant – String: null
135	Pass your own CSS class to adjust the styling of the lightbox according to your need.
136
137
138	================================================
139
140	resetCss – Boolean: false
141	Set this to true to remove all default css and start from designing scratch.
142
143	================================================
144
145
146	openTrigger & closeTrigger – String: 'click'
147	Events that are used to open or close the lightbox. The close event is bound to the close button and to the lightbox background (if enabled).
148	Has no effect if $.featherlight is called directly.
149
150	================================================
151
152	filter - String: null
153	A selector to filter events, when calling `featherlight` on a jQuery set, in a similar fashion to `$(...).on('click', filter, eventHandler)`.
154
155	Attributes both the selector and the filtered element are taken into account.
156
157	In the following example, the first link will make an ajax request while the second will display the text "second".
158
159	<div data-featherlight data-featherlight-filter="a"
160	data-featherlight-type="ajax">
161	<a href="first">Hello</a>
162	<a href="second" data-featherlight-type="text">World</a>
163	</div>
164
165	================================================
166
167	root - String: 'body'
168	This selector specified where the featherlight should be appended.
169
170	================================================
171
172	openSpeed & closeSpeed – Integer or String: 250
173	Defines the speed for the opening and close animations. Values allowed are [](http://api.jquery.com/animate/#durationjQuery animation durations](http://api.jquery.com/animate/#duration](http://api.jquery.com/animate/#duration). Avoid the usage of 0 since this would cause a reversal of time and the end of the world! (Okay, kidding, just the closing callback would not be fired and unused ghost-DOM would linger around, but still.)
174
175
176	================================================
177
178	closeOnClick – 'background', 'anywhere' or false
179	If set, the close event is also bound to the either the background only or anywhere
180
181	================================================
182
183	closeOnEsc – Boolean: true
184	If true, the lightbox is closed when pressing the ESC key
185
186	================================================
187
188	closeIcon – String: '✕';
189	Oh the naming...
190
191	================================================
192
193	loading – String: '';
194	Shown initially while content loads. The lightbox also has a class '.featherlight-loading' while content is loading. This makes it easy to specify a "Loading..." message or a spinner.
195
196	================================================
197
198	persist - Boolean or 'shared': false;
199	If set, the content will persist and will be shown again when opened again.
200	In case where multiple buttons need to persist the same content, use the special value 'shared'.
201	The content filter `jquery` (used for links like `.some-class` or `#some-id`) will clone the given content if and only if it is not persisted. Otherwise it will be moved into the lightbox.
202
203	================================================
204
205	otherClose - String: null
206	While the close icon generated by featherlight will have class 'featherlight-close', you may specify alternate selector for other buttons having the same effect in your dialog, for example "a:contains('Cancel')".
207
208	================================================
209
210	background – DOM String: null
211	You can provide the wrapping DOM. This is a bit tricky and just for the advanced users. It's recommended to study the plugin code. But you need to provide an element with a "{namespace}-inner" class: the content of the lightbox will replace this element. It is recommended that instead of providing this option you modify the lightbox on `beforeOpen` or `afterOpen`.
212
213
214	================================================
215
216	beforeOpen, beforeClose – Function: null
217	Called before the open or close method is executed. This function can return false to prevent open or
218	close method from execution. `this` is an object and contains the triggering DOM element (if existing) and the related Featherlight objects.
219
220	// example
221	beforeOpen: function(event){
222	console.log(this); // this contains all related elements
223	return false; // prevent lightbox from opening
224	}
225
226
227	================================================
228
229	beforeContent, afterContent – Function: null
230	Called before and after the loading of the content. For ajax calls or images, there can be a significant delay, for inline content the two calls will occur one right after the other. It receives the event object. `this` is an object and contains the triggering DOM element (if existing) and the related Featherlight objects.
231
232	================================================
233
234	afterOpen, afterClose – Function: null
235	Called after the open or close method is executed – it is not called, if the `before-` or `open` function returns `false`! It receives the event object. `this` is an object and contains the triggering DOM element (if existing) and the related Featherlight objects.
236
237	// example
238	afterOpen: function(event){
239	console.log(this); // this contains all related elements
240	alert(this.$content.hasClass('true')); // alert class of content
241	}
242
243	================================================
244
245	onKeyUp, onResize – Function: null
246	The function receives the event object. `this` is an object and contains the triggering DOM element (if existing) and the related Featherlight objects.
247
248	================================================
249
250	type – String: null
251
252	The type object allows you to manually set what type the lightbox is. Set the value to 'image', 'ajax' or any of the content filters. Otherwise, the value from targetAttr will used be to determine the type of the lightbox. Example:
253
254	$('.image-lightbox').featherlight({type: 'image'});
255
256
257	# Methods
258
259	`$.featherlight` is actually a constructor of new featherlight objects. Modify `$.featherlight.prototype` to change the default properties, or use the `configuration` object passed to the constructor to override the properties of that specific new instance.
260
261	It's possible to use or change these methods, but the API isn't guaranteed to remain constant; enquire if you have particular needs.
262
263	var current = $.featherlight.current();
264	current.close();
265	// do something else
266	current.open(); // reopen it
267
268	Check the source code for more details.
269
270	# Globals
271
272	`$.featherlight` has the following globals:
273
274	autoBind: '[data-featherlight]' /* Will automatically bind elements matching this selector. Clear or set before onReady */
275	current: function() /* returns the currently opened featherlight, or undefined */
276	close: function() /* closes the currently opened featherlight (if any) */
277
278	# Content Filters
279
280	There are many ways to specify content to featherlight. Featherlight uses a set of heuristics to determine the type, for example data ending with `.gif` will be assumed to be an image. The following are equivalent:
281
282	<a href="#" data-featherlight="photo.gif">See in a lightbox</a>
283
284	<a href="photo.gif" data-featherlight>See in a lightbox</a>
285
286	<a id="#example" href="#">See in a lightbox</a>
287	<script>$('#example').featherlight('photo.gif');</script>
288
289	In case the heuristic wouldn't work, you can specify which contentFilter to use:
290
291	<a href="photo_without_extension" data-featherlight="image">See in a lightbox</a>
292
293	<a id="force_as_image" href="photo_without_extension">See in a lightbox</a>
294	<script>
295	$('#force_as_image').featherlight('image');
296	// Equivalent:
297	$('#force_as_image').featherlight({type: {image: true}});
298	</script>
299
300	<a id="force_as_image2" href="#">See in a lightbox</a>
301	<script>$('#force_as_image2').featherlight('photo_without_extension', {type:{image: true}});</script>
302
303	You can add your own heuristics, for example:
304
305	$.featherlight.contentFilters.feed = {
306	regex: /^feed:/,
307	process: function(url) { /* deal with url */ return $('Loading...'); }
308	};
309	$.featherlight.defaults.contentFilters.unshift('feed');
310
311	This way the following would be possible:
312
313	<a href="feed://some_url" data-featherlight>See the feed in a lightbox</a>
314
315	The content filter 'text' needs to be specified explicitly, it has no heuristic attached to it:
316
317	<a href="Hello, world" data-featherlight="text">Example</a>
318
319	# Examples
320
321	## Use link-hashtags to open lightbox
322	<a href="#targetElement" class="fl">Open</a>
323	<div id="targetElement">Lightbox</div>
324
325	$('a.fl').featherlight({
326	targetAttr: 'href'
327	});
328
329	## Open images with Featherlight
330	Use a link and point the data-featherlight attribute to the desired attribute which contains the link...
331
332	<a href="myimage.jpg" data-featherlight="image">Open Image</a>
333
334	...or directly provide the link as the data-featherlight attribute:
335
336	<a href="#" data-featherlight="myimage.jpg">Open Image</a>
337
338	## Open lightbox with ajax content
339	Use Featherlight with ajax using 'ajax' keyword or providing a url. It even supports selecting elements inside the response document.
340
341	<a href="url.html .jQuery-Selector" data-featherlight="ajax">Open Ajax Content</a>
342
343	or you can provide the link directly as the featherlight-attribute:
344
345	<a href="#" data-featherlight="url.html .jQuery-Selector">Open Ajax Content</a>
346
347	## Open lightbox with iframe
348	Featherlight generates an iframe with the 'iframe' keyword and a given URL.
349	The default size of the iframe is very small (300 x 150).
350
351	<a href="http://www.example.com" data-featherlight="iframe">Open example.com in an iframe</a>
352
353	Options:
354	You can use the following iframe attributes:
355	`
356	allow, allowfullscreen, frameborder, height, longdesc, marginheight, marginwidth, mozallowfullscreen, name, referrerpolicy, sandbox, scrolling, src, srcdoc, style, webkitallowfullscreen, width
357	`
358
359	For example, to set the height and width, you would use
360
361	data-featherlight-iframe-height="640" data-featherlight-iframe-width="480"
362
363	or to set some css style:
364
365	data-featherlight-iframe-style="border:none"
366
367	You can also set the iframe attributes `iframeWidth`, `iframeMinWidth` etc. using JavaScript:
368
369	$.featherlight({iframe: 'editor.html', iframeMaxWidth: '80%', iframeWidth: 500,
370	iframeHeight: 300});
371
372	## Open YouTube video with Featherlight
373	Featherlight generates an iframe that contains the embedded video.
374
375	Display a clickable thumbnail image that opens a video with a fixed size of 640 x 480 and automatically start playback:
376	`
377	<a href="http://www.youtube.com/embed/f0BzD1zCye0?rel=0&autoplay=1" data-featherlight="iframe" data-featherlight-iframe-width="640" data-featherlight-iframe-height="480" data-featherlight-iframe-frameborder="0" data-featherlight-iframe-allow="autoplay; encrypted-media" data-featherlight-iframe-allowfullscreen="true">
378	<img src="http://img.youtube.com/vi/f0BzD1zCye0/0.jpg" alt="" />
379	</a>
380	`
381
382	A text link that opens a video in a lightbox that is stretched to 85% height and width of the viewport:
383	`
384	<a href="http://www.youtube.com/embed/f0BzD1zCye0?rel=0&autoplay=1" data-featherlight="iframe" data-featherlight-iframe-frameborder="0" data-featherlight-iframe-allow="autoplay; encrypted-media" data-featherlight-iframe-allowfullscreen="true" data-featherlight-iframe-style="display:block;border:none;height:85vh;width:85vw;">My video</a>
385	`
386
387	A link that opens a video in a lightbox that fills 100% of the window:
388	Note: the "close" icon is not visible so this example is not user-friendly.
389	`
390	<a href="http://www.youtube.com/embed/f0BzD1zCye0?rel=0&autoplay=1" data-featherlight="iframe" data-featherlight-iframe-frameborder="0" data-featherlight-iframe-allow="autoplay; encrypted-media" data-featherlight-iframe-allowfullscreen="true"
391	data-featherlight-iframe-style="position:fixed;background:#000;border:none;top:0;right:0;bottom:0;left:0;width:100%;height:100%;">My video</a>
392	`
393
394	# IE8 background transparency
395	If you want the background in IE8 to be translucent, use data:image before the rgba background:
396
397	background: url(data:image/png;base64,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TUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDEzLTExLTA2VDIyOjExOjgxPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5QaXhlbG1hdG9yIDMuMDwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpDb21wcmVzc2lvbj41PC90aWZmOkNvbXByZXNzaW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4xPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+NzI8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4xMDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOkNvbG9yU3BhY2U+MTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTA8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KbQS91AAAAB1JREFUGBljZGBgOA7EBAETQRVQBaMK8YYU0cEDAE1HANt9zybzAAAAAElFTkSuQmCC);
398	background: rgba(0, 0, 0, 0.8);
399
400	---
401
402	# Featherlight Gallery
403	You will need to use an extension (featherlight.gallery.js). Since Featherlight was created to be as small and simple as possible, it has selected functionality, and allows you to add additional functionality by using extensions. featherlight.gallery.js is a small extension that turns your set of links into a [](http://noelboss.github.io/featherlight/gallery.htmlgallery](http://noelboss.github.io/featherlight/gallery.html](http://noelboss.github.io/featherlight/gallery.html).
404
405	## Gallery installation
406
407	Simply include the extension CSS and JavaScript Files after the regular featherlight files like this:
408
409	<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />
410	<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />
411
412	Add the JavaScript at the bottom of the body:
413
414	```html
415	<script src="//code.jquery.com/jquery-latest.js"></script>
416	<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
417	<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.gallery.min.js" type="text/javascript" charset="utf-8"></script>
418	```
419
420	Check out the example here: [](gallery.htmlGallery with Featherlight](gallery.html](gallery.html)
421
422
423	## Gallery configuration
424
425	The gallery also has a range of configuration options and the following defaults:
426
427
428	```javascript
429	$('a.gallery').featherlightGallery({
430	previousIcon: '◀', /* Code that is used as previous icon */
431	nextIcon: '▶', /* Code that is used as next icon */
432	galleryFadeIn: 100, /* fadeIn speed when slide is loaded */
433	galleryFadeOut: 300 /* fadeOut speed before slide is loaded */
434	});
435	```
436
437
438	It also overrides its `autoBind` global option:
439
440	```javascript
441	autoBind: '[data-featherlight-gallery]' /* Will automatically bind elements matching this selector. Clear or set before onReady */
442	```
443
444	Example in pure HTML:
445
446	```html
447	<section
448	data-featherlight-gallery
449	data-featherlight-filter="a"
450	>
451	<h>This is a gallery</h>
452	<a href="photo_large.jpg"><img src="photo_thumbnail.jpg"></a>
453	<a href="other_photo_large.jpg"><img src="other_photo_thumbnail.jpg"></a>
454	</section>
455	```
456
457	Example in JavaScript (assuming there are `a` tags of class `gallery` in the page):
458
459	```javascript
460	$('a.gallery').featherlightGallery({
461	previousIcon: '«',
462	nextIcon: '»',
463	galleryFadeIn: 300,
464
465	openSpeed: 300
466	});
467	```
468
469	The gallery responds to custom events `previous` and `next` to navigate to the previous and next images.
470
471	Instead of navigation buttons it will use swipe events on touch devices, assuming that one of the [](https://github.com/noelboss/featherlight/wiki/Gallery:-swipe-on-touch-devicessupported swipe libraries](https://github.com/noelboss/featherlight/wiki/Gallery:-swipe-on-touch-devices](https://github.com/noelboss/featherlight/wiki/Gallery:-swipe-on-touch-devices) is also installed.
472
473	It sets the classes `'featherlight-first-slide'` and `'featherlight-last-slide'` if the current slide is the first and/or last one.
474
475	## Gallery installation
476
477	Simply include the extension CSS and JavaScript Files after the regular featherlight files like this:
478
479	<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />
480	<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />
481	<script src="//code.jquery.com/jquery-latest.js"></script>
482	<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
483	<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.gallery.min.js" type="text/javascript" charset="utf-8"></script>
484
485	## Gallery on Mobile Devices
486	To support mobile/tablet and all touch devices, you will need to include one of the [](https://github.com/noelboss/featherlight/wiki/Gallery:-swipe-on-touch-devicessupported swipe libraries](https://github.com/noelboss/featherlight/wiki/Gallery:-swipe-on-touch-devices](https://github.com/noelboss/featherlight/wiki/Gallery:-swipe-on-touch-devices). For example, to use `swipe_detect` library, include it in the header:
487
488	```html
489	<script src="//cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.1/jquery.detect_swipe.min.js"></script>
490	```
491
492
493	# Support
494
495	## Questions
496
497	For questions, please use [](http://stackoverflow.com/questions/askStack Overflow](http://stackoverflow.com/questions/ask](http://stackoverflow.com/questions/ask) and be sure to use the `featherlight.js` tag. Please provide an example, starting for example from [](http://jsfiddle.net/JNsu6/15/this jsfiddle](http://jsfiddle.net/JNsu6/15/](http://jsfiddle.net/JNsu6/15/)
498
499	## Reporting bugs and issues
500
501	If you believe you've found a bug, please open an issue on [](https://github.com/noelboss/featherlight/issues/newGithub](https://github.com/noelboss/featherlight/issues/new](https://github.com/noelboss/featherlight/issues/new) and provide an example starting from [](http://jsfiddle.net/JNsu6/15/this jsfiddle](http://jsfiddle.net/JNsu6/15/](http://jsfiddle.net/JNsu6/15/).
502
503	## Pull requests
504
505	Pull requests are welcome (good tips can be found on [](http://stackoverflow.com/questions/14680711/how-to-do-a-github-pull-requestStack Overflow](http://stackoverflow.com/questions/14680711/how-to-do-a-github-pull-request](http://stackoverflow.com/questions/14680711/how-to-do-a-github-pull-request))
506
507	To run the tests, you can open `test/featherlight.html` or `test/featherlight_gallery.html` in your browser.
508	Alternatively, run them from the console with `grunt test`; you will need to run `npm install` the first time.
509
510	©️ [](https://www.noevu.ch/#entwicklungNoevu - Schweizer KMU Webseiten Entwicklung](https://www.noevu.ch/#entwicklung](https://www.noevu.ch/#entwicklung)
511