纯js图片和视频查看器插件

BigPicture.js是一款轻量级的图片和视频查看器js插件。它支持Youtube、Vimeo、和本地HTML5视频。同时还支持远程视频和图片的查看，非常时尚和方便。

安装

可以通过npm安装BigPicture.js插件。

npm install bigpicture
                

使用方法

在页面中引入BigPicture.js文件。

<script src="js/BigPicture.js"></script>                  
                

初始化插件

你想通过BigPicture.js插件来打开任何东西，可以使用BigPicture()构造函数。它的第一个参数是一个容器的id，第二个参数是你要打开的图片或视频的地址。例如：

打开远程图片：

BigPicture({
  el: this,
  imgSrc: 'http://yourimage.jpg'
});            
                

打开远程视频：

BigPicture({
  el: this,
  vidSrc: 'http://yourvideo.mp4'
});                  
                

打开Youtube视频：

BigPicture({
  el: this,
  ytSrc: 'z_PeaHVcohg' //打开的视频地址为：https://www.youtube.com/watch?v=z_PeaHVcohg
});                  
                

打开Vimeo视频：

BigPicture({
  el: this,
  vimeoSrc: '119287310' //打开的视频地址为：https://vimeo.com/119287310
});                  
                

如果触发的元素是一张图片或带背景图片的元素，可以直接将它作为元素传入：

BigPicture({
  el: this
});                  
                

使用图片标题：

<img src="yourimage.jpg" caption="Example of an optional caption."/>                 
                

回调函数

BigPicture({
  el: this,
  // executed immediately before open animation starts
  animationStart: function() {
    console.log('it is opening');
  },
  // executed immediately after open animation finishes
  animationEnd: function() {
    console.log('it has opened');
  }
});                  
                

隐藏加载loader指示器

可以通过下面的方法来隐藏加载loader指示器。

BigPicture({
  el: this,
  vimeoSrc: '119287310',
  noLoader: true
});                  
                

BigPicture.js图片和视频查看器插件的github地址为：https://github.com/henrygd/bigpicture