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

分类： JS2013-10-29 11:35 89人阅读 评论(0) 收藏 举报

AD Gallery相册ad-galleryad-galleryAPI

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

http://www.helloweba.com/view-blog-61.html

这个上面说的详细，就是插件常用参数一览表不够详细我所以我就只说明一下这个参数表吧

AD Gallery插件常用参数一览表

参数描述默认值loader_image加载时的照片loader.gifwidth照片的宽度，默认为false,为false时直接读取css的宽度falseheight照片的高度，默认为false,为false时直接读取css的高度falsethumb_opacity设置缩略图的透明值0.7start_at_index第一张展示的大照片0update_window_hash没用过，这是英文说明，不太懂Whether or not the url hash should be updated to the current imagetruedescription_wrapper可以设置一个DIV用来展示照片的标题和描述信息。如description_wrapper: $('#descriptions')$('#ad-image-description')animate_first_image是否让第一张图也是以动画显示出来falseanimation_speed切换图片时间400display_next_and_prev是否显示上一张下一张导航按钮truedisplay_back_and_forward是否显示缩略图导航按钮truescroll_jump如果为0，跳转容器宽度0slideshow用来设置开始和暂停功能
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窗口标题属性titleenable_keyboard_move是否使用键盘方向键切换导航truecycle是否循环显示照片，如果设置为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);
} 

[html] view plaincopy

1. var galleries = $('.ad-gallery').adGallery({  
2.   loader_image: 'loader.gif',  
3.   // Width of the image, set to false and it will   
4.   // read the CSS width  
5.   width: 600,   
6.   // Height of the image, set to false and it   
7.   // will read the CSS height  
8.   height: 400,   
9.   // Opacity that the thumbs fades to/from, (1 removes fade effect)  
10.   // Note that this effect combined with other effects might be   
11.   // resource intensive and make animations lag  
12.   thumb_opacity: 0.7,  
13.   // Which image should be displayed at first? 0 is the first image    
14.   start_at_index: 0,   
15.   // Whether or not the url hash should be updated to the current image  
16.   update_window_hash: true,   
17.   // Either false or a jQuery object, if you want the image descriptions  
18.   // to be placed somewhere else than on top of the image  
19.   description_wrapper: $('#descriptions'),   
20.   // Should first image just be displayed, or animated in?  
21.   animate_first_image: false,  
22.   // Which ever effect is used to switch images, how long should it take?    
23.   animation_speed: 400,   
24.   // Can you navigate by clicking on the left/right on the image?  
25.   display_next_and_prev: true,   
26.   // Are you allowed to scroll the thumb list?  
27.   display_back_and_forward: true,   
28.   // If 0, it jumps the width of the container  
29.   scroll_jump: 0,   
30.   slideshow: {  
31.     enable: true,  
32.     autostart: true,  
33.     speed: 5000,  
34.     start_label: 'Start',  
35.     stop_label: 'Stop',  
36.     // Should the slideshow stop if the user scrolls the thumb list?  
37.     stop_on_scroll: true,   
38.     // Wrap around the countdown  
39.     countdown_prefix: '(',   
40.     countdown_sufix: ')',  
41.     onStart: function() {  
42.       // Do something wild when the slideshow starts  
43.     },  
44.     onStop: function() {  
45.       // Do something wild when the slideshow stops  
46.     }  
47.   },  
48.   // or 'slide-vert', 'resize', 'fade', 'none' or false  
49.   effect: 'slide-hori',   
50.   // Move to next/previous image with keyboard arrows?  
51.   enable_keyboard_move: true,   
52.   // If set to false, you can't go from the last image to the first, and vice versa  
53.   cycle: true,   
54.   // All hooks has the AdGallery objects as 'this' reference  
55.   hooks: {  
56.     // If you don't want AD Gallery to handle how the description  
57.     // should be displayed, add your own hook. The passed image  
58.     // image object contains all you need  
59.     displayDescription: function(image) {  
60.       alert(image.title +" - "+ image.desc);  
61.     }  
62.   },  
63.   // All callbacks has the AdGallery objects as 'this' reference  
64.   callbacks: {  
65.     // Executes right after the internal init, can be used to choose which images  
66.     // you want to preload  
67.     init: function() {  
68.       // preloadAll uses recursion to preload each image right after one another  
69.       this.preloadAll();  
70.       // Or, just preload the first three  
71.       this.preloadImage(0);  
72.       this.preloadImage(1);  
73.       this.preloadImage(2);  
74.     },  
75.     // This gets fired right after the new_image is fully visible  
76.     afterImageVisible: function() {  
77.       // For example, preload the next image  
78.       var context = this;  
79.       this.loading(true);  
80.       this.preloadImage(this.current_index + 1,  
81.         function() {  
82.           // This function gets executed after the image has been loaded  
83.           context.loading(false);  
84.         }  
85.       );  
86.   
87.       // Want slide effect for every other image?  
88.       if(this.current_index % 2 == 0) {  
89.         this.settings.effect = 'slide-hori';  
90.       } else {  
91.         this.settings.effect = 'fade';  
92.       }  
93.     },  
94.     // This gets fired right before old_image is about to go away, and new_image  
95.     // is about to come in  
96.     beforeImageVisible: function(new_image, old_image) {  
97.       // Do something wild!  
98.     }  
99.   }  
100. });  
101.   
102. // Set image description  
103. some_img.data('ad-desc', 'This is my description!');  
104.   
105. // Change effect on the fly  
106. galleries[0].settings.effect = 'fade';  

原地址：http://adgallery.codeplex.com/documentation