欢迎访问

云南鼎浩信息技术有限公司官方网站,云南网站建设诚信品牌!

鼎浩网络,云南鼎浩信息技术有限公司

鼎浩客服热线

DING HAO COLUMN 鼎浩专栏

鼎浩的一些分享
Sharing from Ding Hao

  • 鼎浩服务
  • 1

使用AD Gallery制作强大的相册画廊

来源:     2013年07月02日17:02
字号:T|T

AD Gallery是一个带缩略图导航浏览,可设置照片标题和备注说明信息的jQuery相册插件。该插件提供了许多可配置的参数和方法,具有很强的定制功能。

查看演示DEMO 下载源码

主要特性:

可以选择不同的展示效果,如上下左右滑动、淡入淡出、缩放交替等效果。

支持键盘方向键切换。

图片左右导航。

预加载图像,直到完全显示。

支持自动播放和暂停。

可设置照片标题和描述信息。

图片尺寸自适应。

多种回调函数。

如何使用?

1、准备Javascript及插件和CSS样式文件。


demo中包含了插件文件和样式,jquery库可以直接到下载。

2、XHTML。


说明:最外层的DIV.ad-gallery是整个相册的包含层。DIV.ad-image-wrapper放置所有大图片,DIV.ad-controls放置控制按钮如开始和暂停,DIV.ad-nav用来放置缩略图。我们给每一张缩略图设置了title属性用来展示图片的标题,alt属性用来展示图片的描述信息。

3、应用Gallery插件。

$(function(){
   $('.ad-gallery').adGallery();
});

AD Gallery插件常用参数一览表

参数 描述 默认值
start_at_index 第一张展示的大照片 0
width 照片的宽度,默认为false,为false时直接读取css的宽度 false
height 照片的高度,默认为false,为false时直接读取css的高度 false
thumb_opacity 设置缩略图的透明值 0.7
description_wrapper 可以设置一个DIV用来展示照片的标题和描述信息。如description_wrapper: $('#descriptions') false
display_next_and_prev 是否显示上一张下一张导航按钮 true
display_back_and_forward 是否显示缩略图导航按钮 true
effect 窗口标题属性 title
splitTitle 设置展示效果,'slide-hori', 'slide-vert', 'fade', 'resize', 'none' 'slide-hori'
enable_keyboard_move 是否使用键盘方向键切换导航 true
cycle 是否循环显示照片,如果设置为false时,则到最后一张照片时就会停止切换 true
slideshow 用来设置开始和暂停功能
enable: true,//是否启用开始和暂停功能
autostart: true,是否自动播放
speed: 5000,切换时间
start_label: 'Start',开始按钮显示的内容,可以为图片按钮
stop_label: 'Stop',停止按钮显示的内容,可以为图片按钮
onStart: function() {
// Do something wild when the slideshow starts
},
onStop: function() {
// Do something wild when the slideshow stops
}
 
 

您还可以通过修改CSS文件来定制相册的外观。


客服中心
点击进行在线咨询

QQ咨询 咨询QQ:79929313 咨询QQ:88139574 咨询QQ:122790803

咨询热线:0871-63399840

客服热线:0871-63523332

客服中心 客服中心