Turbolinks +燈箱（Rails 5）

我知道這個問題已被要求死亡，但我仍然無法解決我的應用程序中的東西。我運行一個Rails應用程序5（與turbolinks和的fancybox收藏寶石），並有一些特定頁面的JavaScript對模型展示頁面上顯示的圖像：Turbolinks +燈箱（Rails 5）

application.html.erb

<head> 
    ... 
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %> 
    ... 
</head> 
<body> 
    ... 
    <%= yield :page_scripts %> 
</body>

表演。 html.erb

<% content_for :page_scripts do %> 
    <script type="text/javascript"> 
    $(document).on('turbolinks:load', function() { 
     $("a.fancybox").fancybox(); 
    }) 
    </script> 
<% end %>

我仍然得到響應經典從而使圖像負荷高達很好地在第一頁的訪問或刷新頁面。離開和返回再次停止燈箱工作（似乎只是掛在我的情況）。

如何使用'turbolinks：load'功能使其正常工作？

來源

2017-08-03 GerryDevine

您可以更改爲以下代碼。

$(document).ready(function() { 
    document.addEventListener("turbolinks:load", function() { 
    $("a.fancybox").fancybox(); 
    })  
});

我希望這對你有所幫助。你可以通過這個鏈接turbolinks去詳細信息。

來源

2017-08-03 02:39:46 akbarbin

Hi Muhamad。我已經嘗試過，並沒有幫助 - 仍然是一個例子，它將在第一次訪問/刷新時起作用，但不會在隨後的訪問中起作用。我不確定是否與加載圖像本身有關 - 目前它們是從公共/文件夾加載的。 – GerryDevine

我不知道這完全有資格作爲一個答案，但考慮到在這個環節的情景非常相似：

https://github.com/fancyapps/fancybox/issues/1413

....我結束了以下的建議和消除使用data-turbolinks =「false」從顯示頁面跳轉到鏈接。

來源

2017-08-03 05:51:13 GerryDevine

我不熟悉tubolinks，但請記住，$("a.fancybox").fancybox()只是將click事件綁定到當前元素。所以，你可能不得不在導航後重新附加它。另一種可能的解決方案是使用使用selector選項的事件委託，例如（使用v3.1）：

$().fancybox({ 
    selector : '[data-fancybox="images"]', 
    animationEffect : "fade" 
});

來源

2017-08-03 08:08:21 Janis

Turbolinks +燈箱（Rails 5）

回答

相關問題