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"})
})

Jquery fancybox不会显示 - 仅在页面重新加载后

4 个答案: