WordPress 外部JavaScript内のimgへのパス

Question

お世話になっております。

Photo Gallery用に自作テーマを作成しました。
http://yesdeafcan.wp.xdomain.jp/
画像をクリックするとズームインにアップしますが、画像が表示されません。

エラーメッセージ
The requested content cannot be loaded.
Please try again later.

外部JavaScript内のimgへのパスが合ってないようです。
main.jsの250行あたり

this.originalImg = document.createElement('img');
this.originalImg.className = 'original';

ネットで検索しましたところ、
「外部JavaScript内のimgへのパスについて」
https://ja.forums.wordpress.org/topic/7139?replies=8
これを参考に修正しました。

footer.php内
<?php
echo '<script type="text/javascript">var templatePath = "' . get_template_directory_uri() . '";</script>';
?>
<script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>

main.jsの250行あたり
this.originalImg = document.createElement('templatePath + '/img/‘);
this.originalImg.className = 'templatePath + '/img/original/';

結果はダメでした。どこがいけなかったのでしょうか？
アドバイスを宜しくお願いします。

Answer 1

画像の親要素のaタグのhrefがimg/....jpgと、相対パスになっています。（これが拡大画像のURLになるはずです）
拡大する画像そのものは、サムネ画像と同じくテンプレートディレクトリにあるのではないですか？

aタグのhrefもget_template_directory_uri()を使用した上で、正確なhrefになるように調整が必要かと。

Comments

[kmyr]

サムネ画像はimgフォルダ内にあり、拡大画像はimgフォルダ内のoriginalフォルダに収納してあります。
WordPressの場合は絶対パスでないとダメとのことですので、main.js内にoriginalフォルダまでの絶対パスを記述しないといけないのだと思いますが、JavaScriptなので、PHPを記述することはできないので、行き詰ったのです。
「aタグのhrefもget_template_directory_uri()を使用した上」とはどのファイルに記述するのでしょうか？

[manabufukai]

> main.js内にoriginalフォルダまでの絶対パスを記述しないといけないのだと思いますが
そうではありません。
fancyboxは「html上のaタグからhrefを読み取って」拡大画像を読み込みます。

このページを表示しているテンプレートファイルは何ですか？
index.phpですか？もしくはhome.phpですか？
使用しているテーマのトップページを表示させるテーマファイルのaタグ箇所を修正してください。

[kmyr]

お恥ずかしい…
index.phpにget_template_directory_uri()を追加しましたら、表示できました。
ですが、二枚重ねて表示されてしまいます。原因がわからないのですが、ご教鞭お願いします。

[manabufukai]

「二枚重ねて」とはどういう状態ですか？
正確に書いてください。

現状を拝見させていただきましたが、
fancyboxの表示そのものは問題ないと思いますが？

また、Masonryを追加しようとされているところでしょうか？
ファイルを読み込んでらっしゃらないのでエラーになっていローディング表示が消えない状態になっています。
（codropsからコピペされてきたのかもしれませんが、必要なファイルは用意しなければなりません）

[kmyr]

説明不足ですみません。
http://tympanus.net/Development/ImageGridEffects/index2.html
これと比べてみますと分かるかと思います。
本来ならfancyboxは表示しないんです。
画像をクリックしますと拡大画像がズームインするだけです。
今のはさらに上に重ねるようにfancyboxが表示してしまいます。

[manabufukai]

あー、Masonryがエラーを吐いていたお陰で元々設定されていたイベントが動かなかっただけということですね。
元のクリックイベントをそのままにしているので二つ開くのが正しい反応です。

・グリッド状に並べる
・fancyboxのみにする
なら、そもそもこのmain.jsそのものがいらないんじゃないですか？

このファイルの中にMasonryの初期化も組み込まれていますが、単独で入れても大差ないと思います。

[kmyr]

jQueryのライブラリが重複するのを防ぐため
<?php wp_footer(); ?>を削除しましたら正常に動作できました。
色々とありがとうございました。

[manabufukai]

本当はwp_footer()は残しておいたほうが良いですね…（他にも色々出力していることもありますので）
それよりも、functions.phpに記述されているwp_enqueue_scriptの箇所を修正するほうがベターです。