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.center（）;で修正しようとしました。しかし、それは動作しませんでした。
2番目のことは、画像のある場所のdivが幅を増やさないためにスクロールバーが表示されることです。私は$（ "＃showInvoice"）でそれを修正しようとしました。しかし、私は1000pxの幅を持つdivの代わりにスクロールバーを取得します。
だから私は誰かがこれを手伝ってくれることを願っています。
ありがとうございます！