您现在的位置:

首页

建站资源下载详情

lightGallery 轻量级模块化的JS图像和视频灯箱库插件

来源：易助科技网浏览量：27收藏

简介

lightGallery是一个轻量级、模块化的JavaScript图像和视频灯箱库插件。可用于React.js、Vue.js、Angular和TypeScript。

插件特点：

20多个过渡动画。

加载图像时自动播放。

无限循环。

支持youtube和vimeo视频，而不仅仅是图像。

触摸滑动支持。

可缩放。

虚拟幻灯片。

支持图片字幕和描述。

箭头、缩略图和键盘导航。

跨浏览器。

支持所有主流浏览器。

简化选项支持。

一页上有多个实例。

适用于React、Angular和Vue.js。

（下载的附件中附有DEMO）

更多灯箱画廊插件：👉 [ 详情 ]

使用

1. 引入文件

<link rel="stylesheet"  href="/path/to/dist/css/lightgallery.min.css" />

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/lightgallery-all.min.js"></script>

或者在文档中加载您选择的核心JavaScript和可选扩展。

<!-- Core -->
<script src="/path/to/dist/js/lightgallery.min.js"></script>
<!-- Autoplay -->
<script src="/path/to/modules/lg-autoplay.js"></script>
<!-- Fullscreen -->
<script src="/path/to/modules/lg-fullscreen.js"></script>
<!-- Hashtag -->
<script src="/path/to/modules/lg-hash.js"></script>
<!-- Pager -->
<script src="/path/to/modules/lg-pager.js"></script>
<!-- Rotate -->
<script src="/path/to/modules/lg-rotate.js"></script>
<!-- Social share -->
<script src="/path/to/modules/lg-share.js"></script>
<!-- <a href="https://www.jqueryscript.net/tags.php?/Thumbnail/">Thumbnail</a> -->
<script src="/path/to/modules/lg-thumbnail.js"></script>
<!-- HTML5/YOUTUBE/VIMEO Video -->
<script src="/path/to/modules/lg-video.js"></script>
<!-- <a href="https://www.jqueryscript.net/zoom/">Zoom</a> -->
<script src="/path/to/modules/lg-zoom.js"></script>

2. HTML

创建一个具有Html5 data-* 属性的图像/视频库。

<ul id="lightGallery" class="gallery">
  <li data-title="Title 1" data-desc="Description 1" data-responsive-src="mobile1.jpg" data-src="img1.jpg"> <a href="#"> <img src="thumb1.jpg" /> </a> </li>
  <li data-title="Title 2" data-desc="Description 2" data-responsive-src="mobile2.jpg" data-src="img2.jpg"> <a href="#"> <img src="thumb2.jpg" /> </a> </li>
  <li data-title="Title 3" data-desc="Description 3" data-responsive-src="mobile3.jpg" data-src="img3.jpg"> <a href="#"> <img src="thumb3.jpg" /> </a> </li>
  ...
</ul>

可用的 data-* 属性。

data-src: the large version of your image/video
href: the large version of your image/video
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-html: id or class name of an object(div) which contain your html. used for inserting html5 videos
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-srcset: srcset values
data-sizes: srcset sizes
data-iframe: Set true is you want to open your url in an iframe
data-download-url: Download url for your image/video. Pass false if you want to hide the download button.
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.
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-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-googleplus-share-url: GooglePlus 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-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

3. 调用

$(document).ready(function() {
  $("#lightGallery").lightGallery();
});

4. 配置项

该插件提供了许多选项/回调，可以自定义灯箱库。

