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

当前位置：首页 > 网页特效 > 图库 > 响应式和触摸友好 jQuery Gallery Lightbox插件 lightGallery

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

源码大小：2.84MB
所需积分：1积分
源码编号：19JP-3229
浏览次数：442次
最后更新：2023年05月20日
所属栏目：图库

我要下载

加入收藏

本站默认解压密码：19jp.com 或 19jp_com

简介

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

Vanilla JavaScript版本在这里提供。

如何使用它:

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

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

预览截图

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

相关热词： Lightbox Gallery 友好触摸响应 jQuery 插件 lightGallery

上一篇：通用语言选择器 jQuery插件 ULS
下一篇：就地缩放功能图像库

开发前端软件素材源码教程下载网站