花式盒子全宽答案

【问题标题】：Fancybox full width花式盒子全宽
【发布时间】：2015-03-20 10:33:37
【问题描述】：

我是编码新手，我试图让每个花式框都只在我的 homepage 全宽和响应式 (eg) 中，但这些选项都没有完成这项工作（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,
        });
    });
});

【问题讨论】：

你查过fancyapps.com/fancybox/#useful13号吗？
@JFK 是的，我还查看了指南以寻找解决方案。另外 #13 仍然无法正常工作=(
@JFK 在stackover中挖掘我发现了这个（stackoverflow.com/questions/28079791/…）。尝试将此代码添加到 function.php 并取下 css/jquery fancybox 但仍然没有任何变化。
@JFK 如果我想全屏打开fancybox怎么办？ fitToView 不工作..

标签： jquery css fancybox vimeo vimeo-api

【解决方案1】：

尝试添加一个 autoSize false，删除 aspectRatio 并将宽度更改为“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
        });
    });
});

【讨论】：

在stackover中挖掘我发现了这个（stackoverflow.com/questions/28079791/…）。尝试将此代码添加到 function.php 并取下 css/jquery fancybox 但仍然没有任何变化。
奇怪。让我们从一开始，你只需要使用fancybox？
实际上不，我希望每张幻灯片的视频都弹出全宽和响应式（或类似 1300x731），就像在 [eg] 中一样。 (anonymouscontent.com)。由于我没有安装fancybox插件，所以fancybox必须在这个主题内，这就是我使用它的原因。如果有其他方法可以实现例如，我愿意接受任何选择。
嗯，明白了。如果您尝试在.fancybox-wrap, .fancybox-wrap .fancybox-skin{width: 100% !important; height: 100% !important; margin: 0px; text-align: center} 中更改您的 CSS 怎么办？
事实上这是我的第一个解决方案，但正如您所见now 皮肤太大（我的膝盖是 1680 x 1050）而且视频很小。然后我尝试添加.fancybox-wrap, .fancybox-inner{width: 100% !important; height: 100% !important; margin: 0px; text-align: center}，视频就像包装一样，有点超出空间=）

【解决方案2】：

对于其他寻找未来搜索的人来说，我遇到了同样的问题，我需要图像（弹出）是全宽的，即使图像具有溢出高度，所以我希望它是可滚动的。无论如何，我希望这对将来的某人有所帮助。

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

【讨论】：

Rev 滑块有一个巨大的更新，我没有机会测试它，还有其他人成功了吗？ wdirectors.com

【解决方案3】：

在我这边，没有任何解决方案有效。所以我发布了我的解决方案。这段代码应该放在您的 pop Blade 代码编写的页面上。

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

【讨论】：