そのページ内のある箇所のコンテンツだけを変える

Question

すいません。質問させていただきます。
上記にも書きましたが
「そのページ内のある箇所のコンテンツだけを変える」

詳しくは、そのページで写真が並んである箇所があり、
1｜2｜3｜4…
と番号を振り、番号を押すとその写真のコンテンツ部分だけが更新？変わっていくようにしたいんです。

調べていてAJAXやPHPでできるということまでは理解できたのですが、
まったくわからないのが、その変わるコンテンツはどこに記述すればよいのでしょうか？？

やっぱり、そこの部分だけのHTMLを組まなくてはいけないのでしょうか？

AJAXもPHPも初心者ですが、ご教授お願いします。

hide1978 · Accepted Answer

com.bydust.ajaxを使ってmayama27が希望している表示を実現する方法を以下にまとめまてみます。用意するファイルは以下の6個。全て文字コードはUTF-8で統一すること。今回は説明を簡単にするために、全て同一ディレクトリ内にあるものとする。 com.bydust.ajax.js --- (1) com.bydust.array.js --- (2) main.js --- (3) gallery001.html --- (4) gallery002.html --- (5) gallery003.html --- (6) (1)と(2)は下記ページからダウンロードできます。 http://www.bydust.com/examples/com.bydust.ajax/download.php (3)を作る。内容は下記の通り。 ------------------------------------------------ window.onload = function() { var refreshed_content = Array('!content','sidebar'); bda.loadText = 'Loading content, please wait ...'; bda.calculateText = 'Preloading images, parsing content ...'; bda.errorText = '

The page could not be loaded

If you keep getting this the server can be down or somethings wrong with your connection.'; bda.imagesNotLoadedText = 'Some images could not be loaded.
The page will display without these images.', // debug mode //bda.debugMode = 'list'; bda.start(refreshed_content); } ------------------------------------------------ (4)を作る。内容は下記の通り。 ------------------------------------------------ Gallery001

このページは [gallery001] です。

------------------------------------------------ ファイル(4)を複製して(5)と(6)を作成し、ファイル(5)内の【このページは [gallery001] です。】部分を【このページは [gallery002] です。】に変更。更にtitle部分も【gallery002】に変更して保存。同様にして、ファイル(6)内の【このページは [gallery001] です。】部分を【このページは [gallery003] です。】に変更、title部分も【gallery003】に変更して保存。以上の作業が完了したら gallery001.html をブラウザで開いて確認。各ギャラリーへのリンクをクリックすればとで挟まれた部分だけが動的に書き換えられるはずです。読み込み中であることを示す画像（クルクル回るやつ）を表示したい場合には、上に示したURLからサンプルファイルをダウンロードしてください。画像も入ってますし、使い方に関しては同梱されているCSSファイルを見れば一目瞭然です。

hide1978 · Answer

乗りかかった船ということで確認してみました。答えは「lightbox.jsとcom.bydust.ajaxの共存は可能」です。私の環境では正常に使用できています。 lightboxで表示しようとしている画像が別窓で開くということなので、タグの記述ミスがないか確認してみてください。例えばとすべきところを

hide1978 · Answer

> 書いてある通りにデモ版として作ってみたんですが、全ページに言え
> ることですが、リンクをクリックすると下のエラー文が出てきてしま
> います。

自分が書いた回答を見ながら、書いている手順に沿ってやってみましたがエラーは出ませんでした。ブラウザが原因かな？と思ってFirefox3・IE8・GoogleChrome・Safari3・Lunascape5で確認しましたが、いずれのブラウザでもエラーは出ませんでした。

もう一度、手順を確認してやってみてください。それでも解決しない場合には、申し訳ないですが私にはお手上げです。

hide1978 · Answer

一部訂正。

com.bydust.ajaxを使ってmayama27が希望している表示を実現する
↓↓↓
com.bydust.ajaxを使ってmayama27さんが希望している表示を実現する

