jquery - Fancybox のサイズ変更が機能しない

Question

ファンシーボックスポップアップに画像と1つのボタンを表示する必要がありますが、正しく表示できません。

私は2つの異なる方法でそれを試しました：

1. 画像を取得し、ボタンを HTML に追加します。

   $('a.zoom').fancybox({
       type: 'image',
       onComplete: function() {
          $('#fancybox-content').append('<button>Click</button>');
          $.fancybox.resize() // this won't do anything
       }
   });
   

   このように、ポップアップ ボックスは画像の高さになり、ボタンは表示されません。

2. HTML を表示しています。

   $('a.zoom').live('click', function(ev) {
       ev.preventDefault();
       var url = $(this).attr('href');
       var content = '<img src="' + url + '" />';
       var id = $(this).parent().attr('data-frame-id');
   
       $.fancybox({
           content: content + '<button>Click</button>',
           type: 'html',
           onComplete: function() {
               $.fancybox.resize();
           }
       });
   });
   

   このように、ポップアップ ボックスの高さは正しいですが、幅はボタンの幅のみです。

どちらの方法で$.fancybox.resize()も、何もしないようで、オプションautoScaleもautoDimensionsどちらもありません。

画像とボタンの両方を正しく表示するにはどうすればよいですか?

---

生成された HTML

<div id="fancybox-overlay" style="background-color: rgb(119, 119, 119); opacity: 0.7; cursor: pointer; height: 937px; display: block; "></div>
<div id="fancybox-wrap" style="width: 1020px; height: auto; top: 34px; left: 421px; display: block; ">
    <div id="fancybox-outer">
        <div class="fancybox-bg" id="fancybox-bg-n"></div>
        <div class="fancybox-bg" id="fancybox-bg-ne"></div>
        <div class="fancybox-bg" id="fancybox-bg-e"></div>
        <div class="fancybox-bg" id="fancybox-bg-se"></div>
        <div class="fancybox-bg" id="fancybox-bg-s"></div>
        <div class="fancybox-bg" id="fancybox-bg-sw"></div>
        <div class="fancybox-bg" id="fancybox-bg-w"></div>
        <div class="fancybox-bg" id="fancybox-bg-nw"></div>
        <div id="fancybox-content" style="border-width: 10px; width: 1000px; height: 809px; ">
            <img id="fancybox-img" src="http://localhost/img.php?id=24" alt="">
            <button id="usethis">Use this frame</button>
        </div>
        <a id="fancybox-close" style="display: inline; "></a>
        <div id="fancybox-title" style="display: none; "></div>
        <a href="javascript:;" id="fancybox-left">
            <span class="fancy-ico" id="fancybox-left-ico"></span>
        </a>
        <a href="javascript:;" id="fancybox-right">
            <span class="fancy-ico" id="fancybox-right-ico"></span>
        </a>
    </div>
</div>

Answer 1

<div id="fancybox-title">の目的は<div id="fancybox-content">画像のみを対象としているため、ボタンは の内側に配置する必要があります。