今天给大家介绍一个非常优秀的Web端实用插件——lightGallery，它是一个用于在Web端制作精致的画廊（Gallery）的工具库，可用于原生、React.js、Vue.js、Angular以及支持TypeScript，Vue版本只支持到最新的Vue3的版本，在Vue2的版本中需要一些特殊手段！
Github
https://github.com/sachinchoolur/lightGallery
特性
- 现代化
lightGallery 采用最现代的技术构建而成，可实现最佳性能和质量。它支持所有现代浏览器，包括 IE 10 及更高版本。
- 模块化设计
采用模块化结构。轻松地创建你自己的模块，或分离你不想使用的模块。LightGallery有许多内置模块，如缩略图、缩放等。
- 移动端和桌面端都有良好的优化
lightGallery针对手机和PC进行了高度优化，以获得原生的外观和体验，并实现最佳性能。支持移动设备的单独设置，以进一步优化。
- 高度可定制化
LightGallery附带了许多配置选项（100多个配置项），允许自定义插件而不影响核心代码。可以通过更新saas变量轻松自定义库的外观和体验
除了以上大致的特性，其包含的功能还有很多，比如：
- 触摸手势
- 触摸和拖动
- 虚拟幻灯片
- 动画缩略图
- 20多个动画
- 响应式图像
- 浏览器历史记录
- lightGallery支持，添加、编辑、删除幻灯片
- 支持外部视频
- 动态模式
- HTML5视频
- 旋转和翻转图像
- 自动播放、全屏等等
- 支持框架广泛
内联画廊
如何使用在官方有详细的文档介绍，这里我们以Vue为例，其它框架可以自行参考文档
- 安装使用
npm install lightgallery
# 或者
yarn add lightgallery
如果安装失败，可以多尝试几次，以下是最简单的用法了
<template>
<div>
<lightgallery :onBeforeSlide="onBeforeSlide">
<a href="img/img1.jpg">
<img
alt=".."
src="img/thumb1.jpg"
/>
</a>
<a href="img/img2.jpg">
<img
alt=".."
src="img/thumb2.jpg"
/>
</a>
</lightgallery>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Lightgallery from "lightgallery/vue";
export default defineComponent({
name: "VueGallery",
components: {
Lightgallery,
},
setup() {
function onBeforeSlide(detail) {
const { index, prevIndex } = detail;
console.log(index, prevIndex);
}
return { onBeforeSlide };
},
});
</script>
以上是在Vue3中的写法，那么如果你一定要在Vue2中尝试，不如试试下面这种写法：
<template>
<div class="app-container">
<div id="lightgallery">
<a href="image-6-lg.jpg">
<img src="thumb-6.jpg" >
</a>
<a href="image-12-lg.jpg">
<img src="thumb-12.jpg" >
</a>
</div>
</div>
</template>
import 'lightgallery.js'
import 'lightgallery.js/dist/css/lightgallery.css'
export default {
name: 'VueApp',
data() {
return {
imageList: []
}
},
mounted() {
const el = document.getElementById('lightgallery')
window.lightGallery(el)
}
}
下面来一张demo中的效果截图
lightGallery的的确确是一个非常优秀的插件，其精致的设计、丰富的功能、极致的性能和高度的可定制化都是其不得不提的优点，但是缺点也是有的，在vue2中使用稍有不足。另外其分为商业和非商业，两者使用需要注意，总体来说也是可以接受的！
,
