Q&A
書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）か、再現するURLを提示されたほうが回答を得やすいと思います。
Swipeboxをサイト（wordpress）に使用したいのですが、アイコン（← → ×）が表示されません。
あとタイトルも表示されません。PCで見ています。スマホはまだ未確認です。
cssのパスを確認したところ合っていました。
どこをどう直したらアイコンとタイトルが表示されますか？
わからなくて困っています。教えてください。
お願いします。
ローカルで実装してみてもアイコンとタイトルが表示されませんでした。
なぜでしょうか？どなたかわかる方いらっしゃいませんか？
ローカルで実装してみた時のhtmlが以下で、
html
1<html> 2<head> 3<link rel="stylefheet" href="css/swipebox.min.css"> 4<script src="js/jquery-2.0.3.min.js"></script> 5<script src="js/jquery.swipebox.min.js"></script> 6<script src="js/use-swipebox.js"></script> 7</head> 8<body> 9<a href="images/1l_1.jpg" class="swipebox" title="1の画像"> 10<img src="images/1s_1.jpg"> 11</a> 12</body> 13</html>
use-swipebox.jsの中身は以下です。
jQuery
1jQuery(function() { 2jQuery('.swipebox').swipebox{ 3 'removeBarsOnMobile': false 4 }); 5});
ちなみにwordpressで表示されるjQueryは以下になります。
jquery.js?ver=1.12.4
jquery-migrate.min.js?ver=1.4.1
jquery.form.min.js?ver=3.51.0-2014.06.20
jquery.scrollTo.js?ver=2.1.2
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。
回答1件
0
ベストアンサー
img フォルダはありますか？
そこにアイコンが入っています。
もし images 内にそれらの画像を入れているのであれば、swipebox.min.css の中に書かれているパス指定も変更する必要があります。
js/css/img が読み込めていない場合はデベロッパーツールにエラーが出ると思うので、確認してみてください。
【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/
【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01
追記：
【WordPress で CSS、JavaScript ファイルを読み込む正しい方法 | EastCoder;】
https://eastcoder.com/2014/07/proper-way-to-enqueue-scripts-and-styles-with-wordpress/
【WordPressのテーマ制作で必要なcssとjsの設定方法 | ソフプラント】
https://www.sofplant.com/blog/tech/theme-design-js-and-css-setting/
投稿2017/05/10 15:05
編集2017/05/10 17:18総合スコア69407
ご回答ありがとうございます。
imgフォルダはimagesフォルダと同階層にあります。
swipebox.min.cssの中のパスも../img/~となっているので合っていると思うのですが表示されないです。
use-swipebox.jsがシンタックスエラーになっていたので、直してみたのですが、エラーは消えましたが、背景も黒くならず小さい画像のすぐ下に大きい画像その下にタイトルが出る状態になってしまいました。アイコンも表示されてないです。
オプションをつけずに書いても同じですか？
jQuery('.swipebox').swipebox();
＞ 小さい画像のすぐ下に大きい画像その下にタイトルが出る状態になってしまいました。
CSSを外した状態で動かすとそうなります。
パスがおかしくて読み込めていない可能性が高いです。
オプションをつけずに書いても同じです。cssが読み込めてないのでしょうか。エラーは出ていなかったのですが。。
cssのrel="stylesheet"のスペルミスとuse-swipebox.jsがシンタックスエラーが原因だったみたいです。すみません。ローカルでは動きました。が、wordpressの方はまだアイコンとタイトルが出ません。
wordpressの方はuse-swipebox.jsのファイル名指定ミスがあり直したところ、タイトルと×が出るようになりました。ですが、relを設定しても← →が表示されない状態です。
WordPressについては質問にありません。が、基本同じ問題です。パスが通っていないだけです。
また、WordPressへのスクリプトおよびCSSの挿入については独特な方法があるため、質問文に追記しておきます。
ありがとうございます。引き続き調べてみます。
wordpressの方の← →だけ表示されないのがわかりません。確認しましたがcssとjsの読み込みの記述は間違いなさそうです。htmlにrelでグルーピングしても表示されません。
translator.js:140 Uncaught TypeError: Cannot read property 'replace' of undefinedのエラーが数行でているのですがこれが関係しているのでしょうか。
出力されたHTML（ブラウザで「ページのソースを表示」）に
swipebox.min.css
jquery.swipebox.min.js
use-swipebox.js
が出力されていて、そのURLをブラウザで表示できますか？
エラーについては解決しなければ他のスクリプトがとまることがありますので、どのプラグインが原因か調べたほうが良いと思います。
出力されたHTML（ブラウザで「ページのソースを表示」）に
swipebox.min.css
jquery.swipebox.min.js
use-swipebox.js
が出力されていて、ブラウザで表示できます。
今見たらtranslator.js:140 Uncaught TypeError: Cannot read property 'replace' of undefinedのエラーはなくなってました。
他には、jquery-migrate.min.js:2 JQMIGRATE: Migrate is installed, version 1.4.1というのが出ています。
swipeboxが動いていてアイコンだけ表示されない、という状況であれば画像を入れたフォルダがswipebox.min.cssとの相対位置がおかしいとか。
動いてすらいないならjQueryの後にjquery.swipebox.min.jsが出力されていないとか。
swipebox.min.cssはcssフォルダの中にあって、imgフォルダはcssフォルダと同階層。../img/〜になっているので、問題ないかと思います。
背景が黒くなってタイトルと×は出てくるので、動いてない訳でもないのかと。
jquery.swipebox.min.jsはjqueryの後に出ています。
下に出るはずの←→矢印だけなんですよね。。
出るはずの矢印部分の要素をデベロッパーツールで確認し、リンクが切れていないか確認してみてください。
それか、CSSを下記パスに変えてみてください。それでいければ画像フォルダの配置の問題です。
https://cdnjs.cloudflare.com/ajax/libs/jquery.swipebox/1.4.4/css/swipebox.min.css
【jquery.swipebox - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!】
https://cdnjs.com/libraries/jquery.swipebox
swipebox.min.cssの#swipebox-bottom-barのbottomが-50pxになっていたので、値を変更したら表示されるようになりました。一応解決できました。
すみません。色々とありがとうございます。
あなたの回答
tips
プレビュー
