LightGallery Javascript

Beautiful picture and video galleries may be made with the lightweight, modular JavaScript library lightGallery for both the web and mobile devices.

Features Supported by lightgallery

completely responsive.
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.
animated thumbnails.
sharing online.
YouTube Vimeo videos on Wistia and HTML5 Support.
Over 20 Hardware
CSS3 transitions that are accelerated.
Dynamic setting.
embedded gallery
full-screen assistance.
Pinch to zoom in or out.
Drag the support up or down to close the gallery.
API for browser history (deep linking).
adaptive pictures.
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.

Installation

LightGallery may be found on GitHub, NPM, Yarn, Bower, CDNs, and Yarn. You may download lightGallery using any of the methods listed below.

NPM – Package management for the JavaScript programming language called NPM. The following command may be used to install Lightgallery.

npm install lightgallery 

Yarn – Another well-liked package management for the JavaScript programming language is Yarn. NPM can be replaced with Yarn if you’d like.

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.

CDN – You can load files over a CDN if that’s what you choose to do via jsdelivr, cdnjs or unpkg

Mandatory CSS and Javascript files

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.

Initialize lightGallery

The gallery must then be started by adding the following code.

<script type="text/javascript">
    function initLightGallery() {
        lightGallery(document.getElementById('videoSliderLightgallery'), {
            plugins: [lgVideo],
            autoplayVideoOnSlide: true,
            download: false,
            mobileSettings: { controls: true, showCloseIcon: true, }
        });
    }

    initSlider();
    initLightGallery();
</script>

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:

Twitter terminates 1 account that was following Elon Musk’s aircraft

Jack Dorsey, a former CEO, warns each 1 about hazardous assaults against former coworkers

NASA will launch the 1st global water survey