mode: 'lg-slide': Type of transition between images: '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: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
easing: 'linear': Value for CSS "transition-timing-function" prop. and jQuery .animate().
speed: 1000: Transition duration (in ms).
height & width: Height and width of the gallery
galleryId: 1: Gallery ID
addClass: '': Add custom class for gallery.
startClass: 'lg-start-zoom': Starting animation class for the gallery.
backdropDuration: 150: Backdrop transtion duration
hideBarsDelay: 6000: Delay for hiding gallery controls in ms. If 0 is passed via hideBarsDelay, lightGallery will not hide the toolbar and controls.
useLeft: false: Force lightgallery to use css left property instead of transform.
ariaLabelledby & ariaDescribedby: For Accessibility
preload: 1: number of preload slides. will exicute only after the current slide is fully loaded. ex:// you clicked on 4th image and if preload = 1 then 3rd slide and 5th slide will be loaded in the background after the 4th slide is fully loaded.. if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.
showAfterLoad: true: Show Content once it is fully loaded.
selector: null: Custom selector property insted of just child.
index: false: Allows to set which image/video should load when using dynamicEl.
controls: true: Whether to display prev/next buttons.
hideControlOnEnd: false: If true, prev/next button will be hidden on first/last image.
loop: false: Allows to go to the other end of the gallery at first/last img.
escKey: true: Whether lightGallery should be closed when user presses "Esc".
keyPress: true: Enable keyboard navigation
slideEndAnimatoin: true: Enable slideEnd animation
mousewheel: true: Change slide on mousewheel
getCaptionFromTitleOrAlt: true: Option to get captions from alt or title tags.
appendSubHtmlTo: true: You can specify where the sub-html should be appended. '.lg-sub-html' or '.lg-item'.
subHtmlSelectorRelative: Set to true if the selector in "data-sub-html" should use the current item as its origin.
selectWithin: '': 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 element.
nextHtml: '': Custom html for next control
prevHtml: '': Custom html for prev control
iframeMaxWidth: '100%': Set maximum width for iframe.
download: true: Enable download button. By default download url will be taken from data-src/href attribute but it supports only for modern browsers. If you want you can provide another url for download via data-download-url. Pass false in data-download-url if you want to hide download button for the particular slide.
closable: true: allows clicks on dimmer to close gallery
counter: false: Shows total number of images and index number of current image.
appendCounterTo: '.lg-toolbar': Where the counter should be appended
enableSwipe: true: Enables swipe support
enableDrag: true: Enables desktop mouse drag support
swipeThreshold: 50: How far user must swipe for the next/prev image (in px).
dynamic: false: Set to true to build a gallery based on the data from "dynamicEl" opt.
dynamicEl: []: Array of objects (src, thumb, caption, desc, mobileSrc) for gallery els.
supportLegacyBrowser: Whether to support legacy browsers

示例

$("#lightGallery").lightGallery({
  mode: 'lg-slide',

  // Ex : 'ease'
  cssEasing: 'ease',

  //'for jquery animation'
  easing: 'linear',
  speed: 600,
  height: '100%',
  width: '100%',
  addClass: '',
  startClass: 'lg-start-zoom',
  backdropDuration: 150,

  // Set 0, if u don't want to hide the controls 
  hideBarsDelay: 6000,

  useLeft: false,

  // aria-labelledby attribute fot gallery
  ariaLabelledby: '',

  //aria-describedby attribute for gallery
  ariaDescribedby: '',

  closable: true,
  loop: true,
  escKey: true,
  keyPress: true,
  controls: true,
  slideEndAnimatoin: true,
  hideControlOnEnd: false,
  mousewheel: true,

  getCaptionFromTitleOrAlt: true,

  // .lg-item || '.lg-sub-html'
  appendSubHtmlTo: '.lg-sub-html',

  subHtmlSelectorRelative: false,

  /**
   * @desc number of preload slides
   * will execute only after the current slide is fully loaded.
   *
   * @ex you clicked on 4th image and if preload = 1 then 3rd slide and 5th
   * slide will be loaded in the background after the 4th slide is fully loaded..
   * if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.. ... ...
   *
   */
  preload: 1,
  showAfterLoad: true,
  selector: '',
  selectWithin: '',
  nextHtml: '',
  prevHtml: '',

  // 0, 1
  index: false,

  iframeMaxWidth: '100%',

  download: true,
  counter: true,
  appendCounterTo: '.lg-toolbar',

  swipeThreshold: 50,
  enableSwipe: true,
  enableDrag: true,

  dynamic: false,
  dynamicEl: [],
  galleryId: 1,
  supportLegacyBrowser: true
});

5. 默认选项的可选扩展

