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