手札

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很是不错。