Question

我正在尝试在我的应用程序中使用lighbox或fancybox而没有宝石......

我已经尝试输入资产/ javascript和assets / stylesheet .js和.css文件。但它们只有在刷新页面时才有效。

在我的application.html.erb

中

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox").fancybox();
        });
    </script>

输出：

<link data-turbolinks-track="true" href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/home.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.fancybox.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/novidades.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/home.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.fancybox.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.fancybox.pack.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/novidades.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox").fancybox();
        });
    </script>

什么是错的？

Answer 1

<强> Turbolniks

即使你提到你这样做“没有宝石”，它也有turbolinks

的所有问题标志。

如果您不知道，Turbolinks是与Rails捆绑在一起的宝石，可以帮助您更快地加载页面。它通过基本上拉取页面的<body>内容，使<head>保持完整来实现此目的。

尽管Turbolinks在大多数情况下都有效，但它有一个主要缺陷 - 因为在加载页面时JS没有刷新（因为页面的head区域保持不变），JS一般除非您刷新页面（并因此刷新<head>标记），否则不会“正常工作”。

-

<强>修正

有几种方法可以“解决”这个问题 - 基本上让你的JS使用Turbolinks刷新：

首先，您需要使用Turbolinks Events：

#app/assets/javascripts/application.js
var fancybox = function(){
    $(".fancybox").fancybox();
};
$(document).on("page:load ready", fancybox);

此应该适合您。另一种解决方案是使用Javascript Delegation，虽然我认为在这种情况下它不适用于Fancybox

Answer 2

<script type="text/javascript">    
    $(document).ready(function() {
        $(".fancybox").fancybox({
            parent : 'body'
        });
    });
</script>

添加{parent：＆＃39; body＆＃39;}为我工作！

Answer 3

这些解决方案都不适合我，所以我会放弃对我有用的东西，同时使用 turbolinks 和fancybox v1：

$(document).on('turbolinks:load', function () {

  // this makes sure fancybox has all the elements it needs,
  // that turbolinks removed, while changing page
  $.fancybox.init();

  $('*[data-js-image-popup]').fancybox( {} );

});

带有Rails 4.1.4的Lightbox或Fancybox仅在刷新后有效

3 个答案: