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

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