Question

目前，在Fancybox中以完整大小查看图像的唯一方法是调用按钮帮助程序，但这也会带来其余按钮（Play，Next，Prev等）。我想在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技巧只显示close和fullsize按钮。

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

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

在fancybox v2中添加一个完整大小的按钮

2 个答案: