使用图片视频展现插件blueimp Gallery改造网站的视频图片展现

在不少状况下，咱们网站可能会展现咱们的产品图片、以及教程视频等内容，结合一个比较好的图片、视频展现插件，可以使得咱们的站点更加方便使用，也更加酷炫，在Github上有不少相关的处理插件能够找来使用，有些效果还很是好，本篇介绍使用图片视频展现插件blueimp Gallery改造网站的视频图片展现，并和以前版本的效果进行对比。

一、blueimp Gallery插件介绍

blueimp Gallery是一个是具备触摸功能，响应式和可定制的图像和视频展现插件，为移动和桌面浏览器作了相关优化，它支持滑动、鼠标和键盘导航操做，支持变换效果、幻灯片展现、全屏等功能，以及能够扩展到其余内容类型。

该插件的Github地址以下:http://blueimp.github.io/Gallery/，这个插件替代了原来的Bootstrap-Image-Gallery，并且得到的星星也是比较多的，是很受欢迎的一个插件。

视频的展现界面以下所示

咱们打开通常看不到其图片展现的内容，能够看到部分视频的展现，不过页面对功能的使用介绍的很是详细，咱们能够下载代码进行测试，就能够得到咱们所需的效果了。

图片的画廊（幻灯片）展现方式和视频是一直的，只是视频的中间有一个播放按钮而已，若是是图片的幻灯片展现方式，那么界面图形以下所示，能够看到二者是很是相似的，据说这个控件还能够本身扩展展现其余文档内容，如HTML、PDF等，不过我没有进行测试。

图片的展现还支持另一种方式，就是缩略图的并排展现，而后单击图片的时候进行放大全屏浏览，并带有左右切换的提示和按钮。

从效果来看能够总体了解到这个插件效果是很是好的一个插件，所以想用它来对我公司网站：广州爱奇迪 上的视频和图片进行更佳效果的展现。

 

二、blueimp Gallery的使用

这个控件的使用比较简单，因为官方网站也作了介绍，这里简单进行说明一下就是。

首先咱们须要在页面的头部开始位置加入对应的CSS样式文件，以下所示。

    <!--图片视频展现-->
    <link rel="stylesheet" href="blueimp-Gallery/css/blueimp-gallery.min.css">
    <link rel="stylesheet" href="blueimp-Gallery/css/blueimp-gallery-indicator.css">
    <link rel="stylesheet" href="blueimp-Gallery/css/blueimp-gallery-video.css"> 

控件须要使用Jquery的，所以须要在合适的位置加入对JQuery的引用，以下所示。

    <script src="./content/js/jquery-1.8.3.min.js"></script>

其余的JS咱们通常放在页面的最后，这样能够提升页面加载速度，在此以前咱们须要在页面的正文里面加入咱们所须要的内容展现代码，以下所示。

<div id="blueimp-video-carousel" class="blueimp-gallery blueimp-gallery-controls blueimp-gallery-carousel">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

最后咱们须要在页面的尾部加入相关的JS文件，以下所示。

<!--图片展现脚本-->
<script src="blueimp-Gallery/js/blueimp-helper.js"></script>
<script src="blueimp-Gallery/js/blueimp-gallery.min.js"></script>
<script src="blueimp-Gallery/js/blueimp-gallery-fullscreen.js"></script>
<script src="blueimp-Gallery/js/blueimp-gallery-indicator.js"></script>
<script src="blueimp-Gallery/js/blueimp-gallery-video.js"></script>
<script src="blueimp-Gallery/js/blueimp-gallery-vimeo.js"></script>
<script src="blueimp-Gallery/js/blueimp-gallery-youtube.js"></script>
<script src="blueimp-Gallery/js/jquery.blueimp-gallery.min.js"></script>

而后在添加咱们自定义的JS加载内容代码，用于把它们绑定在界面的元素上展现，以下JS代码所示。

<script>   
    blueimp.Gallery([
        {
            title: 'Winform框架增量开发过程',
            href: 'doc/Video/Winform框架增量开发过程.mp4',
            type: 'video/mp4',
            poster: 'blueimp-Gallery/Pictures/videobg.png'
        },
        {
            title: '混合框架图片显示及存储',
            href: 'doc/Video/混合框架图片显示及存储.mp4',
            type: 'video/mp4',
            poster: 'blueimp-Gallery/Pictures/videobg.png'
        },
        {
            title: '混合框架增量开发过程',
            href: 'doc/Video/混合框架增量开发过程.mp4',
            type: 'video/mp4',
            poster: 'blueimp-Gallery/Pictures/videobg.png'
        },
        {
            title: '混合框架之WebAPI接入的增量开发过程',
            href: 'doc/Video/混合框架之WebAPI接入的增量开发过程.mp4',
            type: 'video/mp4',
            poster: 'blueimp-Gallery/Pictures/videobg.png'
        }        
    ], 
    {
        container: '#blueimp-video-carousel',
        carousel: true
    });

</script>

其中Title是说明内容，Href为视频或者图片的地址，type为媒体类型，poster是视频的背景图片，若是是图片，那么poster须要修改成thumbnail，它们的使用都是同样的。

 

三、blueimp Gallery改造网站的界面效果

因为我公司的网站须要展现一些产品的图片，以及相关的教程视频，所以整合这个插件是很是好的展现方式。整合后能够看到界面效果以下所示，效果参考地址：http://www.iqidi.com/MixWinVideo.htm 

这种直接嵌入在页面里面进行播放，也能够经过全屏按钮进行全屏展现视频的效果很是好，以下所示。

上图咱们须要为视频准备一个合适大小的背景图片，这样才能比较好的进行展现，上图就是一个图片背景。

另外，有时候须要展现一些产品图片，那么可使用LightBox的方式进行展现图片，以下所示。

单击任何一个图片，会放大整个图片预览界面，方便查看清晰图片，并可使用鼠标、键盘、按钮等导航到其余图片，以下所示。

这种展现方式比较直观，同时也比较简单操做，总的来讲是很是不错的。

原来的方式展现视频截个图说明下，对比一下。

首先须要在页面里面添加连接，而后经过单击链接弹出一个对话框进行播放的Bootstrap方式。

并且代码也相对比较多，虽然可以解决视频播放问题，不过总归效果很差，使用图片视频展现插件blueimp Gallery改造，一下高大上了不少。

效果参考地址：http://www.iqidi.com/MixWinVideo.htm 

以上就是我使用图片视频展现插件blueimp Gallery对内容进行的改进，但愿可以给你提供思路和借鉴的作法，也欢迎技术交流。