1 | import { GalleryItem } from './lg-utils';
|
2 | import { LgQuery } from './lgQuery';
|
3 | import { LightGallery } from './lightgallery';
|
4 | import { AutoplaySettings } from './plugins/autoplay/lg-autoplay-settings';
|
5 | import { CommentSettings } from './plugins/comment/lg-comment-settings';
|
6 | import { FullscreenSettings } from './plugins/fullscreen/lg-fullscreen-settings';
|
7 | import { HashSettings } from './plugins/hash/lg-hash-settings';
|
8 | import { PagerSettings } from './plugins/pager/lg-pager-settings';
|
9 | import { RotateSettings } from './plugins/rotate/lg-rotate-settings';
|
10 | import { ShareSettings } from './plugins/share/lg-share-settings';
|
11 | import { ThumbnailsSettings } from './plugins/thumbnail/lg-thumbnail-settings';
|
12 | import { VideoSettings } from './plugins/video/lg-video-settings';
|
13 | import { ZoomSettings } from './plugins/zoom/lg-zoom-settings';
|
14 | declare type LightGalleryCoreMobileSettings = Exclude<LightGalleryCoreSettings, 'mobileSettings'>;
|
15 | export interface MobileSettings extends LightGalleryCoreMobileSettings, Partial<ZoomSettings>, Partial<ThumbnailsSettings>, Partial<VideoSettings>, Partial<AutoplaySettings>, Partial<CommentSettings>, Partial<FullscreenSettings>, Partial<HashSettings>, Partial<PagerSettings>, Partial<RotateSettings>, Partial<ShareSettings> {
|
16 | }
|
17 | export interface LightGalleryCoreStrings {
|
18 | closeGallery: string;
|
19 | toggleMaximize: string;
|
20 | previousSlide: string;
|
21 | nextSlide: string;
|
22 | download: string;
|
23 | playVideo: string;
|
24 | }
|
25 | export declare type LightGalleryAllSettings = LightGalleryCoreSettings & ZoomSettings & ThumbnailsSettings & VideoSettings & AutoplaySettings & CommentSettings & FullscreenSettings & HashSettings & PagerSettings & RotateSettings & ShareSettings;
|
26 | export declare type LightGallerySettings = Partial<LightGalleryAllSettings>;
|
27 | export interface LightGalleryCoreSettings {
|
28 | /**
|
29 | * Type of transition between images.
|
30 | */
|
31 | mode: 'lg-slide' | 'lg-fade' | 'lg-zoom-in' | 'lg-zoom-in-big' | 'lg-zoom-out' | 'lg-zoom-out-big' | 'lg-zoom-out-in' | 'lg-zoom-in-out' | 'lg-soft-zoom' | 'lg-scale-up' | 'lg-slide-circular' | 'lg-slide-circular-vertical' | 'lg-slide-vertical' | 'lg-slide-vertical-growth' | 'lg-slide-skew-only' | 'lg-slide-skew-only-rev' | 'lg-slide-skew-only-y' | 'lg-slide-skew-only-y-rev' | 'lg-slide-skew' | 'lg-slide-skew-rev' | 'lg-slide-skew-cross' | 'lg-slide-skew-cross-rev' | 'lg-slide-skew-ver' | 'lg-slide-skew-ver-rev' | 'lg-slide-skew-ver-cross' | 'lg-slide-skew-ver-cross-rev' | 'lg-lollipop' | 'lg-lollipop-rev' | 'lg-rotate' | 'lg-rotate-rev' | 'lg-tube';
|
32 | /**
|
33 | * Slide animation CSS easing property
|
34 | */
|
35 | easing: string;
|
36 | /**
|
37 | *Transition duration (in ms).
|
38 | */
|
39 | speed: number;
|
40 | /**
|
41 | * If you are using lightGallery for commercial projects, you need to purchase a commercial license
|
42 | * to get the license key. For projects that are compatible with GPLv3 license,
|
43 | * please contact us for getting a license key at <a href="mailto:contact@lightgalleryjs.com">contact@lightgalleryjs.com</a>.
|
44 | * If you want to test lightGallery before purchasing a commercial license, you can
|
45 | * use `0000-0000-000-0000` as a temporary license key
|
46 | */
|
47 | licenseKey: string;
|
48 | /**
|
49 | * Height of the gallery.
|
50 | * example '100%' , '300px'
|
51 | */
|
52 | height: string;
|
53 | /**
|
54 | * Width of the gallery.
|
55 | * example '100%' , '300px'
|
56 | */
|
57 | width: string;
|
58 | /**
|
59 | * Add custom class for gallery container
|
60 | * This can be used to set different style for different galleries
|
61 | */
|
62 | addClass: string;
|
63 | /**
|
64 | * Start animation class for the gallery.
|
65 | * @description
|
66 | * <ul>
|
67 | * <li>startClass will be empty zoomFromOrigin is true.</li>
|
68 | * <li>This can be used to change the starting effect when the image is loaded</li>
|
69 | * <li>This is also applied when navigating to new slides</li>
|
70 | * </ul>
|
71 | */
|
72 | startClass: string;
|
73 | /**
|
74 | * Enable zoom from origin effect.
|
75 | * @description You need to know the original image size upfront and provide it via data-lg-size attribute as <code> data-lg-size="1920-1280</code>"
|
76 | *
|
77 | * If you don't know, the size of a few images in the list, you can skip the data-lg-size attribute for the particular slides,
|
78 | * lightGallery will show the default animation if data-lg-size is not available
|
79 | *
|
80 | * If you are using responsive images,
|
81 | * you can pass a comma separated list of sizes combined with a max-width (up to what size the particular image should be used)
|
82 | *
|
83 | * example -
|
84 | * <code> data-lg-size="240-160-375, 400-267-480, 1600-1067"
|
85 | * data-responsive="img-240.jpg 375, img-400.jpg 480"
|
86 | * data-src="img-1600.jpg" </code>
|
87 | *
|
88 | * In the above example, upto 375 width img.240.jpg and lg-size 240-160 will be used.
|
89 | * Similarly, upto 480 pixel width size 400-267 and img-400.jpg will be used
|
90 | * And above 480, lg-size 1600-1067 and img-1600.jpg will be used
|
91 | *
|
92 | * <ul>
|
93 | * <li>At the moment, zoomFromOrigin options is supported only for image slides.</li>
|
94 | * <li>Will be false if dynamic option is enabled or galleryID found in the URL.</li>
|
95 | * <li>startClass will be empty if zoomFromOrigin is true to avoid css conflicts.</li>
|
96 | * </ul>
|
97 | */
|
98 | zoomFromOrigin: boolean;
|
99 | /**
|
100 | * Zoom from image animation duration
|
101 | */
|
102 | startAnimationDuration: number;
|
103 | /**
|
104 | * Backdrop transition duration.
|
105 | * Note - Do not change the value of backdrop via css.
|
106 | */
|
107 | backdropDuration: number;
|
108 | /**
|
109 | * Configure where the gallery should be appended.
|
110 | * Useful to create inline galleries and more
|
111 | * It is an empty string in the default settings and later assigned to document.body to avoid accessing document for SSR
|
112 | */
|
113 | container: HTMLElement | '';
|
114 | /**
|
115 | * Delay for hiding gallery controls in ms.
|
116 | * Pass <code>0</code> if you don't want to hide the controls
|
117 | */
|
118 | hideBarsDelay: number;
|
119 | /**
|
120 | * Delay in hiding controls for the first time when gallery is opened
|
121 | */
|
122 | showBarsAfter: number;
|
123 | /**
|
124 | * Delay slide transitions.
|
125 | * @description This is useful if you want to do any action in the current slide before moving to next slide.
|
126 | * <section>
|
127 | * For example, fading out the captions before going to next slide.
|
128 | * <code>.lg-slide-progress</code> class name is added to the current slide immediately after calling the slide method.
|
129 | * But transition begins only after the delay
|
130 | * </section>
|
131 | */
|
132 | slideDelay: number;
|
133 | /**
|
134 | * Support legacy browsers
|
135 | * @description Currently this is used only for adding support to srcset attribute via picturefill library
|
136 | * If true lightGallery will show warning message to include picturefill library
|
137 | */
|
138 | supportLegacyBrowser: boolean;
|
139 | /**
|
140 | * If true, toolbar, captions and thumbnails will not overlap with media element
|
141 | * This will not effect thumbnails if animateThumb is false
|
142 | * Also, toggle thumbnails button is not displayed if allowMediaOverlap is false
|
143 | * <section>
|
144 | * Note - Changing the position of the media on every slide transition creates a flickering effect.
|
145 | * Therefore, the height of the caption is calculated dynamically, only once based on the first slide caption.
|
146 | * </section>
|
147 | * <section>
|
148 | * if you have dynamic captions for each media,
|
149 | * you can provide an appropriate height for the captions via allowMediaOverlap option
|
150 | * </section>
|
151 | */
|
152 | allowMediaOverlap: boolean;
|
153 | /**
|
154 | * Video max size.
|
155 | * @description This can be over-written by passing specific size via data-lg-size attribute
|
156 | * Recommended video resolution and & aspect ratios <a href="https://support.google.com/youtube/answer/6375112">https://support.google.com/youtube/answer/6375112</a>
|
157 | */
|
158 | videoMaxSize: string;
|
159 | /**
|
160 | * Automatically load poster image for YouTube videos
|
161 | */
|
162 | loadYouTubePoster: boolean;
|
163 | /**
|
164 | * Height of the caption for calculating allowMediaOverlap positions
|
165 | * Note - this is only used to find the position of media item if allowMediaOverlap is true.
|
166 | * Not for setting height of the captions
|
167 | * Set 0 if you want to calculate the height of captions dynamically
|
168 | */
|
169 | defaultCaptionHeight: number;
|
170 | /**
|
171 | * aria-labelledby attribute fot gallery
|
172 | */
|
173 | ariaLabelledby: string;
|
174 | /**
|
175 | * aria-describedby attribute for gallery
|
176 | */
|
177 | ariaDescribedby: string;
|
178 | /**
|
179 | * Hide scrollbar when gallery is opened
|
180 | * @version V2.5.0
|
181 | */
|
182 | hideScrollbar: boolean;
|
183 | /**
|
184 | * Reset to previous scrollPosition when lightGallery is closed
|
185 | * @description By default, lightGallery doesn't hide the scrollbar for a smooth opening transition.
|
186 | * If a user changes the scroll position, lightGallery resets it to the previous value
|
187 | * @version V2.5.0
|
188 | */
|
189 | resetScrollPosition: boolean;
|
190 | /**
|
191 | * If false user won't be abel to close the gallery at all
|
192 | * This is useful for creating inline galleries.
|
193 | */
|
194 | closable: boolean;
|
195 | /**
|
196 | * allows vertical drag/swipe to close gallery
|
197 | * <code>false</code> if option <code>closable</code> is <code>false</code>
|
198 | */
|
199 | swipeToClose: boolean;
|
200 | /**
|
201 | * allows clicks on black area to close gallery.
|
202 | */
|
203 | closeOnTap: boolean;
|
204 | /**
|
205 | * If false, close button won't be displayed.
|
206 | * Useful for creating inline galleries.
|
207 | */
|
208 | showCloseIcon: boolean;
|
209 | /**
|
210 | * Show maximize icon.
|
211 | * Useful for creating inline galleries.
|
212 | */
|
213 | showMaximizeIcon: boolean;
|
214 | /**
|
215 | * If false, will disable the ability to loop back to the beginning of the gallery from the last slide.
|
216 | */
|
217 | loop: boolean;
|
218 | /**
|
219 | * Whether the LightGallery could be closed by pressing the "Esc" key.
|
220 | */
|
221 | escKey: boolean;
|
222 | /**
|
223 | * Enable keyboard navigation
|
224 | */
|
225 | keyPress: boolean;
|
226 | /**
|
227 | * Trap focus within the lightGallery
|
228 | * @version V2.5.0
|
229 | */
|
230 | trapFocus: boolean;
|
231 | /**
|
232 | * If false, prev/next buttons will not be displayed.
|
233 | */
|
234 | controls: boolean;
|
235 | /**
|
236 | * Enable slideEnd animation
|
237 | */
|
238 | slideEndAnimation: boolean;
|
239 | /**
|
240 | * If true, prev/next button will be hidden on first/last image.
|
241 | * @description Note - this option will be ignored if <code>loop</code> or <code>slideEndAnimation</code> is set to true
|
242 | */
|
243 | hideControlOnEnd: boolean;
|
244 | /**
|
245 | * ability to navigate to next/prev slides on mousewheel
|
246 | */
|
247 | mousewheel: boolean;
|
248 | /**
|
249 | * Option to get captions from alt or title tags.
|
250 | */
|
251 | getCaptionFromTitleOrAlt: boolean;
|
252 | /**
|
253 | * control where the sub-html should be appended.
|
254 | * If you choose '.lg-outer', you are responsible for placing the div at the right position.
|
255 | * '.lg-outer' is useful if you want show custom HTML outside the normal gallery
|
256 | */
|
257 | appendSubHtmlTo: '.lg-sub-html' | '.lg-item' | '.lg-outer';
|
258 | /**
|
259 | * Set to true if the selector in "data-sub-html" should use the current item as its origin.
|
260 | */
|
261 | subHtmlSelectorRelative: boolean;
|
262 | /**
|
263 | * number of preload slides
|
264 | * @description will exicute only after the current slide is fully loaded.
|
265 | * for example, if you click on 4th image and if preload = 1 then 3rd slide and 5th
|
266 | * slide will be loaded in the background after the 4th slide is fully loaded..
|
267 | * if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.
|
268 | */
|
269 | preload: number;
|
270 | /**
|
271 | * Control how many slide items should be kept in dom at a time
|
272 | * @description To improve performance by reducing number of gallery items in the dom,
|
273 | * lightGallery keeps only the lowest possible number of slides in the dom at a time.
|
274 | * This has a minimum value of 3
|
275 | */
|
276 | numberOfSlideItemsInDom: number;
|
277 | /**
|
278 | * Custom selector property instead of direct children.
|
279 | * @description Based on your markup structure, you can specify custom selectors to fetch media data for the gallery
|
280 | * Pass "this" to select same element
|
281 | * You can also pass HTMLCollection directly
|
282 | * Example - '.my-selector' | '#my-selector' | this | document.querySelectorAll('.my-selector')
|
283 | */
|
284 | selector: string | HTMLCollection[];
|
285 | /**
|
286 | * By default selector element relative to the current gallery.
|
287 | * Instead of that you can tell lightGallery to select element relative to another element.
|
288 | * Example - '.my-selector-container' | '#my-selector-container'
|
289 | * In the code this become selector = document.querySelector(this.s.selectWithin ).querySelectorAll(this.s.selector);
|
290 | */
|
291 | selectWithin: string;
|
292 | /**
|
293 | * Custom html for next control
|
294 | */
|
295 | nextHtml: string;
|
296 | /**
|
297 | * Custom html for prev control
|
298 | */
|
299 | prevHtml: string;
|
300 | /**
|
301 | * specify which slide should load initially
|
302 | */
|
303 | index: number;
|
304 | /**
|
305 | * Set width for iframe.
|
306 | */
|
307 | iframeWidth: string;
|
308 | /**
|
309 | * Set height for iframe.
|
310 | */
|
311 | iframeHeight: string;
|
312 | /**
|
313 | * Set max width for iframe.
|
314 | */
|
315 | iframeMaxWidth: string;
|
316 | /**
|
317 | * Set max height for iframe.
|
318 | */
|
319 | iframeMaxHeight: string;
|
320 | /**
|
321 | * Enable download button.
|
322 | * @description By default download url will be taken from data-src/href attribute but it supports only for modern browsers.
|
323 | * If you want you can provide another url for download via data-download-url.
|
324 | * pass false in data-download-url if you want to hide download button for the particular slide.
|
325 | */
|
326 | download: boolean;
|
327 | /**
|
328 | * Whether to show total number of images and index number of currently displayed image.
|
329 | */
|
330 | counter: boolean;
|
331 | /**
|
332 | * Where the counter should be appended
|
333 | */
|
334 | appendCounterTo: string;
|
335 | /**
|
336 | * By setting the swipeThreshold (in px) you can set how far the user must swipe for the next/prev image.
|
337 | */
|
338 | swipeThreshold: number;
|
339 | /**
|
340 | * Enables swipe support for touch devices
|
341 | */
|
342 | enableSwipe: boolean;
|
343 | /**
|
344 | * Enables desktop mouse drag support
|
345 | */
|
346 | enableDrag: boolean;
|
347 | /**
|
348 | * LightGallery can be instantiated and launched programmatically by setting this option to true and populating dynamicEl option (see below) with the definitions of images.
|
349 | */
|
350 | dynamic: boolean;
|
351 | /**
|
352 | * An array of objects (src, iframe, subHtml, thumb, poster, responsive, srcset sizes) representing gallery elements.
|
353 | */
|
354 | dynamicEl: GalleryItem[];
|
355 | /**
|
356 | * Fetch custom properties from the selector
|
357 | * @description this is useful for plugin development
|
358 | * By default lightGallery fetches and store all the props selectors to
|
359 | * reduce frequent dom interaction for fetching props every time.
|
360 | *
|
361 | * If you need any addition data to be fetched and stored in the galleryItems variable,
|
362 | * you can do this just by passing the prop names via extraProps
|
363 | * @example
|
364 | * HTML:
|
365 | * <div id="lightGallery">
|
366 | * <a href="a.jpg" data-custom-prop="abc"><img src="thumb.jpg" /></a>
|
367 | * <a href="a.jpg" data-custom-prop="xyz"><img src="thumb.jpg" /></a>
|
368 | * </div>
|
369 | * JS:
|
370 | * lightGallery(document.getElementById('lightGallery'), {
|
371 | * extraProps: ['customProp']
|
372 | * })
|
373 | * // Note - If you are using dynamic mode, you can pass any custom prop in the galleryItem
|
374 | * lightGallery(document.getElementById('lightGallery'), {
|
375 | * dynamic: true,
|
376 | * dynamicEl: [{
|
377 | * src: 'img/img1.jpg',
|
378 | * customProp:'abc',
|
379 | * }]
|
380 | * })
|
381 | *
|
382 | */
|
383 | extraProps: string[];
|
384 | /**
|
385 | * Option to fetch different thumbnail image other than first image
|
386 | * @description If you want to use external image for thumbnail,
|
387 | * add the path of that image inside "data-" attribute
|
388 | * and set value of this option to the name of your custom attribute.
|
389 | *
|
390 | * @example
|
391 | * <div id="lightGallery">
|
392 | * <a href="a.jpg" data-external-thumb-image="images/externalThumb.jpg" ><img src="thumb.jpg" /></a>
|
393 | * </div>
|
394 | *
|
395 | * lightGallery(document.getElementById('lightGallery'), {
|
396 | * exThumbImage: 'data-external-thumb-image'
|
397 | * })
|
398 | */
|
399 | exThumbImage: string;
|
400 | /**
|
401 | * Function to detect mobile devices
|
402 | */
|
403 | isMobile?: () => boolean;
|
404 | /**
|
405 | * Separate settings for mobile devices
|
406 | * @description Note - this is applied only at the time of loading
|
407 | * by default controls and close buttons are disabled on mobile devices.
|
408 | * use this options if you want to enable them or change any other settings for mobile devices
|
409 | * Note - mobileSettings does not merge default values, You need to provide all mobileSettings including default values
|
410 | */
|
411 | mobileSettings: Partial<MobileSettings>;
|
412 | /**
|
413 | * Aria label strings for lightGallery core modules.
|
414 | * @description This can be useful if you want to localize the lightGallery strings to other languages.
|
415 | * Use your own service to translate the strings and pass it via settings.strings
|
416 | * You can find dedicated strings option for all lightGallery modules in their respective documentation.
|
417 | */
|
418 | strings: LightGalleryCoreStrings;
|
419 | plugins: (new (instance: LightGallery, $LG: LgQuery) => any)[];
|
420 | }
|
421 | export declare const lightGalleryCoreSettings: LightGalleryCoreSettings;
|
422 | export {};
|
423 |
|
\ | No newline at end of file |