lightGallery
A customizable, modular, responsive, lightbox gallery plugin. No dependencies.\Available for React.js, Angular, Vue.js, and typescript.
Core features
- Fully responsive.
- Modular architecture with built in plugins.
- Highly optimized for touch devices.
- Mouse drag supports for desktops.
- Double-click/Double-tap to see actual size of the image.
- Animated thumbnails.
- Social sharing.
- YouTube Vimeo Wistia and html5 videos Support.
- 20+ Hardware-Accelerated CSS3 transitions.
- Dynamic mode.
- Inline gallery
- Full screen support.
- Zoom in/out, Pinch to zoom.
- Swipe/Drag up/down support to close gallery
- Browser history API(deep linking).
- Responsive images.
- HTML iframe support.
- Multiple instances on one page.
- Easily customizable via CSS (SCSS) and Settings.
- Smart image preloading and code optimization.
- Keyboard Navigation for desktop.
- SVG icons.
- Accessibility support.
- Rotate, flip images.
- And many more.
Documentation
Installation
lightGallery is available on NPM, Yarn, Bower, CDNs, and GitHub. You can use anyof the following method to download lightGallery
NPM - NPM is a package manager for the JavaScriptprogramming language. You can install
lightgalleryusing the followingcommandnpm install lightgallery
YARN - Yarn is another popular package manager forthe JavaScript programming language. If you prefer you can use Yarn insteadof NPM
yarn add lightgallery
Bower - You can find lightGallery on Bower packagemanager as well
bower install lightgallery --save
GitHub -You can also directly download lightgallery from GitHub
CDN - If you prefer to use a CDN, you can load files viajsdelivr,cdnjs orunpkg
Include CSS and Javascript files
First of all, include lightgallery.css in the <head> of the document. Ifyou want include any lightGallery plugin such as thumbnails or zoom, you need toinclude respective css files as well.
Alternatively you can include lightgallery-bundle.css which containslightGallery and all plugin styles instead of separate stylesheets.
If you like you can also import scss files instead of css files from the scssfolder.
<head>
<link type="text/css" rel="stylesheet" href="css/lightgallery.css" />
<!-- lightgallery plugins -->
<link type="text/css" rel="stylesheet" href="css/lg-zoom.css" />
<link type="text/css" rel="stylesheet" href="css/lg-thumbnail.css" />
<!-- OR -->
<link type="text/css" rel="stylesheet" href="css/lightgallery-bundle.css" />
</head>
Then include lightgallery.umd.js into your document. If you want to include anylightgallery plugin you can include it after lightgallery.umd.js.
<body>
....
<script src="js/lightgallery.umd.js"></script>
<!-- lightgallery plugins -->
<script src="js/plugins/lg-thumbnail.umd.js"></script>
<script src="js/plugins/lg-zoom.umd.js"></script>
</body>
lightGallery supports AMD, CommonJS and ES6 modules too.
import lightGallery from 'lightgallery';
// Plugins
import lgThumbnail from 'lightgallery/plugins/thumbnail'
import lgZoom from 'lightgallery/plugins/zoom'
The markup
lightgallery does not force you to use any kind of markup. you can use whatevermarkup you want.Here can finddetailed examples of different kinds of markups.
If you know the original size of the media, you can pass it viadata-lg-size="${width}-${height}" attribute for the initialzoom animation.But, this is completely optional.
<div id="lightgallery">
<a href="img/img1.jpg" data-lg-size="1600-2400">
<img alt=".." src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg" data-lg-size="1024-800">
<img alt=".." src="img/thumb2.jpg" />
</a>
...
</div>
Initialize lightGallery
Finally, you need to initiate the gallery by adding the following code.
<script type="text/javascript">
lightGallery(document.getElementById('lightgallery'), {
plugins: [lgZoom, lgThumbnail],
speed: 500,
licenseKey: 'your_license_key'
... other settings
});
</script>
License Key
You'll receive a license key via email one you purchase a license More info
Plugins
As shown above, you need to pass the plugins via settings if you want to use anylightGallery plugins.
If you are including lightGallery files via script tag, please use the sameplugins names as follows.
lgZoom, lgAutoplay, lgComment, lgFullscreen , lgHash, lgPager,lgRotate, lgShare, lgThumbnail, lgVideo, lgMediumZoom
Browser support
lightGallery supports all major browsers including IE 10 and above.
License
Commercial license
If you want to use lightGallery to develop commercial sites, themes, projects,and applications, the Commercial license is the appropriate license. With thisoption, your source code is kept proprietary.Read more about the commercial license
Open source license
If you are creating an open source application under a license compatible withthe GNU GPL license v3, you may use this project under the terms of the GPLv3.
-
这次使用了lightGallery，感觉还不错。样式比较美观，并且支持响应式。 使用过程中，我遇到了下面的问题： 当我 .picsgallery里面只有一个 .gItem的时候。点击弹出幻灯片，再点击幻灯片中的截图，视屏就是不播放。 <div id="video-id2" style="display:none;"> <video class="lg-video-object lg-htm
-
简介 lightgallery.js 是一款功能齐全的纯 JavaScript lightbox 组件，它有以下特点： 支持响应式 模块化设计，内置插件 支持移动设备 支持缩略图 支持社交分享 支持视频 20 多种 CSS3 过度效果 支持全屏 使用 1、引入文件 <link rel="stylesheet" href="css/lightgallery.css"><script src="js/
-
jQuery lightGallery 是个轻量级的 jQuery 画廊，用来展示图像和视频 gallery。 主要特性： 响应式布局 支持触摸屏移动设备 可以转换 CSS 支持 Youtube Vimeo 视频 支持滑块和渐变效果 支持 Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone 支持图片标题和描述 支持同一