使用jQuery再现谷歌图像查看器

我正在尝试在我的项目中模拟谷歌图像预览。我想我差不多到了，但有几件事我很难实现。

因此，图像查看器应该执行以下操作：

1. 单击缩略图将在右侧打开预览面板在下面，关闭另一行的另一个预览面板。关闭其他面板和打开当前面板需要幻灯片转换。

2. 单击相同的缩略图将关闭预览面板。

3. 单击"X"也将关闭预览面板。

4. 打开同一行的另一个缩略图不会执行任何打开/关闭操作，只会交换内容。

到目前为止，我的成就是：

1. 正在部分工作，因为它只会为第一个预览面板，不会使用幻灯片切换打开/关闭不再我不确定其他小组是如何结束的——我还没有任何实现
2. 我无法在所有其他条件下一起工作。我试着使用触发缩略图的id，并将该id分配给预览面板，然后如果它们匹配，关闭预览面板，但它会同时打开/关闭，这不是我想要的点击切换
3. 工作正常
4. 工作正常，尽管我不能100%确定我使用oldIndex的方法

这是JS Fiddle，供您使用，包含以下脚本。

$.videoWatch = function(element) {
  this.$element = $(element);
  this.init();
};
var oldIndex = -1;
$.videoWatch.prototype = {
  init: function() {
    this.$openLinks = this.$element.find(".open");
    this.$closeLinks = this.$element.find(".close");
    this.open();
    this.close();
  },
  _getContent: function(element) {
    var $parent = element.parent(),
      title = $parent.data('title');
    return {
      title: title
    }
  },
  open: function() {
    var self = this;
    self.$openLinks.on("click", function(e) {
      e.preventDefault();
      var $a = $(this),
        content = self._getContent($a),
        $li = $a.parents("li"),
        $title = $(".title");
      $title.text(content.title);
      $li.append($(".preview"));
      var $preview = $li.find(".preview");
      if (!($li.index() == oldIndex)) {
        $preview.slideDown('fast');
        oldIndex = $li.index();
      }
    });
  },
  close: function() {
    this.$closeLinks.on("click", function(e) {
      e.preventDefault();
      $(this).parent().slideUp('fast');
            oldIndex = -1;
    });
  }
};
$(function() {
  var watch = new $.videoWatch("ul");
});