jquery - Fancybox 调整大小不起作用

Question

我需要在fancybox 弹出窗口上显示图像和一个按钮，但无法正确显示。

我用两种不同的方法尝试过：

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">仅适用于图像