Wordpress网站中的Fancybox不显示PDF

Question

PDF不会在this website上的Fancybox中显示（滚动到菜单和预订以触发fancybox）。

加载Fancybox

<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js?ver=4.0.1'></script>

HTML

<a class="hiddenlink fancybox" rel="group1" href="wp-content/uploads/2015/02/ontdekkingsmenu.pdf"></a>
<a class="hiddenlink fancybox" rel="group1" href="wp-content/uploads/2015/02/bistronomy_uitnodiging.jpg"></a>

JS + Jquery

$(document).ready(function() {
    $('.fancybox').fancybox({
        type: 'html',
        openEffect: 'none',
        closeEffect: 'none',
        nextEffect: 'fade',
        prevEffect: 'fade'
    });
});
$(document).scroll(function() {
    var docHeight = $(window).height();
    var scrollTop = $(document).scrollTop();
    var bodyClass = $('body').attr('class');
    if(scrollTop >= docHeight) {
        if(bodyClass == 'visited') {
            //nothing
        } else {
            $('body').addClass('visited');
            $('.hiddenlink').fancybox().trigger('click');
        }
    }
});

起初我没有宣布type: 'html'，但我在类似的帖子中找到了这个解决方案和type: 'iframe'，但这些解决方案对我没有用。

Answer 1

每个内容都需要自己的type：PDF文档应该与type:"iframe"一起使用，但图片需要type:"image"。

您可以做的是从脚本中删除type: "html"

$('.fancybox').fancybox({
    // type: 'html', // don't need this
    openEffect: 'none',
    closeEffect: 'none',
    nextEffect: 'fade',
    prevEffect: 'fade'
});

...并在HTML代码中添加特殊的fancybox data-fancybox-type属性，以指示fancybox应该处理的type内容：

<a class="hiddenlink fancybox" data-fancybox-type="iframe" rel="group1" href="document.pdf">Opens PDF</a>

<a class="hiddenlink fancybox" data-fancybox-type="image" rel="group1" href="image.jpg">Opens image</a>