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

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

AD Gallery 相册 ad-gallery ad-galleryAPI

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); }

[html]  view plain copy

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