221 lines
7.9 KiB
TypeScript
221 lines
7.9 KiB
TypeScript
import { lgQuery } from './lgQuery';
|
|
import { VideoSource } from './plugins/video/types';
|
|
import { VideoInfo } from './types';
|
|
export interface ImageSize {
|
|
width: number;
|
|
height: number;
|
|
}
|
|
export interface ImageSources {
|
|
media?: string;
|
|
srcset: string;
|
|
sizes?: string;
|
|
type?: string;
|
|
}
|
|
export interface GalleryItem {
|
|
/**
|
|
* url of the media
|
|
* @data-attr data-src
|
|
*/
|
|
src?: string;
|
|
/**
|
|
* Source attributes for the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#attributes">picture</a> element
|
|
* @data-attr data-sources
|
|
*/
|
|
sources?: ImageSources[];
|
|
/**
|
|
* Thumbnail url
|
|
* @description By default lightGallery uses the image inside gallery selector as thumbnail.
|
|
* But, If you want to use external image for thumbnail,
|
|
* pass the thumbnail url via any data attribute and
|
|
* pass the attribute name via exThumbImage option
|
|
* @example
|
|
* <div id="lightGallery">
|
|
* <a href="a.jpg" data-external-thumb-image="images/externalThumb.jpg" ><img src="thumb.jpg" /></a>
|
|
* </div>
|
|
*
|
|
* lightGallery(document.getElementById('lightGallery'), {
|
|
* exThumbImage: 'data-external-thumb-image'
|
|
* })
|
|
* @data-attr data-*
|
|
*/
|
|
thumb?: string;
|
|
/**
|
|
* alt attribute for the image
|
|
* @data-attr alt
|
|
*/
|
|
alt?: string;
|
|
/**
|
|
* Title attribute for the video
|
|
* @data-attr title
|
|
*/
|
|
title?: string;
|
|
/**
|
|
* Title for iframe
|
|
* @data-attr data-iframe-title
|
|
*/
|
|
iframeTitle?: string;
|
|
/**
|
|
* Caption for the slide
|
|
* @description You can either pass the HTML markup or the ID or class name of the element which contains the captions
|
|
* @data-attr data-sub-html
|
|
*/
|
|
subHtml?: string;
|
|
/**
|
|
* url of the file which contain the sub html.
|
|
* @description Note - Does not support Internet Explorer browser
|
|
* @data-attr data-sub-html-url
|
|
*/
|
|
subHtmlUrl?: string;
|
|
/**
|
|
* Video source
|
|
* @data-attr data-video
|
|
*/
|
|
video?: VideoSource;
|
|
/**
|
|
* Poster url
|
|
* @data-attr data-poster
|
|
*/
|
|
poster?: string;
|
|
/**
|
|
* Custom slide name to use in the url when hash plugin is enabled
|
|
* @data-attr data-slide-name
|
|
*/
|
|
slideName?: string;
|
|
/**
|
|
* List of images and viewport's max width separated by comma.
|
|
* @description Ex?: img/1-375.jpg 375, img/1-480.jpg 480, img/1-757.jpg 757.
|
|
* @data-attr data-responsive
|
|
*/
|
|
responsive?: string;
|
|
/**
|
|
* srcset attribute values for the main image
|
|
* @data-attr data-srcset
|
|
*/
|
|
srcset?: string;
|
|
/**
|
|
* srcset sizes attribute for the main image
|
|
* @data-attr data-sizes
|
|
*/
|
|
sizes?: string;
|
|
/**
|
|
* Set true is you want to open your url in an iframe
|
|
* @data-attr data-iframe
|
|
*/
|
|
iframe?: boolean;
|
|
/**
|
|
* Download url for your image/video.
|
|
* @description Pass false if you want to disable the download button.
|
|
* @data-attr data-download-url
|
|
*/
|
|
downloadUrl?: string | boolean;
|
|
/**
|
|
* Name of the file after it is downloaded.
|
|
* @description The HTML value of the download attribute.
|
|
* There are no restrictions on allowed values, and the browser will automatically
|
|
* detect the correct file extension and add it to the file (.img, .pdf, .txt, .html, etc.).
|
|
* <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download">More info</a>
|
|
* @data-attr data-download
|
|
*/
|
|
download?: string | boolean;
|
|
/**
|
|
* Actual size of the image in px.
|
|
* @description This is used in zoom plugin to see the actual size of the image when double taped on the image.
|
|
* @data-attr data-width
|
|
*/
|
|
width?: string;
|
|
/**
|
|
* Facebook share URL.
|
|
* @description Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL is taken.
|
|
* @data-attr data-facebook-share-url
|
|
*/
|
|
facebookShareUrl?: string;
|
|
/**
|
|
* Tweet text
|
|
* @data-attr data-tweet-text
|
|
*/
|
|
tweetText?: string;
|
|
/**
|
|
* Twitter share URL.
|
|
* @description Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.
|
|
* @data-attr data-twitter-share-url
|
|
*/
|
|
twitterShareUrl?: string;
|
|
/**
|
|
* Pinterest share URL.
|
|
* @description Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.
|
|
* Note?: Pinterest requires absolute URL
|
|
* @data-attr data-pinterest-share-url
|
|
*/
|
|
pinterestShareUrl?: string;
|
|
/**
|
|
* Description for Pinterest post.
|
|
* @data-attr data-pinterest-text
|
|
*/
|
|
pinterestText?: string;
|
|
/**
|
|
* Facebook comments body html
|
|
* @description Please refer <a href="https://developers.facebook.com/docs/plugins/comments/#comments-plugin">facebook official documentation</a> for generating the HTML markup
|
|
* @example
|
|
* <div
|
|
* class="fb-comments"
|
|
* data-href="https://www.lightgalleryjs.com/demos/comment-box/#facebook-comments-demo"
|
|
* data-width="400"
|
|
* data-numposts="5">
|
|
* </div>
|
|
* @data-attr data-fb-html
|
|
*/
|
|
fbHtml?: string;
|
|
/**
|
|
* Disqus page identifier
|
|
* @description Please refer official <a href="https://help.disqus.com/en/articles/1717084-javascript-configuration-variables">disqus documentation</a> for more info
|
|
* @data-attr data-disqus-identifier
|
|
*/
|
|
disqusIdentifier?: string;
|
|
/**
|
|
* Disqus page url
|
|
* @description Please refer official <a href="https://help.disqus.com/en/articles/1717084-javascript-configuration-variables">disqus documentation</a> for more info
|
|
* @data-attr data-disqus-url
|
|
*/
|
|
disqusUrl?: string;
|
|
__slideVideoInfo?: VideoInfo;
|
|
[key: string]: any;
|
|
}
|
|
export declare function convertToData(attr: string): string;
|
|
declare const utils: {
|
|
/**
|
|
* get possible width and height from the lgSize attribute. Used for ZoomFromOrigin option
|
|
*/
|
|
getSize(el: HTMLElement, container: lgQuery, spacing?: number, defaultLgSize?: string | undefined): ImageSize | undefined;
|
|
/**
|
|
* @desc Get transform value based on the imageSize. Used for ZoomFromOrigin option
|
|
* @param {jQuery Element}
|
|
* @returns {String} Transform CSS string
|
|
*/
|
|
getTransform(el: HTMLElement, container: lgQuery, top: number, bottom: number, imageSize?: ImageSize | undefined): string | undefined;
|
|
getIframeMarkup(iframeWidth: string, iframeHeight: string, iframeMaxWidth: string, iframeMaxHeight: string, src?: string | undefined, iframeTitle?: string | undefined): string;
|
|
getImgMarkup(index: number, src: string, altAttr: string, srcset?: string | undefined, sizes?: string | undefined, sources?: ImageSources[] | undefined): string;
|
|
getResponsiveSrc(srcItms: string[]): string;
|
|
isImageLoaded(img: HTMLImageElement): boolean;
|
|
getVideoPosterMarkup(_poster: string, dummyImg: string, videoContStyle: string, playVideoString: string, _isVideo?: VideoInfo | undefined): string;
|
|
getFocusableElements(container: HTMLElement): NodeListOf<Element>;
|
|
/**
|
|
* @desc Create dynamic elements array from gallery items when dynamic option is false
|
|
* It helps to avoid frequent DOM interaction
|
|
* and avoid multiple checks for dynamic elments
|
|
*
|
|
* @returns {Array} dynamicEl
|
|
*/
|
|
getDynamicOptions(items: any, extraProps: string[], getCaptionFromTitleOrAlt: boolean, exThumbImage: string): GalleryItem[];
|
|
isMobile(): boolean;
|
|
/**
|
|
* @desc Check the given src is video
|
|
* @param {String} src
|
|
* @return {Object} video type
|
|
* Ex:{ youtube : ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] }
|
|
*
|
|
* @todo - this information can be moved to dynamicEl to avoid frequent calls
|
|
*/
|
|
isVideo(src: string, isHTML5VIdeo: boolean, index: number): VideoInfo | undefined;
|
|
};
|
|
export default utils;
|