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 >
|
原标题:多用途响应式jQuery视频和图片画廊插件
关键词:jquery