1 | import { lgQuery } from './lgQuery';
|
2 | import { VideoSource } from './plugins/video/types';
|
3 | import { VideoInfo } from './types';
|
4 | export interface ImageSize {
|
5 | width: number;
|
6 | height: number;
|
7 | }
|
8 | export interface ImageSources {
|
9 | media?: string;
|
10 | srcset: string;
|
11 | sizes?: string;
|
12 | type?: string;
|
13 | }
|
14 | export interface GalleryItem {
|
15 | /**
|
16 | * url of the media
|
17 | * @data-attr data-src
|
18 | */
|
19 | src?: string;
|
20 | /**
|
21 | * Source attributes for the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attributes">picture</a> element
|
22 | * @data-attr data-sources
|
23 | */
|
24 | sources?: ImageSources[];
|
25 | /**
|
26 | * Thumbnail url
|
27 | * @description By default lightGallery uses the image inside gallery selector as thumbnail.
|
28 | * But, If you want to use external image for thumbnail,
|
29 | * pass the thumbnail url via any data attribute and
|
30 | * pass the attribute name via exThumbImage option
|
31 | * @example
|
32 | * <div id="lightGallery">
|
33 | * <a href="a.jpg" data-external-thumb-image="images/externalThumb.jpg" ><img src="thumb.jpg" /></a>
|
34 | * </div>
|
35 | *
|
36 | * lightGallery(document.getElementById('lightGallery'), {
|
37 | * exThumbImage: 'data-external-thumb-image'
|
38 | * })
|
39 | * @data-attr data-*
|
40 | */
|
41 | thumb?: string;
|
42 | /**
|
43 | * alt attribute for the image
|
44 | * @data-attr alt
|
45 | */
|
46 | alt?: string;
|
47 | /**
|
48 | * Title attribute for the video
|
49 | * @data-attr title
|
50 | */
|
51 | title?: string;
|
52 | /**
|
53 | * Title for iframe
|
54 | * @data-attr data-iframe-title
|
55 | */
|
56 | iframeTitle?: string;
|
57 | /**
|
58 | * Caption for the slide
|
59 | * @description You can either pass the HTML markup or the ID or class name of the element which contains the captions
|
60 | * @data-attr data-sub-html
|
61 | */
|
62 | subHtml?: string;
|
63 | /**
|
64 | * url of the file which contain the sub html.
|
65 | * @description Note - Does not support Internet Explorer browser
|
66 | * @data-attr data-sub-html-url
|
67 | */
|
68 | subHtmlUrl?: string;
|
69 | /**
|
70 | * Video source
|
71 | * @data-attr data-video
|
72 | */
|
73 | video?: VideoSource;
|
74 | /**
|
75 | * Poster url
|
76 | * @data-attr data-poster
|
77 | */
|
78 | poster?: string;
|
79 | /**
|
80 | * Custom slide name to use in the url when hash plugin is enabled
|
81 | * @data-attr data-slide-name
|
82 | */
|
83 | slideName?: string;
|
84 | /**
|
85 | * List of images and viewport's max width separated by comma.
|
86 | * @description Ex?: img/1-375.jpg 375, img/1-480.jpg 480, img/1-757.jpg 757.
|
87 | * @data-attr data-responsive
|
88 | */
|
89 | responsive?: string;
|
90 | /**
|
91 | * srcset attribute values for the main image
|
92 | * @data-attr data-srcset
|
93 | */
|
94 | srcset?: string;
|
95 | /**
|
96 | * srcset sizes attribute for the main image
|
97 | * @data-attr data-sizes
|
98 | */
|
99 | sizes?: string;
|
100 | /**
|
101 | * Set true is you want to open your url in an iframe
|
102 | * @data-attr data-iframe
|
103 | */
|
104 | iframe?: boolean;
|
105 | /**
|
106 | * Download url for your image/video.
|
107 | * @description Pass false if you want to disable the download button.
|
108 | * @data-attr data-download-url
|
109 | */
|
110 | downloadUrl?: string | boolean;
|
111 | /**
|
112 | * Name of the file after it is downloaded.
|
113 | * @description The HTML value of the download attribute.
|
114 | * There are no restrictions on allowed values, and the browser will automatically
|
115 | * detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.).
|
116 | * <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download">More info</a>
|
117 | * @data-attr data-download
|
118 | */
|
119 | download?: string | boolean;
|
120 | /**
|
121 | * Actual size of the image in px.
|
122 | * @description This is used in zoom plugin to see the actual size of the image when double taped on the image.
|
123 | * @data-attr data-width
|
124 | */
|
125 | width?: string;
|
126 | /**
|
127 | * Facebook share URL.
|
128 | * @description Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL is taken.
|
129 | * @data-attr data-facebook-share-url
|
130 | */
|
131 | facebookShareUrl?: string;
|
132 | /**
|
133 | * Tweet text
|
134 | * @data-attr data-tweet-text
|
135 | */
|
136 | tweetText?: string;
|
137 | /**
|
138 | * Twitter share URL.
|
139 | * @description Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.
|
140 | * @data-attr data-twitter-share-url
|
141 | */
|
142 | twitterShareUrl?: string;
|
143 | /**
|
144 | * Pinterest share URL.
|
145 | * @description Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.
|
146 | * Note?: Pinterest requires absolute URL
|
147 | * @data-attr data-pinterest-share-url
|
148 | */
|
149 | pinterestShareUrl?: string;
|
150 | /**
|
151 | * Description for Pinterest post.
|
152 | * @data-attr data-pinterest-text
|
153 | */
|
154 | pinterestText?: string;
|
155 | /**
|
156 | * Facebook comments body html
|
157 | * @description Please refer <a href="https://developers.facebook.com/docs/plugins/comments/#comments-plugin">facebook official documentation</a> for generating the HTML markup
|
158 | * @example
|
159 | * <div
|
160 | * class="fb-comments"
|
161 | * data-href="https://www.lightgalleryjs.com/demos/comment-box/#facebook-comments-demo"
|
162 | * data-width="400"
|
163 | * data-numposts="5">
|
164 | * </div>
|
165 | * @data-attr data-fb-html
|
166 | */
|
167 | fbHtml?: string;
|
168 | /**
|
169 | * Disqus page identifier
|
170 | * @description Please refer official <a href="https://help.disqus.com/en/articles/1717084-javascript-configuration-variables">disqus documentation</a> for more info
|
171 | * @data-attr data-disqus-identifier
|
172 | */
|
173 | disqusIdentifier?: string;
|
174 | /**
|
175 | * Disqus page url
|
176 | * @description Please refer official <a href="https://help.disqus.com/en/articles/1717084-javascript-configuration-variables">disqus documentation</a> for more info
|
177 | * @data-attr data-disqus-url
|
178 | */
|
179 | disqusUrl?: string;
|
180 | __slideVideoInfo?: VideoInfo;
|
181 | [key: string]: any;
|
182 | }
|
183 | export declare function convertToData(attr: string): string;
|
184 | declare const utils: {
|
185 | /**
|
186 | * get possible width and height from the lgSize attribute. Used for ZoomFromOrigin option
|
187 | */
|
188 | getSize(el: HTMLElement, container: lgQuery, spacing?: number, defaultLgSize?: string | undefined): ImageSize | undefined;
|
189 | /**
|
190 | * @desc Get transform value based on the imageSize. Used for ZoomFromOrigin option
|
191 | * @param {jQuery Element}
|
192 | * @returns {String} Transform CSS string
|
193 | */
|
194 | getTransform(el: HTMLElement, container: lgQuery, top: number, bottom: number, imageSize?: ImageSize | undefined): string | undefined;
|
195 | getIframeMarkup(iframeWidth: string, iframeHeight: string, iframeMaxWidth: string, iframeMaxHeight: string, src?: string | undefined, iframeTitle?: string | undefined): string;
|
196 | getImgMarkup(index: number, src: string, altAttr: string, srcset?: string | undefined, sizes?: string | undefined, sources?: ImageSources[] | undefined): string;
|
197 | getResponsiveSrc(srcItms: string[]): string;
|
198 | isImageLoaded(img: HTMLImageElement): boolean;
|
199 | getVideoPosterMarkup(_poster: string, dummyImg: string, videoContStyle: string, playVideoString: string, _isVideo?: VideoInfo | undefined): string;
|
200 | getFocusableElements(container: HTMLElement): NodeListOf<Element>;
|
201 | /**
|
202 | * @desc Create dynamic elements array from gallery items when dynamic option is false
|
203 | * It helps to avoid frequent DOM interaction
|
204 | * and avoid multiple checks for dynamic elments
|
205 | *
|
206 | * @returns {Array} dynamicEl
|
207 | */
|
208 | getDynamicOptions(items: any, extraProps: string[], getCaptionFromTitleOrAlt: boolean, exThumbImage: string): GalleryItem[];
|
209 | isMobile(): boolean;
|
210 | /**
|
211 | * @desc Check the given src is video
|
212 | * @param {String} src
|
213 | * @return {Object} video type
|
214 | * Ex:{ youtube : ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] }
|
215 | *
|
216 | * @todo - this information can be moved to dynamicEl to avoid frequent calls
|
217 | */
|
218 | isVideo(src: string, isHTML5VIdeo: boolean, index: number): VideoInfo | undefined;
|
219 | };
|
220 | export default utils;
|