jquery - fancybox v2 でフルサイズのボタンを追加する

Question

現在、Fancybox で画像をフル サイズで表示する唯一の方法は、ボタン ヘルパーを呼び出すことですが、これにより残りのボタン (再生、次へ、前へなど) も呼び出されます。Fancybox コンテナの隅に、フル サイズと自動サイズを切り替えるボタンを 1 つ追加したいと思います。追加のリクエストを避けるために、通常の js および css ファイルに変更を追加することをお勧めします。何か案は？

Answer 1

例としてもう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;
}