10press

freoにfancybox3を導入を参考にfreoにfancybox3を導入してみたがモーダルで表示されず原寸画像への直リンクを開いてしまうという質問をいただいていました。お返事が遅くなり申し訳ありませんがこちらで検証してみたところこれが原因かな？というものをメモしておきますのでご参考になれば幸いです。

チェックするファイル

• js/default.js
• template/header.html

これらのjavascriptの記述順が食い違っているとfancybox3がうまく動作しないようです。freo公式からダウンロードしたそのままであれば前述した記事の通りheader.htmlのcolorbox読み込みタグをfancybox3読み込みタグに書き換えるだけでOKですが、例えばネタバレボタンを導入していてdefault.jsを書き換えている場合などは

$(document).ready(function() {
//ネタバレボタン
～略～
//削除確認
～略～
//colobox→fancybox3
～略～
});

となっていると思います。この場合、header.htmlのjavascript読み込みタグの順序も

<script type="text/javascript" src="～jquery.hidearea.js">
<script type="text/javascript" src="～fancybox3.js">
<script type="text/javascript" src="～default.js">

のようにdefault.jsで記述した機能の順に対応させてください。ほかの機能を導入している場合も同様です。これでも解決しなかった場合はまたお知らせくださると幸いです。

余談

私の環境ではfreoにfancybox3を導入後、エントリー・ページ登録時にメディア管理から本文へファイルを挿入しようとしてもモーダルウィンドウで表示されてしまう場合がありました。この問題に関してはもともと同梱されていたjquery.jsとjquery.colorbox.jsをjsディレクトリに残しておくことで解消されました。謎ですがもし同じことでお悩みの方の参考になればと思い書いておきます。