当我点击fancybox时调整fancybox的大小答案

【问题标题】：resize fancybox when I click the fancybox当我点击fancybox时调整fancybox的大小
【发布时间】：2012-08-13 20:37:45
【问题描述】：

我在我的网站上使用 fancybox 来放大我的图片。我想要的是做一种缩放功能。

当fancybox打开时，我点击fancybox中的图片，我想增加fancybox的宽度

我尝试了类似的东西

标记：

<div style="display:none;">
<div id="view_invoice" style="height:950px; width:663px;">
    <div class="process"><img src="../../images/progress.gif" /></div>
    <div id="showInvoice" style="position:absolute;"></div>
</div></div><a id="get_invoice" href="#view_invoice" style="display:none;">link</a>

jQuery：

$('.table_content_results table').click(function()
{
    $('#showInvoice').html('');
    var invoiceDir = $(this).attr('dir');
    var invoiceId = $(this).attr('id');
    $.ajax({
        type: "POST",
        url: "includes/get_pdf.php",
        data: "INVOICE_ID="+invoiceDir,
        complete: function(data)
        {
            $('#showInvoice').html(data.responseText);
        }
    });

    $("#get_invoice").fancybox(
    {
        'overlayOpacity'    : 0.6,
        'overlayColor'      : '#000',
        'titlePosition'     : 'inside',
        'transitionIn'      : 'fade',
        'transitionOut'     : 'fade',
        'easingIn'          : 'swing',
        'padding'           : 10,
        'autoDimensions'    : true
    }
    ).trigger('click');
});

$("#showInvoice").click(function()
{
    $("#view_invoice").animate({ width: 1000 });
    $("#showInvoice").width(1000);
    $("#showInvoice").children('img').animate({ width: 1000 });
    $('#fancybox-wrap').width(1000);
    $.fancybox.center();
});

这有效但不正确。花式框的大小增加了，但位置不在我的屏幕中心，所以我尝试用 $.fancybox.center(); 修复它。但这没有用。

第二件事是图像所在的 div 没有增加宽度，所以我得到了一些滚动条。我试图用 $("#showInvoice").width(1000);但我仍然得到滚动条而不是宽度为 1000 像素的 div。

所以我希望有人可以帮助我。

提前致谢！

【问题讨论】：

标签： javascript jquery fancybox

【解决方案1】：

毕竟您可以尝试调整窗口大小。

$(window).resize();

【讨论】：