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
});

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

1 个答案: