jquery - 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 工作。这是怎么回事？

Answer 1

尝试添加明显parent选项

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

Answer 2

根据 r0ma 的回答，这对我有用：

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

Answer 3

遇到同样的问题，安装 jquery-turbolinks gem 就像 fatfrog 所说的那样解决了它。

jquery-turbolinks

Answer 4

这对我有用

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