0

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

何か案は？

4

1 に答える 1

0

これは私が決めたものですが、まだ完全ではありません。

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
});
于 2012-05-30T11:06:53.853 に答える