pdf - Fancybox 无法使用 PDF 正确调整大小

Question

到目前为止，我一直在浏览 Fancybox API 和论坛，但没有运气。

基本上，当窗口调整大小时，fancybox 中的嵌入 PDF 会调整大小，但 fancybox 容器不会，并且会从浏览器的右侧流出。

这是它第一次打开的时间：http: //lizbmorrison.net/fancybox1.png

当窗口大小调整时：http: //lizbmorrison.net/fancybox2.png

HTML：

<li class="pdf"><a class="fancypdf" href="#mydoc">View PDF</a></li>
<div id="mydoc" style="display:none;">
    <embed class="embed" src="<?php echo wp_get_attachment_url( $PDF->ID ); ?>"></embed>
</div>

JS：

$(document).ready(function() {
var width = $(window).width() * 0.9;
var height = $(window).height() * 0.9;
$('.embed').css('width', width).css('height', height);
$('a.fancypdf').fancybox({
    'type': 'inline',
    'margin': 0,
    'centerOnScroll': false,
    'hideOnContentClick': false,
    'autoDimensions': true,
    'autoScale': true,
    'transitionIn': 'fade',
    'transitionOut': 'fade',
});
});
$(window).resize(function () {
var width = $(window).width() * 0.9;
var height = $(window).height() * 0.9;
$('.embed').css('width', width).css('height', height);
});

有任何想法吗？

Answer 1

这是我已经解决的问题，但仍然不完美。

HTML：

<li class="pdf"><a class="fancypdf" style="padding-top: 20px;"  href="<?php echo wp_get_attachment_url( $PDF->ID ); ?>">View PDF</a></li>

JS：

$('.fancypdf').fancybox({
    'type': 'iframe',
    'centerOnScroll': true,
    'width': 800,
    'height': 600,
    'margin': 20,
    'autoScale': false,
    'autoDimensions': false
});