// autoplay addon
autoplay: false,
pause: 5000,
progressBar: true,
fourceAutoplay: false,
autoplayControls: true,
appendAutoplayControlsTo: '.lg-toolbar'

// hash addon
hash: true,
galleryId: 1,

// fullscreen addon
fullScreen: true,

// pager addon
pager: false,

// social share addon
share: true,
facebook: true,
facebookDropdownText: 'Facebook',
twitter: true,
twitterDropdownText: 'Twitter',
googlePlus: true,
googlePlusDropdownText: 'GooglePlus',
pinterest: true,
pinterestDropdownText: 'Pinterest',

// thumbnail addon
thumbnail: true,
animateThumb: true,
currentPagerPosition: 'middle', // 'left' or 'middle' or 'right'
thumbWidth: 100,
thumbContHeight: 100,
thumbMargin: 5,
exThumbImage: false,
showThumbByDefault: true,
toggleThumb: true,
pullCaptionUp: true,
enableThumbDrag: true,
enableThumbSwipe: true,
swipeThreshold: 50,
loadYoutubeThumbnail: true,
youtubeThumbSize: 1,
loadVimeoThumbnail: true,
vimeoThumbSize: 'thumbnail_small', // 'thumbnail_large' or 'thumbnail_medium' or 'thumbnail_small'
loadDailymotionThumbnail: true,

// video addon
videoMaxWidth: '855px',
autoplayFirstVideo: true,
youtubePlayerParams: false,
vimeoPlayerParams: false,
dailymotionPlayerParams: false,
vkPlayerParams: false,
videojs: false, // uses video.js library
videojsOptions: {},

// zoom addon
scale: 1,
zoom: true,
actualSize: true,
enableZoomAfter: 300,

// rotate addon
rotate: true,
rotateLeft: true,
rotateRight: true,
flipHorizontal: true,
flipVertical: true,

6. API 方法

var $lg = $('#lightgallery');
$lg.lightGallery();
 
// go to the next slide
$lg.data('lightGallery').goToNextSlide();

// go to the prev slide
$lg.data('lightGallery').goToPrevSlide();

// go to a specific sldie
$lg.data('lightGallery').slide(3);

7. 事件

var $lg = $('#lightgallery');
$lg.lightGallery();

$lg.on('onBeforeOpen.lg', function(e){
  // do something
}, false);

$lg.on('onAfterOpen.lg', function(e){
  // do something
}, false);

$lg.on('onAferAppendSlide.lg', function(e){
  // event.detail.index - Index of the slide
}, false);

$lg.on('onAfterAppendSubHtml.lg', function(e){
  // event.detail.index - Index of the slide
}, false);

$lg.on('onSlideItemLoad.lg', function(e){
  // event.detail.index - Index of the slide
}, false);

$lg.on('onBeforeSlide.lg', function(e){
  // event.detail.prevIndex - Index of the previous slide
  // event.detail.index - Index of the slide
  // event.detail.fromTouch - true if slide function called via touch event or mouse drag
  // event.detail.fromThumb - true if slide function called via thumbnail click
}, false);

$lg.on('onAfterSlide.lg', function(e){
  // event.detail.prevIndex - Index of the previous slide
  // event.detail.index - Index of the slide
  // event.detail.fromTouch - true if slide function called via touch event or mouse drag
  // event.detail.fromThumb - true if slide function called via thumbnail click
}, false);

$lg.on('onBeforePrevSlide.lg', function(e){
  // event.detail.index - Index of the slide
  // event.detail.fromTouch - true if slide function called via touch event or mouse drag
}, false);

$lg.on('onBeforeNextSlide.lg', function(e){
  // event.detail.index - Index of the slide
  // event.detail.fromTouch - true if slide function called via touch event or mouse drag
}, false);

$lg.on('onDragstart.lg', function(e){
  // do something
}, false);

$lg.on('onDragmove.lg', function(e){
  // do something
}, false);

$lg.on('onDragend.lg', function(e){
  // do something
}, false);

$lg.on('onSlideClick.lg', function(e){
  // do something
}, false);

$lg.on('onBeforeClose.lg', function(e){
  // do something
}, false);

$lg.on('onCloseAfter.lg', function(e){
  // do something
}, false);