你的位置:首页 > 软件开发 > ASP.net > 使用图片视频展示插件blueimp Gallery改造网站的视频图片展示

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

发布时间:2016-10-19 13:00:09
在很多情况下,我们网站可能会展示我们的产品图片、以及教程视频等内容,结合一个比较好的图片、视频展示插件,能够使得我们的站点更加方便使用,也更加酷炫,在Github上有很多相关的处理插件可以找来使用,有些效果还非常好,本篇介绍使用图片视频展示插件blueimp Gallery改造网 ...

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

1、blueimp Gallery插件介绍

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

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

视频的展示界面如下所示

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

我们打开一般看不到其图片展示的内容,可以看到部分视频的展示,不过页面对功能的使用介绍的非常详细,我们可以下载代码进行测试,就可以获得我们所需的效果了。

图片的画廊(幻灯片)展示方式和视频是一直的,只是视频的中间有一个播放按钮而已,如果是图片的幻灯片展示方式,那么界面图形如下所示,可以看到两者是非常类似的,听说这个控件还可以自己扩展展示其他文档内容,如HTML、PDF等,不过我没有进行测试。

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

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

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

从效果来看可以整体了解到这个插件效果是非常好的一个插件,因此想用它来对我公司网站:广州爱奇迪 上的视频和图片进行更佳效果的展示。

 

2、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"> 

原标题:使用图片视频展示插件blueimp Gallery改造网站的视频图片展示

关键词:视频

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。