Features Supported by lightgallery
built-in plugins and a modular design.
very well suited to touch-based devices.
Desktops that enable mouse drag.
Double-click or double-tap the image to see it in its full size.
YouTube Vimeo videos on Wistia and HTML5 Support.
Over 20 Hardware
CSS3 transitions that are accelerated.
Pinch to zoom in or out.
Drag the support up or down to close the gallery.
API for browser history (deep linking).
HTML iframe assistance.
several occurrences on a single page.
Through settings and CSS (SCSS), customization is simple.
smart code optimization and picture preloading.
Desktop keyboard navigation
icons in SVG.
aid for accessibility.
Turn or flip pictures.
with a tonne more.
LightGallery may be found on GitHub, NPM, Yarn, Bower, CDNs, and Yarn. You may download lightGallery using any of the methods listed below.
npm install lightgallery
yarn add lightgallery
Bower – Additionally, you may find lightGallery using the Bower package manager.
bower install lightgallery —save
Github – GitHub offers a direct download option for lightgallery.
Include lightgallery.css in the document’s to start. Include the corresponding css files as well if you wish to use any lightGallery plugins, such as zoom or thumbnails. Instead of using separate stylesheets, you may include lightgallery-bundle.css, which contains the styles for lightGallery and all plugins.
Add lightgallery.min.js to your document after that lg-video.min.js, you may add any Light Gallery plugin you like.
The gallery must then be started by adding the following code.
The HTML attributes necessary for the gallery lightbox. All potential qualities:
data-disqus-identifier: Disqus page identifier.
data-disqus-url: Disqus page url.
data-download-url: Download url for your image/video. Pass false if you want to hide the download button.
data-facebook-share-url: Facebook share URL. Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.
data-fb-html: Facebook comments body html.
data-iframe: Set true is you want to open your url in an iframe
data-iframe-title: Title for iframe
data-pinterest-share-url: Pinterest share URL. 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-pinterest-text: Description for Pinterest post
data-poster: Poster image for your video
data-responsive: List of images and viewport’s max width separated by comma.Ex: img/1-375.jpg 375, img/1-480.jpg 480, img/1-757.jpg 757.
data-sizes: srcset sizes
data-slide-name: Custom slide name to use in the url when hash plugin is enabled.
data-sources: Source attributes for the picture element.
data-src: URL of the media
data-srcset: srcset attribute values
data-sub-html: id or class name of an object(div) which contain your sub html.
data-sub-html-url: URL of the file which contain your sub html.
data-thumb: Thumbnail url.
thumb: Title attribute for the video.
data-tweet-text: Tweet text
data-twitter-share-url: Twitter share URL. Specify only if you want to provide separate share URL for the specific slide. By default, current browser URL will be taken.
data-video: Video source.
data-width: Actual size of the image in px. used in zoom plugin to see the actual size of the image when you doubleclick on the image.
See More Posts: