Fancybox在Ruby on Rails上无法正常工作

Question

我在使用Fancybox 3和rails 5时遇到了问题，我的目标是嵌入一个响应式的Iframe，但是经过几个小时的测试，我还是没能让它工作。

根据文档，如果我想插入一个Iframe，我应该这样写：

<a data-fancybox data-type="iframe" data-src="http://codepen.io/fancyapps/full/jyEGGG/" href="javascript:;">
Webpage
</a>

使用此代码时，当我单击链接时，没有任何反应。我非常确定ruby和rails结构有问题，因为当我把一些javascript放在我的视图中时，fancybox启动了，但在框中返回了这个错误：“请求的内容无法加载。请稍后再试。”

以下是我在视图中使用javascript和HTML时几乎可以正常工作的代码：

<script type="text/javascript"> 
  var fancybox = function(){
    $('.fancybox').fancybox({ 
        iframe: {
            css: {
                width: '100%',
                height: '100%',
            }
        }
    });         
};
$(document).on("page:load ready", fancybox);

​

<a class="fancybox" data-fancybox data-type="iframe" data-src="https://spaces.archilogic.com/3d/!02e31ca5-41c2-4a7f-a25d-601810a7c85a?mode=view&amp;main-menu=interior&amp;view-menu=none&amp;presentation=loop" href="javascript:;">
    <h1>TITLE</h1>
</a>

最后，我通过这样做设法让Iframe工作，但它会在页面加载时计算Iframe大小，如果浏览器设置为不同的大小，它就不会再移动：

<script type="text/javascript"> 
  jQuery(function() {
    $("#visite3d").fancybox({
            width   : '100%',
            height  : '100%',
  });
});

​

<a id="visite3d" class="iframe" href="https://spaces.archilogic.com/3d/!02e31ca5-41c2-4a7f-a25d-601810a7c85a?mode=view&amp;main-menu=interior&amp;view-menu=none&amp;presentation=loop">
    <h1>Visite 3D</h1>
</a>

那么，有人知道为什么当我插入文档中提供的简单HTML时，fancybox的Iframe不能正常工作吗？

提前谢谢。

Answer 1

fancyBox不关心你是否在使用RoR，Wordpress，Laravel，在这里输入任何名字，只需遵循简单的步骤-确保所需的文件被加载，代码以正确的顺序执行，并且你的内容是可访问的。就这样。

由于您没有提供任何演示/测试页面，因此无法帮助您。