2012-02-28 132 views
0

我使用fancybox为我的网站放大我的照片。我想要的是制作一种缩放功能。调整fancybox当我点击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。

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

在此先感谢!

回答

1

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

$(window).resize();