关于ad-gallery.js
AD Gallery是一个带缩略图导航浏览，可设置照片标题和备注说明信息的jQuery相册插件。该插件提供了许多可配置的参数和方法，具有很强的定制功能。
关键代码
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper gallery">
</div>
<div class="ad-controls clear">
</div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li><a href="images/1.jpg">
<img src="images/1.jpg" alt='' title="图片标题"></a>
<div class="ad-text">
</div>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.ad-gallery.js"></script>
<script type="text/javascript">
window.onload = function () {
var galleries = $('.ad-gallery').adGallery({
start_at_index: 0
});
}
</script>参数说明
<script type="text/javascript">
var galleries = $('.ad-gallery').adGallery({
loader_image: 'loader.gif',
// 加载时的照片
// 照片的宽度，默认为false,为false时直接读取css的宽度
width: 600,
// 照片的高度，默认为false,为false时直接读取css的高度
height: 400,
// 设置缩略图的透明值
thumb_opacity: 0.7,
// 第一张展示的大照片
start_at_index: 0,
update_window_hash: true,
// 可以设置一个DIV用来展示照片的标题和描述信息。如description_wrapper: $('#descriptions')
description_wrapper: $('#descriptions'),
// 是否让第一张图也是以动画显示出来
animate_first_image: false,
// 切换图片时间
animation_speed: 400,
// 是否显示上一张下一张导航按钮
display_next_and_prev: true,
// 是否显示缩略图导航按钮
display_back_and_forward: true,
// 如果为0，跳转容器宽度
scroll_jump: 0,
//用来设置开始和暂停功能
slideshow: {
enable: true,//是否启用开始和暂停功能
autostart: true,//是否自动播放
speed: 5000,//切换时间
start_label: 'Start',//开始按钮显示的内容，可以为图片按钮
stop_label: 'Stop', //停止按钮显示的内容，可以为图片按钮
stop_on_scroll: true, //当停止时是否滚动小图列表
countdown_prefix: '(',//倒记时左边
countdown_sufix: ')',//倒记时右边
onStart: function() {
// Do something wild when the slideshow starts
},
onStop: function() {
// Do something wild when the slideshow stops
}
},
// 设置展示效果，'slide-hori', 'slide-vert', 'fade', 'resize', 'none'
effect: 'slide-hori',
// 是否使用键盘方向键切换导航
enable_keyboard_move: true,
// 是否循环显示照片
cycle: true,
// All hooks has the AdGallery objects as 'this' reference
hooks: {
// If you don't want AD Gallery to handle how the description
// should be displayed, add your own hook. The passed image
// image object contains all you need
displayDescription: function(image) {
alert(image.title +" - "+ image.desc);
}
},
// 回调
callbacks: {
//初始化
init: function () {
// 加载全部图片
this.preloadAll();
// 加载回三个
this.preloadImage(0);
this.preloadImage(1);
this.preloadImage(2);
},
// 回调图片后的
afterImageVisible: function () {
// 加载下一张图
var context = this;
this.loading(true);
this.preloadImage(this.current_index + 1,
function () {
// This function gets executed after the image has been loaded
context.loading(false);
});
// 不同的动画效果
if (this.current_index % 2 == 0) {
this.settings.effect = 'slide-hori';
} else {
this.settings.effect = 'fade';
}
},
// 回调图片前的
beforeImageVisible: function(new_image, old_image) {
// Do something wild!
}
}
});
</script>
