jquery - 在 fancybox v2 中添加一个完整尺寸的按钮

Question

目前，在 Fancybox 中查看全尺寸图像的唯一方法是调用按钮助手，但这也会带来其余按钮（播放、下一个、上一个等）。我想在 Fancybox 容器的一角添加一个按钮，用于切换全/自动大小；最好添加对常规 js 和 css 文件的更改，以避免额外的请求。有任何想法吗？

Answer 1

另一种变体为例（fancybox 2.1.5）：

$('.fancybox').fancybox({
  afterShow: function() {
    $('<div class="fancybox-fullsize"></div>').appendTo(this.skin).click(function() {
      $.fancybox.toggle();
      $(this).toggleClass('fancybox-fullsize fancybox-fullsize-r');
    });
  }
});

和CSS：

.fancybox-fullsize, .fancybox-fullsize-r {
  position: absolute;
  width: 36px;
  height: 36px;
  top: -18px;
  left: -18px;
  z-index: 99999;
  cursor: pointer;
}

.fancybox-fullsize {
  background-image: url(img/fancybox_fullsize.png);
}

.fancybox-fullsize-r {
  background-image: url(img/fancybox_fullsize-r.png);
}

Answer 2

不要浪费你的时间来改变 javascript，你可以用这个 css 技巧只显示关闭和全尺寸按钮。

#fancybox-buttons a.btnPrev, #fancybox-buttons a.btnNext, #fancybox-buttons a.btnPlay {
   display:none;
}

#fancybox-buttons ul {
  width:80px;
}