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

时间:2012-04-12 19:18:05

标签: jquery fancybox

目前,在Fancybox中以完整大小查看图像的唯一方法是调用按钮帮助程序,但这也会带来其余按钮(Play,Next,Prev等)。我想在Fancybox容器的一角添加一个按钮,它将切换完整/自动大小;最好添加对常规js和css文件的更改,以避免其他请求。有什么想法吗?

2 个答案:

答案 0 :(得分: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);
}

答案 1 :(得分:0)

不要浪费你的时间来改变javascript,你可以用这个css技巧只显示close和fullsize按钮。

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

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