質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

サーバ

サーバは、 クライアントサーバモデルにおいてクライアントからの要求に対し 何らかのサービスを提供するプログラムを指す言葉です。 また、サーバーソフトウェアを稼動させているコンピュータ機器そのもののことも、 サーバーと呼ぶ場合もあります。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

62844閲覧

サーバにアップしたところ画像が表示されないページがある

no_naikanojo

総合スコア8

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

サーバ

サーバは、 クライアントサーバモデルにおいてクライアントからの要求に対し 何らかのサービスを提供するプログラムを指す言葉です。 また、サーバーソフトウェアを稼動させているコンピュータ機器そのもののことも、 サーバーと呼ぶ場合もあります。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

0クリップ

投稿2014/12/03 12:18

jQueryのtoggleタブによって非同期通信でload()するファイル(HTML、PHP)を切り替えるサイトを作っています。
その中で、BootstrapのプラグインimageGalleryとPHPによるフォルダ内のファイル全ての名前を取得する関数を用いて、フォルダー内にある画像をギャラリーのように表示するPHPファイルがあるのですが、実際にサーバにアップして確認したところ、サムネイル画像一覧が表示されなくて困っています。

![読み込み失敗]WIDTH:600

具体的には…
ローカルホストでは正常に表示。ftpサーバにアップしてアクセスしたところ、該当ページのサムネイル画像一覧が表示されていない。(⇒サーバの問題?)
・本来の動作は、サムネイル画像をクリックすると対応した画像が拡大表示されるというもの。しかし、サムネイル画像が読み込まれていない状態でどれか適当なものをクリックしてみると、対応していないがとにかく正常に読み込まれたものが拡大表示されている様子であり、対応関係がめちゃくちゃ。(⇒非同期通信のせい?)
・サムネイル画像全てを合計しても2MBほど。他のページの1枚2MBほどの画像は正常に表示されている。(⇒個々の大きさが小さくとも複数画像を一斉に読み込むのがサーバの負荷に?)
・キャッシュをクリアし、IEとOperaで確認したが、変化なし。
・Operaの要素検証によると、「 Failed to load resource: the server responded with a status of 404 (Not Found)」というエラーが生じている。
となっています。

ソース
HTML HEAD部分

lang

1$(function(){ 2 $("#galleryTab").click(function(){ 3 $("#tab4").show(); 4 5 if($("#tab4").css("display") == "block"){ 6 7 $("#tab1").hide(); 8 $("#tab2").hide(); 9 $("#tab3").hide(); 10 11 $.ajaxSetup({ 12 cache: false 13 }); 14 15 $("#gallery").load("gallery.php"); 16 17 }else{ 18 alert("ギャラリー読み込み失敗"); 19 } 20 21 });

HTML BODY部分

lang

1<div class = "tab-pane fade" id="tab4" style="display:block"> 2 <div id = "gallery" style=""></div> 3</div> 4

imageGalleryを用いた読み込むファイル gallery.php
(拡大表示する画像収納フォルダ⇒images サムネイル画像収納フォルダ⇒resize)

lang

1<?php 2 3echo "<div id = \"links\" style=\"margin-top:50px\">"; 4 5if ($dir = opendir("images/")) { 6 while (($file = readdir($dir)) !== false) { 7 if ($file != "." && $file != "..") { 8 echo "<a href=\"./images/{$file}\" title=\"\" data-gallery><img src=\"./resize/{$file}\" alt=\"\" style=\"width:80px;height:50px;\"></a>"; 9 10 } 11 } 12 closedir($dir); 13} 14echo "</div>" 15?> 16 17<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body --> 18<div id="blueimp-gallery" class="blueimp-gallery"> 19 <!-- The container for the modal slides --> 20 <div class="slides"></div> 21 <!-- Controls for the borderless lightbox --> 22 23 ~~~以下略~~~

今回初めてサーバを利用したので、この現象について色々と調べてはみましたが、初心者の私には原因を突き止めることができませんでした。
初歩的な内容で申し訳ありませんが、考えられる原因と解決策について教えていただけると幸いです。

RyoTamoto👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

404 (Not Found)は単純にファイルが見つかりませんでしたというエラーなので、
パスがずれているかファイルが本当に無いかのどちらかだと思います。

サイトのソースを表示(右クリックメニューにあると思います)して<img src="ここの部分">が正しいかどうか確認してみてください。

投稿2014/12/03 12:28

SAMURAI-HACK

総合スコア988

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

no_naikanojo

2014/12/03 14:12

ありがとうございます。 サムネイル画像が表示されない問題、もう一度パスをじっくりを確認した所、無事解決いたしました。 サーバへ上げる際は、パスの大文字と小文字も区別しなければいけないことは知っていましたが、元画像の”~~.JPG”がリサイズ時に”~~.jpg”になっていたのに気付かなかったため、正常に読み込めておりませんでした。 ただ、ローカルホスト時と違い、サムネイルの並び順がバラバラになっていました。これはやはり非同期通信の影響なのでしょうか…? ともあれ、改めまして、この度はご回答いただき誠にありがとうございました。
TaMaMhyu

2014/12/04 01:42

もし、アクセスするたびに順番が違うとしたら不自然ですね… 非同期と言ってもreaddirの処理は同期的に見えますが、readdirで取れるファイルの順番が違うということになるでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問