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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!