AD Gallery是一个带缩略图导航浏览,可设置照片标题和备注说明信息的jQuery相册插件。该插件提供了许多可配置的参数和方法,具有很强的定制功能。
http://www.helloweba.com/view-blog-61.html
这个上面说的详细,就是插件常用参数一览表不够详细我所以我就只说明一下这个参数表吧
AD Gallery插件常用参数一览表
参数 | 描述 | 默认值 |
loader_image | 加载时的照片 | loader.gif |
width | 照片的宽度,默认为false,为false时直接读取css的宽度 | false |
height | 照片的高度,默认为false,为false时直接读取css的高度 | false |
thumb_opacity | 设置缩略图的透明值 | 0.7 |
start_at_index | 第一张展示的大照片 | 0 |
update_window_hash | 没用过,这是英文说明,不太懂Whether or not the url hash should be updated to the current image | true |
description_wrapper | 可以设置一个DIV用来展示照片的标题和描述信息。如description_wrapper: $('#descriptions') | $('#ad-image-description') |
animate_first_image | 是否让第一张图也是以动画显示出来 | false |
animation_speed | 切换图片时间 | 400 |
display_next_and_prev | 是否显示上一张下一张导航按钮 | true |
display_back_and_forward | 是否显示缩略图导航按钮 | true |
scroll_jump | 如果为0,跳转容器宽度 | 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 } | |
effect | 设置展示效果,'slide-hori', 'slide-vert', 'fade', 'resize', 'none' | 'slide-hori' |
splitTitle | 窗口标题属性 | title |
enable_keyboard_move | 是否使用键盘方向键切换导航 | true |
cycle | 是否循环显示照片,如果设置为false时,则到最后一张照片时就会停止切换 | true |
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! } | |
hooks | 钩子 displayDescription: function(image) { alert(image.title +" - "+ image.desc); } |
- var galleries = $('.ad-gallery').adGallery({
- loader_image: 'loader.gif',
- // Width of the image, set to false and it will
- // read the CSS width
- width: 600,
- // Height of the image, set to false and it
- // will read the CSS height
- height: 400,
- // Opacity that the thumbs fades to/from, (1 removes fade effect)
- // Note that this effect combined with other effects might be
- // resource intensive and make animations lag
- thumb_opacity: 0.7,
- // Which image should be displayed at first? 0 is the first image
- start_at_index: 0,
- // Whether or not the url hash should be updated to the current image
- update_window_hash: true,
- // Either false or a jQuery object, if you want the image descriptions
- // to be placed somewhere else than on top of the image
- description_wrapper: $('#descriptions'),
- // Should first image just be displayed, or animated in?
- animate_first_image: false,
- // Which ever effect is used to switch images, how long should it take?
- animation_speed: 400,
- // Can you navigate by clicking on the left/right on the image?
- display_next_and_prev: true,
- // Are you allowed to scroll the thumb list?
- display_back_and_forward: true,
- // If 0, it jumps the width of the container
- scroll_jump: 0,
- slideshow: {
- enable: true,
- autostart: true,
- speed: 5000,
- start_label: 'Start',
- stop_label: 'Stop',
- // Should the slideshow stop if the user scrolls the thumb list?
- stop_on_scroll: true,
- // Wrap around the countdown
- countdown_prefix: '(',
- countdown_sufix: ')',
- onStart: function() {
- // Do something wild when the slideshow starts
- },
- onStop: function() {
- // Do something wild when the slideshow stops
- }
- },
- // or 'slide-vert', 'resize', 'fade', 'none' or false
- effect: 'slide-hori',
- // Move to next/previous image with keyboard arrows?
- enable_keyboard_move: true,
- // If set to false, you can't go from the last image to the first, and vice versa
- 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);
- }
- },
- // All callbacks has the AdGallery objects as 'this' reference
- callbacks: {
- // Executes right after the internal init, can be used to choose which images
- // you want to preload
- init: function() {
- // preloadAll uses recursion to preload each image right after one another
- this.preloadAll();
- // Or, just preload the first three
- this.preloadImage(0);
- this.preloadImage(1);
- this.preloadImage(2);
- },
- // This gets fired right after the new_image is fully visible
- afterImageVisible: function() {
- // For example, preload the next image
- 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);
- }
- );
- // Want slide effect for every other image?
- if(this.current_index % 2 == 0) {
- this.settings.effect = 'slide-hori';
- } else {
- this.settings.effect = 'fade';
- }
- },
- // This gets fired right before old_image is about to go away, and new_image
- // is about to come in
- beforeImageVisible: function(new_image, old_image) {
- // Do something wild!
- }
- }
- });
- // Set image description
- some_img.data('ad-desc', 'This is my description!');
- // Change effect on the fly
- galleries[0].settings.effect = 'fade';
原地址:http://adgallery.codeplex.com/documentation