你的位置:首页 > Java教程

[Java教程]多用途响应式jQuery视频和图片画廊插件


Unite Gallery是一款功能强大的多用途响应式视频和图片画廊jQuery插件。它使用模块化技术,使用简单,易于定制。你可以通过CSS来改变画廊的皮肤,甚至可以自定义主题样式。它还支持移动触摸,支持图片缩放等。它的特点还有:

  • 可以在画廊中播放视频和音频文件。
  • 响应式-自动适配任何屏幕和容器,自动调整比例。
  • 可通过单独的CSS文件来更换画廊皮肤。
  • 多种主题-画廊提供了多种主题,每一种主题都有各自的特点。
  • 支持图片缩放-画廊中的大图可以进行缩放。
  • 提供各种功能按钮,移动设备中也能使用。
  • 画廊可以通过键盘的方向键进行控制。
  • 丰富的配置参数。
  • 强大的API支持。

在线预览    源码下载

 使用方法

使用该图片画廊至少需要移入下面的文件。

1
2
3
4
5
6
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='unitegallery/js/unitegallery.min.js'></script>
 
<link rel='stylesheet' href='unitegallery/css/unite-gallery.css' type='text/css' />
<script type='text/javascript' src='unitegallery/themes/default/ug-theme-default.js'></script>
<link rel='stylesheet' href='unitegallery/themes/default/ug-theme-default.css' type='text/css' />                



 HTML结构

该图片画廊使用一个<div>元素来作为包裹元素,里面放置一组图片。

1
2
3
4
5
6
7
8
9
<div id="gallery" style="display:none;">
  <img alt="Image 1 Title" src="thumbs/image1.jpg"
    data-image="images/image1.jpg"
    data-description="Image 1 Description">
     
  <img alt="Image 2 Title" src="thumbs/image2.jpg"
    data-image="images/image02.jpg"
    data-description="Image 2 Description">
</div>