响应式和触摸友好 jQuery Gallery Lightbox插件 lightGallery

  • 源码大小:2.84MB
  • 所需积分:1积分
  • 源码编号:19JP-3229
  • 浏览次数:557次
  • 最后更新:2023年05月20日
  • 所属栏目:图库
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

lightGallery是一款轻便、优雅、灵敏、便于移动的jQueryJavaScript插件,用于在具有CSS3过渡效果的全屏灯箱中显示图像/视频库。

Vanilla JavaScript版本在这里提供。

更多功能:

  • 20多个过渡动画。
  • 加载图像时自动播放。
  • 无限循环。
  • 支持youtube和vimeo视频,而不仅仅是图像。
  • 触摸滑动支持。
  • 捏可缩放。
  • 虚拟幻灯片。
  • 支持图片说明和描述。
  • 箭头、缩略图和键盘导航。
  • 跨浏览器。支持所有主流浏览器。
  • 简化选项支持。
  • 一个页面上有多个实例。
  • 适用于React、Angular和Vue.js。
  • 还有更多。

目录:

  • 选项
  • API方法
  • 事件

如何使用它:

1.在文档中加载最新版本的jQuery库以及jQuery lightGallery插件的CSS和javascript。

<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>

2.或者在文档中加载您选择的核心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>
<!-- Thumbnail -->
<script src="/path/to/modules/lg-thumbnail.js"></script>
<!-- HTML5/YOUTUBE/VIMEO Video -->
<script src="/path/to/modules/lg-video.js"></script>
<!-- Zoom -->
<script src="/path/to/modules/lg-zoom.js"></script>

2.使用Html5创建图像/视频库数据-*属性。

<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>

3.可用数据-*属性。

  • 数据源代码:图像/视频的大版本
  • 参考资料:图像/视频的大版本
  • 数据子html:包含子html的对象(div)的id或类名。
  • 数据子html url:包含子html的文件的url。
  • 数据html:包含html的对象(div)的id或类名。用于插入html5视频
  • 数据海报:视频海报图片
  • 数据响应:用逗号分隔的图像和视口最大宽度列表。例如:img/1-375.jpg 375、img/1-480.jpg 480、img/1-777.jpg 757。
  • 数据srcset:srcset值
  • 数据大小:srcset尺寸
  • 数据iframe:设置为true是指您希望在iframe中打开您的url
  • 数据下载网址:下载图片/视频的网址。如果要隐藏下载按钮,请传递false。
  • 数据宽度:图像的实际大小(以像素为单位)。在缩放插件中使用,可以在双击图像时查看图像的实际大小。
  • 数据脸书共享网址:Facebook共享URL。仅当您想为特定幻灯片提供单独的共享URL时才指定。默认情况下,将采用当前浏览器URL。
  • 数据推特文本:推特文本
  • 数据推特共享网址:Twitter共享URL。仅当您想为特定幻灯片提供单独的共享URL时才指定。默认情况下,将采用当前浏览器URL。
  • 数据谷歌加共享网址:GooglePlus共享URL。仅当您想为特定幻灯片提供单独的共享URL时才指定。默认情况下,将采用当前浏览器URL。
  • 数据pinterest共享网址:Pinterest共享URL。仅当您想为特定幻灯片提供单独的共享URL时才指定。默认情况下,将采用当前浏览器URL。注意:Pinterest需要绝对URL
  • 数据点集文本:Pinterest帖子描述

4.使用默认设置初始化多媒体资料灯箱。

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

