lightGallery:一款惊艳的Web画廊插件,各大Web框架都支持

lightGallery的的确确是一个非常优秀的插件,其精致的设计、丰富的功能、极致的性能和高度的可定制化都是其不得不提的优点,但是缺点也是有的,在vue2中使用稍有不足。

介绍

今天给大家介绍一个非常优秀的Web端实用插件——lightGallery,它是一个用于在Web端制作精致的画廊(Gallery)的工具库,可用于原生、React.js、Vue.js、Angular以及支持TypeScript,Vue版本只支持到最新的Vue3的版本,在Vue2的版本中需要一些特殊手段!


一款惊艳的Web画廊插件,各大Web框架都支持——lightGallery

Github

https://github.com/sachinchoolur/lightGallery

特性

一款惊艳的Web画廊插件,各大Web框架都支持——lightGallery
  • 现代化

lightGallery 采用最现代的技术构建而成,可实现最佳性能和质量。它支持所有现代浏览器,包括 IE 10 及更高版本。

  • 模块化设计

采用模块化结构。轻松地创建你自己的模块,或分离你不想使用的模块。LightGallery有许多内置模块,如缩略图、缩放等。

  • 移动端和桌面端都有良好的优化

lightGallery针对手机和PC进行了高度优化,以获得原生的外观和体验,并实现最佳性能。支持移动设备的单独设置,以进一步优化。

  • 高度可定制化

LightGallery附带了许多配置选项(100多个配置项),允许自定义插件而不影响核心代码。可以通过更新saas变量轻松自定义库的外观和体验

一款惊艳的Web画廊插件,各大Web框架都支持——lightGallery

除了以上大致的特性,其包含的功能还有很多,比如:

  • 触摸手势
  • 触摸和拖动
  • 虚拟幻灯片
  • 动画缩略图
  • 20多个动画
  • 响应式图像
  • 浏览器历史记录
  • lightGallery支持,添加、编辑、删除幻灯片
  • 支持外部视频
  • 动态模式
  • HTML5视频
  • 旋转和翻转图像
  • 自动播放、全屏等等
  • 支持框架广泛
一款惊艳的Web画廊插件,各大Web框架都支持——lightGallery

内联画廊

一款惊艳的Web画廊插件,各大Web框架都支持——lightGallery

如何安装使用

如何使用在官方有详细的文档介绍,这里我们以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中的效果截图

一款惊艳的Web画廊插件,各大Web框架都支持——lightGallery

总结

lightGallery的的确确是一个非常优秀的插件,其精致的设计、丰富的功能、极致的性能和高度的可定制化都是其不得不提的优点,但是缺点也是有的,在vue2中使用稍有不足。另外其分为商业和非商业,两者使用需要注意,总体来说也是可以接受的!

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/share/24926.html

发表评论

登录后才能评论