Fancybox全宽显示

Question

我是一个编码新手，我想让每个fancybox都只在我的主页以全宽和响应式（如例如）显示，但这些选项（fitToView、autoSize或aspectRatio）都没有完成工作。

jQuery

jQuery(document).ready(function() {
jQuery( "#site-logo" ).click(function( e ) {
    alert( "As you can see, the link no longer took you to jquery.com" );
    jQuery.scrollTo( 0 , 1000, { easing:'easeInOutExpo' });
$(".fancybox").fancybox({
    helpers : {
        media: true 
        },
        width: 1600,
        height: 870,
        aspectRatio: true,
        scrolling: no,
        });
    });
});

- joemimmo

---

你有检查过 http://fancyapps.com/fancybox/#useful 的第13条吗？ - JFK

@JFK 是的，我也查看了指南以寻找解决方案。另外，#13仍然无法工作=( - joemimmo

在 Stack Overflow 上查找，我发现了这个链接（http://stackoverflow.com/questions/28079791/change-vimeo-youtube-default-size-in-wordpress）。 尝试将此代码添加到 function.php 中，并取消 CSS / jQuery Fancybox，但仍然没有变化。 - joemimmo

@JFK 如果我想要在全屏模式下打开fancybox怎么办？fitToView无法正常工作。 - joemimmo

Answer 1

尝试添加autoSize false，移除aspectRatio并将width更改为“100％”：

jQuery(document).ready(function() {
    jQuery( "#site-logo" ).click(function( e ) {
    alert( "As you can see, the link no longer took you to jquery.com" );
    jQuery.scrollTo( 0 , 1000, { easing:'easeInOutExpo' });
    $(".fancybox").fancybox({
        helpers : {
            media: true 
        },
        width: "100%",
        height: 870,
        autoSize: false,
        scrolling: false
        });
    });
});

- Dimas Pante

---

奇怪。让我们从头开始，你只需要使用fancybox吗？ - Dimas Pante

如果将 fitToView 设置为 true 呢？ - Dimas Pante

没有改变。我也尝试将该代码仅应用于主页，以避免在导演页面上出现错误。.home .fancybox-wrap, .fancybox-wrap .fancybox-skin {width: 100% !important; height: 100% !important; margin: 0px; text-align: center;} - joemimmo

@bluefeet 谢谢你，由于我的声望值较低，我无法完成它=) - joemimmo

那么，你有解决方案了吗？我也遇到了同样的问题。我的网站上的Fancybox只使用了大约70％的屏幕宽度...我使用视口定义来允许缩放。 - basZero

Answer 2

如果将来其他人搜索时遇到同样的问题，我也有同样的困扰，我需要图片（弹出）宽度全屏显示，即使图片高度超过了屏幕，所以我希望它可以滚动。无论如何，我希望这能对将来的某个人有所帮助。

<script type="text/javascript">
jQuery(document).ready(function($) {
    $(".fancybox").fancybox({
        autoSize : true,
        scrolling : 'auto',
        fitToView : false,
        width : 'auto',
        maxWidth : '100%',
    });
});
</script>

- Derek

---

随着Rev Slider的重大更新，我没有测试它的机会，有其他人成功了吗？ http://www.wdirectors.com/ - joemimmo

Answer 3

在我的电脑上，没有任何解决方案有效。因此，我发布了在我的电脑上有效的解决方案。 这段代码应该放在你弹出窗口代码所在的页面上。

.fancybox-content {
        width: 100% !important;
    }

- pankaj