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

当前位置:主页 > jQuery库 > Lightbox和对话框 > 纯js图片和视频查看器插件
纯js图片和视频查看器插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-04-11
    阅读:
麦子学院
简要教程

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

网友评论