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?
  slide: 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';

var galleries = $('.ad-gallery').adGallery({update_window_hash: false});

if (this.current_description) this.current_description.remove();

var galleries = $('.ad-gallery').adGallery({
  hooks: {
    displayDescription: function(image) {
      console.log(image);
    }
  }
});

// The first argument is the name of your animation, which you then set in
// galleries[0].settings.effect
// The second argument is the function that handles the animation and it takes
// three arguments. The first is a jQuery object to the div that holds the image
// element and the image description element of the image that should be displayed
// The second is the direction, either 'left' or 'right'
// The third is the jQuery object that holds the description
// Your function should return an object like this:
// {old_image: {}, new_image: {}, speed: 100, easing: 'swing'}
// 'speed' and 'easing' are optional
// 'old_image' and 'new_image' are sent to the jQuery animate-method
// so use it just like you would use the $.animate-method
// This function gets executed with the gallery instance as its context
// so 'this' points to the gallery instance
galleries[0].addAnimation('wild',
  function(img_container, direction, desc) {
    var current_left = parseInt(img_container.css('left'), 10);
    var current_top = parseInt(img_container.css('top'), 10);
    if(direction == 'left') {
      var old_image_left = '-'+ this.image_wrapper_width +'px';
      img_container.css('left',this.image_wrapper_width +'px');
      var old_image_top = '-'+ this.image_wrapper_height +'px';
      img_container.css('top', this.image_wrapper_height +'px');
    } else {
      var old_image_left = this.image_wrapper_width +'px';
      img_container.css('left','-'+ this.image_wrapper_width +'px');
      var old_image_top = this.image_wrapper_height +'px';
      img_container.css('top', '-'+ this.image_wrapper_height +'px');
    };
    if(desc) {
      desc.css('bottom', '-'+ desc[0].offsetHeight +'px');
      desc.animate({bottom: 0}, this.settings.animation_speed * 2);
    };
    if(this.current_description) {
      this.current_description.css('bottom', '-'+ this.current_description[0].offsetHeight +'px');
    };
    img_container.css('opacity', 0);
    return {old_image: {left: old_image_left, top: old_image_top, opacity: 0},
            new_image: {left: current_left, top: current_top, opacity: 1},
            easing: 'easeInBounce',
            speed: 2500};
  }
);
galleries[0].settings.effect = 'wild';

$(".ad-gallery").on("click", ".ad-image", function() {
  $.fancybox.open({
    href : $(this).find("img").attr("src"),
    closeBtn: false,
    closeClick : true,
    openEffect : 'elastic',
    openSpeed  : 150,
    closeEffect : 'elastic',
    closeSpeed  : 150,
    helpers : {
      overlay : null
    }
  });
});