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 picture 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 *
* * 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.). * More info * @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 facebook official documentation for generating the HTML markup * @example *