Question

我在我的网站上使用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的大小增加，但位置不在我的屏幕的中心所以我试图用$ .fancybox.center（）;但那没用。

第二件事是图像所在的div不会增加宽度，所以我得到一些滚动条。我尝试用$（“＃showInvoice”）来修复它.width（1000）;但我仍然得到滚动条而不是宽度为1000px的div。

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

提前致谢！

Answer 1

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

$(window).resize();

单击fancybox时调整fancybox的大小

1 个答案: