jQuery的fancybox不显示-只有在页面重新加载后才会显示

Question

这是我的观点：

<div id='profile_galery'>       
<ul>
<li class='big'><%=link_to image_tag(@profile.user.get_avatar(:large) ), @profile.user.get_avatar(:very_large), :class => 'fancybox'%></li>

这是我的JS代码：

$(document).on("ready page:change", function() {
$(".fancybox").fancybox({
        openEffect  : 'elastic'
    });
});

当我进入带有fancybox类的图片页面并点击它时，没有出现fancybox，但是……html发生了变化，页面被锁定。看起来fancybox已经打开但没有显示出来，并阻止了一切。当我重新加载页面时，fancybox就可以使用了。这是怎么回事？

- nowy2781

---

好的，我安装了Rails Gem Fancybox-rails，现在它可以工作了。我读到Fancybox在Rails 4中与Turbolinks有一些问题。 - nowy2781

感谢提供的提示，使用 jquery-turbolinks gem 似乎也可以解决这个问题。这里有一个关于该问题的 Railscast：http://railscasts.com/episodes/390-turbolinks - fatfrog

Answer 1

尝试明显添加parent选项

$('.fancybox').fancybox({ parent: "body"});

- r0ma

Answer 2

根据r0ma的回答，以下是对我有用的内容:

<script type="text/javascript", 'data-turbolinks-eval'="false">  
  $(document).bind('page:change', function(){
    $('.fancybox').fancybox({ parent: "body"})
  });
</script>

- vladCovaliov

Answer 3

我也曾遇到同样的问题，安装了fatfrog提到的jquery-turbolinks gem后问题得到解决。

jquery-turbolinks

- William Weckl

Answer 4

这对我有效

document.addEventListener("turbolinks:load", function() {
  $(".alert .close").click(function(){
    $(this).parent().hide();
  })
  $('.fancybox').fancybox({ parent: "body"})
})

- wells