5.该插件提供了许多选项/回调,可以自定义你的灯箱库。

  • 模式:“lg幻灯片”:图像之间的转换类型:“lg幻灯片”、“lg淡入淡出”、“1g放大”、“lg-放大大”、“lg缩小大”、-rev’,“lg滑动斜交”、“lg滑梯斜交rev”、“lg-滑动斜交cross”、“lg滑动斜交-ver”、“Ig滑动斜交-ver-rev”,“lg滑梯斜交-ver-cross”,“lg-棒棒糖”,“lg棒棒糖rev”
  • cssEasing:“轻松”,//“立方体-贝塞尔(0.25,0,0.25,1)”//
  • 宽松:“线性”:CSS“转换定时函数”道具的值。和jQuery.animate()。
  • 速度:1000:转换持续时间(毫秒)。
  • 高度和宽度:走廊的高度和宽度
  • 画廊ID:1:画廊ID
  • addClass: '':为库添加自定义类。
  • startClass:'lg开始缩放':启动画廊的动画类。
  • 背景持续时间:150:回流传输持续时间
  • 隐藏栏延迟:6000:-隐藏库控件的延迟,以毫秒为单位。如果通过hideBarsDelay传递0,lightGallery将不会隐藏工具栏和控件。
  • useLeft:错误:强制lightgallery使用css left属性,而不是转换。
  • ariaLabeled by和ariaDescribed by:用于无障碍
  • 预加载:1:预加载幻灯片的数量。只有在当前幻灯片完全加载后才会出现。例如://您单击了第4张图像,如果预加载=1,则第4张幻灯片完全加载后,第3张幻灯片和第5张幻灯片将加载到背景中。。如果预加载为2,则第2个、第3个、第5个、第6个滑块将被预加载。
  • showAfterLoad:真:完全加载后显示内容。
  • 选择器:null:自定义选择器属性不包含子项。
  • 索引:false:允许设置使用dynamicEl时应加载的图像/视频。
  • 控件:true:是否显示上一个/下一个按钮。
  • hideControlOnEnd:错误:如果为true,上一个/下一个按钮将隐藏在第一个/最后一个图像上。
  • 循环:错误:允许在第一个/最后一个img处转到库的另一端。
  • escKey:真:当用户按下“Esc”时,是否应关闭lightGallery。
  • 按键:true:启用键盘导航
  • slideEndAnimationin:真:启用幻灯片结束动画
  • 鼠标滚轮:true:更改鼠标滚轮上的幻灯片
  • getCaptionFromTitleOrAlt: true:从alt或title标签获取标题的选项。
  • appendSubHtmlTo:真:您可以指定子html应该附加在哪里。'。“lg-sub-html”或“.lg项”。
  • 子Html选择器或相对:如果“data-sub-html”中的选择器应使用当前项作为其原点,则设置为true。
  • select范围:'':默认情况下,selectror元素仅取自gallery元素内部。相反,您可以告诉lightgallery选择特定元素中的元素。
  • 下一个Html:“”:下一个控件的自定义html
  • 上一个Html:“”:用于上一个控件的自定义html
  • iframe最大宽度:“100%”:设置iframe的最大宽度。
  • 下载:true:启用下载按钮。默认情况下,下载url将取自数据src/href属性,但它仅支持现代浏览器。如果你愿意,你可以通过数据下载网址提供另一个网址供下载。如果你想隐藏特定幻灯片的下载按钮,请在数据下载url中传递false。
  • 可关闭:true:允许点击调光器关闭图库
  • 计数器:错误:显示图像总数和当前图像的索引号。
  • appendCounterTo:'.lg工具栏':应附加计数器的位置
  • enableSwipe:真:启用滑动支持
  • enableDrag:真:启用桌面鼠标拖动支持
  • 刷卡阈值:50:用户必须滑动下一个/上一个图像的距离(以像素为单位)。
  • 动态:错误:设置为true可基于“dynamicEl”opt中的数据构建库。
  • 动态El:[]:画廊els的对象数组(src、thumb、caption、desc、mobileSrc)。
  • 支持合法浏览器:是否支持旧版浏览器
$("#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
});

6.可选扩展的默认选项。

// 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,

7.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);

8.事件。

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);

关于作者:

作者:Sachin

主页:http://sachinchoolur.github.io/lightGallery/

更新日志:

2022-01-12

  • Vanilla JS版本已更新。在此处下载。

v1.10.0 (2020-11-07)

  • 从froogaloop升级到vimeo player.js
  • 更新视频js错误消息
  • 增强自动播放支持
  • 添加对player.vimeo.com/video/<video_id>的支持

v1.9.1测试版(2020-10-29)

  • 添加选项以关闭隐藏工具栏和控件。如果0是通过hideBarsDelay传递的,lightGallery将不会隐藏工具栏和控件。
  • 新的支持LegacyBrowser选项
  • 更好的错误消息
  • 小错误修复
  • 添加对player.vimeo.com/video/<video_id>的支持

2020-09-21

  • 文档已更新

2020-09-19

  • 第8.3版

2016-01-05

  • v1.2.13:修复缩放模块问题。。

2016-01-03

  • v1.12.12:增加了对触摸设备的双击支持。

2015-12-30

  • v1.11:小更新。

2015-12-18

  • v1.2.9:更新。

2015-12-13

  • v1.2.8:更新。

2015-10-03

  • v1.2.5:更新。

2015-09-26

  • v1.2.4:错误修复

2015-09-23

  • v1.2.3:修复了仅对一个视频使用视频库时的问题。

2015-09-08

  • v1.2.1:错误修复。

2015-09-03

  • 改进的缩放插件

2015-08-26

  • 1.2.0版本发布。

2015-03-30

  • 1.1.5版本发布。

2015-03-29

  • 支持youtube播放器参数

2014-11-04

  • 版本1.4

2014-11-03

  • 修正了:Escape只包含一张图片时不会关闭图库

2014-10-02

  • 为IE8修复。

2014-09-25

  • 修正了Escape只包含一张图片时不会关闭图库的问题

2014-09-17

  • 修复了位置问题#lightGallery操作

2014-09-16

  • v1.1.3版本

2014-09-02

  • 修复了“添加选项以在标题和描述中包含超链接”的问题

2014-07-22

  • 修正了在ios上不工作的问题

2014-07-01

  • 修复了“hideControlOnEnd”问题。。

2014-06-27

  • 已修复幻灯片预加载问题。。

2014-06-13

  • 改进youtube/vimeo-regex

2014-05-07

  • 等高缩略图

2014-04-22

  • iOS上的导航箭头跳过2张幻灯片而不是1张

2014-04-11

  • 修复了ie8字体图标问题“ie8#19上的不可见按钮”

2014-04-03

  • 固定标题触摸设备的链接和导航

2014-04-02

  • 更新lightGallery.js

2014-03-27

  • 更新lightGallery.js

2014-03-22

  • 已修复问题“人像缩略图”

2014-03-15

  • 已修复问题。

2014-03-06

  • 固定问题“第二次打开时的幻灯片效果”

预览截图