Lightgallery. js-pure js lightweight responsive lightbox plug-in, lightboxgallery

Lightgallery. js-pure js lightweight responsive lightbox plug-in, lightboxgallery

Download Online Preview source code

Lightgallery. js is a lightweight responsive lightbox plug-in that is pure JavaScript. The Lightbox plug-in supports multiple media, such as images, videos, and iframe. Supports full screen, navigation, scaling, downloading, and a variety of animated transitions. Lightgallery. js has the following features:

• Fully responsive design.
• Modular architecture of built-in plug-ins.
• Supports mobile touch devices.
• You can drag and drop a desktop device to switch between devices.
• Double-click to view the large image of the original size.
• Thumbnails with animation effects.
• Supports various videos.
• Supports over 20 hardware-accelerated CSS 3 transition animations.
• Supports dynamic loading mode.
• Full Screen mode is supported.
• Supports image scaling.
• Supports HTML5 history APIs.
• Response Image.
• HTML iframe is supported.
• The same page supports multiple instances.
• Intelligently load images and code optimization.
• Desktop devices support keyboard navigation.
• Font icons are supported.

Install

You can install the lightgallery. js plug-in through npm and bower.

12	bower install lightgallery.js --savenpm install lightgallery.js

Usage

Access the lightgallery.css and lightgallery. min. js files on the page. If you need a feature that can introduce relevant files separately, such as the full screen feature introducing lg-fullscreen.min.js, thumbnail feature introducing lg-thumbnail.min.js, etc.

12345

<link rel="stylesheet" href="css/lightgallery.css"><script src="js/lightgallery.min.js"></script><script src="js/lg-thumbnail.min.js"></script><script src="js/lg-fullscreen.min.js"></script>...

HTML Structure

We recommend that you use the following HTML structure to build an image gallery.

123456789

<div id="lightgallery">    <a href="img/img1.jpg">        <img src="img/thumb1.jpg">    </a>    <a href="img/img2.jpg">        <img src="img/thumb2.jpg">    </a>    ...</div>

You can view the usage of other HTML structures here.

Initialize the plug-in

At the bottom of the page, use the following method to initialize the lightbox plug-in.

123	<script>    lightGallery(document.getElementById('lightgallery'));</script>

Configuration parameters core configuration parameters

Parameters	Type	Default Value	Description
Mode	String	'Lg-slide'	The animation type of the image transition. Available animations include:'lg-slide','lg-fade','lg-zoom-in','lg-zoom-in-big','lg-zoom-out','lg-zoom-out-big','lg-zoom-out-in','lg-zoom-in-out','lg-soft-zoom','lg-scale-up','lg-slide-circular','lg-slide-circular-vertical','lg-slide-vertical','lg-slide-vertical-growth','lg-slide-skew-only','lg-slide-skew-only-rev','lg-slide-skew-only-y','lg-slide-skew-only-y-rev','lg-slide-skew','lg-slide-skew-rev','lg-slide-skew-cross','lg-slide-skew-cross-rev','lg-slide-skew-ver','lg-slide-skew-ver-rev','lg-slide-skew-ver-cross','lg-slide-skew-ver-cross-rev','lg-lollipop','lg-lollipop-rev','lg-rotate','lg-rotate-rev','lg-tube'
CssEasing	String	'Authorization'	Easing transition animation type.
Speed	Number	600	Duration of the Transition animation. Unit: milliseconds.
Height	String	'123'	The height of the image gallery.
Width	String	'123'	The width of the image gallery.
AddClass	String	''	Add a custom class to the gallery.
StartClass	String	'Lg-start-zoom'	Gallery start animation type.
BackdropDuration	Number	150	Lightgallery backdrop transtion duration
HideBarsDelay	Number	6000	Delay Time of the control button of the hidden image gallery, in milliseconds.
UseLeft	Boolean	False	Force lightgalleryleftTo replace transform.
Closable	Boolean	True	Users can click in the dark to close the image gallery.
Loop	Boolean	True	Whether to play cyclically.
EscKey	Boolean	True	Whether to disable image galleries by using the "Esc" key.
KeyPress	Boolean	True	Whether to allow keyboard navigation.
Controls	Boolean	True	Whether to display the front and back navigation buttons.
SlideEndAnimatoin	Bolean	True	Whether to allow slideEnd animation.
HideControlOnEnd	Boolean	False	If this parameter is set to false, the navigation buttons are not displayed for the first and last images.
GetCaptionFromTitleOrAlt	Boolean	True	Obtain the image description from the alt or title tags of the image.
AppendSubHtmlTo	String	'. Lg-sub-html'	Specify to add sub-html:'.lg-sub-html'Or'.lg-item'.
SubHtmlSelectorRelative	Boolean	False	If you use the "data-sub-html" selector as the source of the current project, set it to true.
Preload	Number	1	Number of pre-loaded slider.
ShowAfterLoad	Boolean	True	Whether the content is displayed after being fully loaded.
Selector	String	''	A custom selector is used to replace child elements.
SelectWithin	String	''	By default selectror element is taken from only inside the gallery element. Instead of that you can tell lightgallery to select element within a specific
NextHtml	String	''	The html tag of the Next button.
PrevHtml	String	''	The html tag of the Prev button.
Index	Number	0	Set the index of the image/video to be loaded immediately.
IframeMaxWidth	String	'123'	Set the maximum iframe width.
Download	Boolean	True	Whether to use the Download button.
Counter	Boolean	True	Whether to display the total number of images and the index of the current image.
AppendCounterTo	String	'. Lg-toolbar'	Specify the counter to be added.
SwipeThreshold	Number	50	The threshold for the touch to slide.
EnableDrag	Boolean	True	Whether the desktop device allows mouse dragging.
EnableTouch	Boolean	True	Whether to allow touch movement.
Dynamic	Boolean	False	Dynamically call the plug-in through programming.
DynamicEl	Array	[]	Array representing gallery elements.

Download Online Preview source code