3

これは私の見解です：

<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'
    });
});

ファンシーボックスクラスの画像のあるページに移動してクリックすると、ファンシーボックスはありませんが... htmlが変更され、ページがロックされます。ファンシーボックスが開かれているようですが、すべてが表示されず、ブロックされていません。ページをリロードすると、fancybox が機能します。どうしたの？

4

4 に答える 4

10

明らかにparentオプションを追加してみてください

$('.fancybox').fancybox({ parent: "body"});
于 2014-05-29T13:27:42.703 に答える
4

r0maの答えに基づいて、これが私にとってうまくいきました：

<script type="text/javascript", 'data-turbolinks-eval'="false">  
  $(document).bind('page:change', function(){
    $('.fancybox').fancybox({ parent: "body"})
  });
</script>
于 2014-07-30T17:56:30.310 に答える
2

同じ問題があり、fatfrogが言ったようにjquery-turbolinks gemをインストールすると解決しました。

jquery-ターボリンク

于 2014-02-05T12:56:55.993 に答える
0

これは私のために働きます

document.addEventListener("turbolinks:load", function() {
  $(".alert .close").click(function(){
    $(this).parent().hide();
  })
  $('.fancybox').fancybox({ parent: "body"})
})
于 2016-11-09T08:10:36.793 に答える