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

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

新規登録して質問してみよう
ただいま回答率
87.20%
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で作成されています。

解決済

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

no_naikanojo
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回答

1評価

0クリップ

53065閲覧

投稿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

$(function(){ $("#galleryTab").click(function(){ $("#tab4").show(); if($("#tab4").css("display") == "block"){ $("#tab1").hide(); $("#tab2").hide(); $("#tab3").hide(); $.ajaxSetup({ cache: false }); $("#gallery").load("gallery.php"); }else{ alert("ギャラリー読み込み失敗"); } });

HTML BODY部分

lang

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

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

lang

<?php echo "<div id = \"links\" style=\"margin-top:50px\">"; if ($dir = opendir("images/")) { while (($file = readdir($dir)) !== false) { if ($file != "." && $file != "..") { echo "<a href=\"./images/{$file}\" title=\"\" data-gallery><img src=\"./resize/{$file}\" alt=\"\" style=\"width:80px;height:50px;\"></a>"; } } closedir($dir); } echo "</div>" ?> <!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body --> <div id="blueimp-gallery" class="blueimp-gallery"> <!-- The container for the modal slides --> <div class="slides"></div> <!-- Controls for the borderless lightbox --> ~~~以下略~~~

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

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で作成されています。