rails6初心者です。
見当違いの質問してたらすみません。
rails 6.1.0
facybox 3.5.7
前提・実現したいこと
画像のポップアップ+スライドショーを行っているページ(jQueryプラグインを使用)があります。
このページのみturbolinksをオフにしたいです。
発生している問題・エラーメッセージ
画像をクリックすると、拡大画像がポップアップする仕様なのですが、
3回ほどポップアップさせると、その後は画像がクリックできなくなります。
※画像が多重に重なっていくような描画になります
試しに<head></head>内に以下を入れ、全体でturbolinksをオフにしたところ正常に動作しました。
ruby
1<meta name="turbolinks-cache-control" content="no-cache">
以上のことからturbolinksが原因のようです。
出来れば、このページだけturbolinksをオフにしたいと考えており、色々試したのですがオフに出来ずにいます。
どうかお力添えください。
該当のソースコード
以下が該当のソースです。
<a href="拡大画像" data-fancybox="gallery">
となっているのがポップアップで表示される拡大画像です。
なのでこの部分を
turbolinks="false"
で囲ったのですが効果ありませんでした。
html
1 <div class="main-image"> 2 3 <div data-turbolinks="false"> 4 <a href="/uploads/image/src/3/1565.jpg" data-fancybox="gallery"> 5 <img class="item-show__img-bg" alt="test" src="/uploads/image/src/3/1565.jpg" /> 6 </a> 7 </div> 8 <div data-turbolinks="false"> 9 <a href="/uploads/image/src/7/p7976-4.jpg" data-fancybox="gallery"> 10 <img class="item-show__img-bg" alt="test" style="display: none;" src="/uploads/image/src/7/p7976-4.jpg" /> 11 </a> 12 </div> 13 <div data-turbolinks="false"> 14 <a href="/uploads/image/src/8/p7976-6.jpg" data-fancybox="gallery"> 15 <img class="item-show__img-bg" alt="test" style="display: none;" src="/uploads/image/src/8/p7976-6.jpg" /> 16 </a> 17 </div> 18 <div data-turbolinks="false"> 19 <a href="/uploads/image/src/9/p7976-5.jpg" data-fancybox="gallery"> 20 <img class="item-show__img-bg" alt="test" style="display: none;" src="/uploads/image/src/9/p7976-5.jpg" /> 21 </a> 22 </div> 23 <div data-turbolinks="false"> 24 <a href="/uploads/image/src/10/6197.jpg" data-fancybox="gallery"> 25 <img class="item-show__img-bg" alt="test" style="display: none;" src="/uploads/image/src/10/6197.jpg" /> 26 </a> 27 </div> 28 29 </div>
試したこと
こちら→Railsでturbolinksを無効にする
を参考に、
application.html.erbと該当ページを修正しました。
app\views\layouts\application.html.erb
ruby
1<!DOCTYPE html> 2<html> 3 <head> 4 <%= render 'layouts/head' %> 5 </head> 6 <body> 7 <div class="wrapper"> 8 <div class="container"> 9 10 <!-- ここから --> 11 <div 12 <% if content_for?(:body_attributes) %> 13 <%= yield(:body_attributes) %> 14 <% end %> 15 > 16 <%= yield %> 17 </div> 18 <!-- ここまで追加 --> 19 20 </div> 21 <%= render 'layouts/footer' %> 22 <%= debug(params) if Rails.env.development? %> 23 </div> 24 </body> 25</html>
app\views\items\show.html.erb
ruby
1<% content_for(:body_attributes) do %> 2 data-turbolinks="false" 3 <% end %>
しかしこれも効果ありませんでした。
他に、この該当ページへの遷移元を以下のように囲ったのですが
こちらも効果ありませんでした。
ruby
1<div data-turbolinks="false"><%= link_to item.title, item_path(item), class: "link" %></div>
補足情報
ポップアップ+スライドショーの動作については、自作のjsやカスタマイズはありません。
拡大画像へのリンク(aタグ)に「data-fancybox="任意の文字"」を付与するだけでプラグインの標準機能だけで動作してます。
jQuery本体はyarnでインストールしfancyboxはCDN経由で使用してます。
プラグイン自体は問題なく動作してます。
html
1<html> 2 <head> 3 <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" /> 4<script src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script> 5 </head>
何が原因でしょうか?
先輩方アドバイスお願いします。
あなたの回答
tips
プレビュー