呼捨てにしちゃって申し訳ない。orz

koke29 · Answer

index自体がプログラムで、URLの切り替えによって読む画像とかを判別
してると思うので、HTML部分の記述は1P目も2P目も同じだと思いますよ
<img src="この中を変数で扱っているんだと思います">

URLを見ればわかるように前半部分は1P目も2P目も同じで、後半部分が
ページ送りみたいな引数がついてますよね
あそこの数値で読み込む画像を指定しているのだと思います

凄く単純なサンプルだと
if($page==1){$img = "aa.gif";}
if($page==2){$img = "bb.gif";}
としておくと、$pageが1の時はaa.gifを表示する みたいなことです

hide1978 · Answer

> 右上に「1｜2」とあり、番号押すと写真ギャラリーだけが次ページに
> 行くってな感じになってます。
> ここをCGIではなくAJAXやPHPでできるんじゃないか？と調べていて思
> いまして

このサイトは写真ギャラリーだけが次ページに移動する形にはなっていませんね。[2]をクリックした際にはページ全体をcgiで書き換えています。使用している言語は判りませんが、おそらくPerlか何かでプログラムを書いて制御しているんだと思います。

このサイトの場合は、ベースとなるHTMLをテンプレートで用意しておいて、画像のサムネイルと付随する説明文の部分だけをプログラムで動的に書き換える仕組みだと思います。

これと同じ様な仕組みを自分で作るとなると、PHPやPerl等のプログラミングに関する知識が必要となります。また、動的に書き換える部分（今回はサムネイル画像や付随する説明文）のデータをどこに保存しておくのかという問題もあります。MySQLやPostgreSQL等のデータベースに保存するのが一般的ですが、CSV形式でファイルに保存しておくことも可能です。

> 自分の憶測なのですが…
> AJAXやPHPが自動で生成してくれるのか？PHPのプログラム内に変わっ
> た時の写真ギャラリー部分のHTMLを記述させておいて、2番を押した
> らそのHTML部分を呼び出す仕様にしているのか？

処理的には「PHP等のプログラムが自動で生成してくれる」が正解ではありますが、自動で生成してくれるプログラムを自分で書く必要があります。そのプログラム内に写真ギャラリーのHTML部分を書く事も可能ではありますが、普通は別の場所（データだけを記述したファイルやデータベースを利用）からデータを読み込んで、プログラム側で動的にHTMLを生成します。

yambejp · Answer

ajaxいらなくないですか？
見る限りたんにjavascriptで、imgのsrcを入れ替えてやるだけですね

hide1978 · Answer

最近は優秀なAjaxライブラリが豊富なので、私ならAjaxで実現します。

個人的にオススメなのは「JonDesign’s SmoothGallery」(参考URLの1番目)です。HTMLでサムネイルを表示させておいて、それを画面遷移なしで順番に表示するだけなら「Lightbox2.0」(参考URLの2番目)なんかを使っても良いかもしれません。

Googleで「Ajax フォトギャラリー」をキーワードにして検索すると多くの情報が手に入りますので、ご自身のサイトに合ったものを探すのも楽しいと思いますよ。

参考URL：http://smoothgallery.jondesign.net/showcase/gallery/,http://journal.mycom.co.jp/articles/2007/06/14/lightbox/index.html

そのページ内のある箇所のコンテンツだけを変える

乗りかかった船ということで確認してみました。

> 書いてある通りにデモ版として作ってみたんですが、全ページに言え

一部訂正。

com.bydust.ajaxを使ってmayama27が希望している表示を実現する方法を以下にまとめまてみます。

index自体がプログラムで、URLの切り替えによって読む画像とかを判別

この回答への補足

> 右上に「1｜2」とあり、番号押すと写真ギャラリーだけが次ページに

ajaxいらなくないですか？

最近は優秀なAjaxライブラリが豊富なので、私ならAjaxで実現します。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング