lightGallery.js的使用踩坑和记录

以前用的lightGallery.js是从网上找的插件不全,项目领秀是用的网上找的。

后来因为客户需求要改lightGallery的缩略图显示方式改为右侧,本来不需要动插件,后来客户要修改,可以播放视频,没办法,要读一读了

首先官网lightGallery的官网https://www.lightgalleryjs.com/,里面有Github的下载地址。

先从lightGallery.js的使用文档撸起来。按照文档先把html结构写好,如下

<div id="test">
  <!-- Image -->

  <a href="/img/1.png" >
    <img src="/img/3.jpg" />
  </a>


    <a href="/img/1.png">
        <img src="/img/1.png" />
    </a>


    <a
            data-lg-size="1280-720"
            data-video='{"source": [{"src":"/img/test.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}}'
            data-poster="/img/1.png"
            data-sub-html="<h4>'Peck Pocketed' by Kevin Herron | Disney Favorite</h4>"
    >
        <img
                width="300"
                height="100"
                class="img-responsive"
                src="/img/1.png"
        />
    </a>


</div>

然后开始跑,先前直接运行的,可以跑起来

    lightGallery(document.getElementById('test'));

但是这样没有缩略图等其他东西,我既然是要让它播放视频,肯定要用到插件,所以我就先调缩略图插件,下面的这个过程搞了我一个小时。我做了一个错误的事情,去研究lightGallery的底层代码了,看来半个多小时。然后回到原来地方,因为从文档中我启用缩略图始终无效,后来发现,我贴代码,不注意把括号贴错位置了,调试成功如下。

    lightGallery(document.getElementById('test'),{
        plugins: [lgZoom, lgThumbnail,lgVideo],
    });

缩略图,视频都ok了,记住那个zoom插件也加载进来。

css加载如下

  <link rel="stylesheet" type="text/css" href="/lg/css/lightgallery.css" />
    <link type="text/css" rel="stylesheet" href="lg/css/lg-zoom.css" />
    <link rel="stylesheet" type="text/css" href="/lg/css/lg-thumbnail.css" />
    <link rel="stylesheet" type="text/css" href="/lg/css/lg-autoplay.css" />
    <link rel="stylesheet" type="text/css" href="/lg/css/lg-video.css" />

现在很多的网站都会用到画廊显示,比如产品图集,所以我们制作wordpress主题的时候也必须要能快速的掌握一门前端插件,今天下午花了这两个小时学习了一下lightGallery很是不错。

我爱主题网 自2012
主题:260+ 销售:1000+
兼容浏览器