- ベストアンサー
そのページ内のある箇所のコンテンツだけを変える
すいません。質問させていただきます。 上記にも書きましたが 「そのページ内のある箇所のコンテンツだけを変える」 詳しくは、そのページで写真が並んである箇所があり、 1｜2｜3｜4… と番号を振り、番号を押すとその写真のコンテンツ部分だけが更新？変わっていくようにしたいんです。 調べていてAJAXやPHPでできるということまでは理解できたのですが、 まったくわからないのが、その変わるコンテンツはどこに記述すればよいのでしょうか？？ やっぱり、そこの部分だけのHTMLを組まなくてはいけないのでしょうか？ AJAXもPHPも初心者ですが、ご教授お願いします。
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
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 = '<span id="loading">Loading content, please wait ...</span>'; bda.calculateText = '<span id="loading">Preloading images, parsing content ...</span>'; bda.errorText = '<h1>The page could not be loaded</h1><p>If you keep getting this the server can be down or somethings wrong with your connection.'; bda.imagesNotLoadedText = '<span id="loading">Some images could not be loaded.<br/>The page will display without these images.</span>', // debug mode //bda.debugMode = 'list'; bda.start(refreshed_content); } ------------------------------------------------ (4)を作る。内容は下記の通り。 ------------------------------------------------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Gallery001</title> <script type="text/javascript" src="com.bydust.ajax.js"></script> <script type="text/javascript" src="com.bydust.array.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body> <div id="page"> <div id="content"> <!-- begin content --> このページは [gallery001] です。 <!-- end content --> </div> <div id="sidebar"> <!-- begin sidebar --> <ul> <li><a href="gallery001.html">Gallery001</a></li> <li><a href="gallery002.html">Gallery002</a></li> <li><a href="gallery003.html">Gallery003</a></li> </ul> <!-- end sidebar --> </div> </div> </body> </html> ------------------------------------------------ ファイル(4)を複製して(5)と(6)を作成し、ファイル(5)内の【このページは [gallery001] です。】部分を【このページは [gallery002] です。】に変更。更にtitle部分も【gallery002】に変更して保存。 同様にして、ファイル(6)内の【このページは [gallery001] です。】部分を【このページは [gallery003] です。】に変更、title部分も【gallery003】に変更して保存。 以上の作業が完了したら gallery001.html をブラウザで開いて確認。 各ギャラリーへのリンクをクリックすれば<!-- begin content -->と<!-- end content -->で挟まれた部分だけが動的に書き換えられるはずです。 読み込み中であることを示す画像（クルクル回るやつ）を表示したい場合には、上に示したURLからサンプルファイルをダウンロードしてください。画像も入ってますし、使い方に関しては同梱されているCSSファイルを見れば一目瞭然です。
その他の回答 (7)
- hide1978
- ベストアンサー率42% (32/75)
乗りかかった船ということで確認してみました。答えは「lightbox.jsとcom.bydust.ajaxの共存は可能」です。私の環境では正常に使用できています。 lightboxで表示しようとしている画像が別窓で開くということなので、タグの記述ミスがないか確認してみてください。例えば <a href="images/image-1.jpg" rel="lightbox"> とすべきところを <a href="images/image-1.jpg" rel="lightbox> <- rel属性の最後にダブルクォーテーションが抜けている とミスるだけでlightboxは正常に動きません。
- hide1978
- ベストアンサー率42% (32/75)
> 書いてある通りにデモ版として作ってみたんですが、全ページに言え > ることですが、リンクをクリックすると下のエラー文が出てきてしま > います。 自分が書いた回答を見ながら、書いている手順に沿ってやってみましたがエラーは出ませんでした。ブラウザが原因かな？と思ってFirefox3・IE8・GoogleChrome・Safari3・Lunascape5で確認しましたが、いずれのブラウザでもエラーは出ませんでした。 もう一度、手順を確認してやってみてください。それでも解決しない場合には、申し訳ないですが私にはお手上げです。
お礼
毎度、回答ありがとうございます。 遅くなってしまってすいません。 できました！ただ単にアップロードしないでプレビューで仕上がりを見てたので結果が表示されなかっただけみたいです。 そして、作ってるサイトに反映させたのですが、またもや問題がありまして… 何度も本当に申し訳ないのですが、簡潔に言うと 「lightboxを使ってるコンテンツにこのAjaxのシステムは使えないのでしょうか？」 というのも、自分が作ってるサイトで部分だけをこのAjaxシステムを応用して動的に変えることに成功しました。 しかし、その変わるコンテンツの中の写真にligthboxの効果がなくなってしまいました。 普通に別窓で表示されるだけになってしまいました。 この２つのシステムを同時使用というのは無理なのでしょうか？＞＜
- hide1978
- ベストアンサー率42% (32/75)
一部訂正。 com.bydust.ajaxを使ってmayama27が希望している表示を実現する ↓↓↓ com.bydust.ajaxを使ってmayama27さんが希望している表示を実現する 呼捨てにしちゃって申し訳ない。orz
お礼
いえいえwとんでもないです。 早速の回答ありがとうございます。 書いてある通りにデモ版として作ってみたんですが、全ページに言えることですが、リンクをクリックすると下のエラー文が出てきてしまいます。 動的にはなっているのですが… 「The page could not be loaded If you keep getting this the server can be down or somethings wrong with your connection.」 何かが足りないのでしょうか？？ それさえわかれば、作ってるサイトのほうに応用できそうなんですが… もう一度お願いします。＞＜すいません
- koke29
- ベストアンサー率58% (114/196)
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を表示する みたいなことです
お礼
回答ありがとうございます。 それと、一番重要なことを付け忘れてました。 http://www.blog.tsuchiyama.info/2008/11/ajax.html こちらのサイトで紹介されているAJAXのライブラリ？を使って実現したいんです。 この技術を使った上で参考にしているサイトのようにできませんか？すいません でも、問題の点は変わりませんが…
補足
URLミスってますね。 http://www.blog.tsuchiyama.info/2008/11/ajax.html こちらが正しいです。 よろしくお願いします。
- hide1978
- ベストアンサー率42% (32/75)
> 右上に「1｜2」とあり、番号押すと写真ギャラリーだけが次ページに > 行くってな感じになってます。 > ここをCGIではなくAJAXやPHPでできるんじゃないか？と調べていて思 > いまして このサイトは写真ギャラリーだけが次ページに移動する形にはなっていませんね。[2]をクリックした際にはページ全体をcgiで書き換えています。使用している言語は判りませんが、おそらくPerlか何かでプログラムを書いて制御しているんだと思います。 このサイトの場合は、ベースとなるHTMLをテンプレートで用意しておいて、画像のサムネイルと付随する説明文の部分だけをプログラムで動的に書き換える仕組みだと思います。 これと同じ様な仕組みを自分で作るとなると、PHPやPerl等のプログラミングに関する知識が必要となります。また、動的に書き換える部分（今回はサムネイル画像や付随する説明文）のデータをどこに保存しておくのかという問題もあります。MySQLやPostgreSQL等のデータベースに保存するのが一般的ですが、CSV形式でファイルに保存しておくことも可能です。 > 自分の憶測なのですが… > AJAXやPHPが自動で生成してくれるのか？PHPのプログラム内に変わっ > た時の写真ギャラリー部分のHTMLを記述させておいて、2番を押した > らそのHTML部分を呼び出す仕様にしているのか？ 処理的には「PHP等のプログラムが自動で生成してくれる」が正解ではありますが、自動で生成してくれるプログラムを自分で書く必要があります。そのプログラム内に写真ギャラリーのHTML部分を書く事も可能ではありますが、普通は別の場所（データだけを記述したファイルやデータベースを利用）からデータを読み込んで、プログラム側で動的にHTMLを生成します。
お礼
回答ありがとうございます。 それと、一番重要なことを付け忘れてました。 http://www.blog.tsuchiyama.info/2008/11/ajax.html こちらのサイトで紹介されているAJAXのライブラリ？を使って実現したいんです。 この技術を使った上で参考にしているサイトのようにできませんか？すいません でも、問題の点は変わりませんが… ＞プログラム側で動的にHTMLを生成します。 特にそれなんです！そこがまったくイメージできないんです。 そこの点も詳しくお願いできませんか？＞＜
- yambejp
- ベストアンサー率51% (3827/7415)
ajaxいらなくないですか？ 見る限りたんにjavascriptで、imgのsrcを入れ替えてやるだけですね
お礼
早速の回答ありがとうございます！ 説明不足ですいません。 URL載せて大丈夫なのかと思いましたが… http://www.kamiyad.jp/works/index.cgi ↑こちらのサイトさんの感じが理想なのですが、 右上に「1｜2」とあり、番号押すと写真ギャラリーだけが次ページに行くってな感じになってます。 ここをCGIではなくAJAXやPHPでできるんじゃないか？と調べていて思いまして投稿した次第なのですが そこで問題なのが、1番のページから2番を押したときに変わった写真ギャラリーのHTMLはどこに記述すればいいのでしょうか？というのが最大の疑問です。 自分の憶測なのですが… AJAXやPHPが自動で生成してくれるのか？PHPのプログラム内に変わった時の写真ギャラリー部分のHTMLを記述させておいて、2番を押したらそのHTML部分を呼び出す仕様にしているのか？ 因みに参考にしているサイトさんは違いますが、 自分が今作ってるサイトは写真をクリックした時はlightboxを使用しています。 もう一度、お力添えをお願いします。すいません！
- hide1978
- ベストアンサー率42% (32/75)
最近は優秀なAjaxライブラリが豊富なので、私ならAjaxで実現します。 個人的にオススメなのは「JonDesign’s SmoothGallery」(参考URLの1番目)です。HTMLでサムネイルを表示させておいて、それを画面遷移なしで順番に表示するだけなら「Lightbox2.0」(参考URLの2番目)なんかを使っても良いかもしれません。 Googleで「Ajax フォトギャラリー」をキーワードにして検索すると多くの情報が手に入りますので、ご自身のサイトに合ったものを探すのも楽しいと思いますよ。
お礼
早速の回答ありがとうございます！ 説明不足ですいません。 URL載せて大丈夫なのかと思いましたが… http://www.kamiyad.jp/works/index.cgi ↑こちらのサイトさんの感じが理想なのですが、 右上に「1｜2」とあり、番号押すと写真ギャラリーだけが次ページに行くってな感じになってます。 ここをCGIではなくAJAXやPHPでできるんじゃないか？と調べていて思いまして投稿した次第なのですが そこで問題なのが、1番のページから2番を押したときに変わった写真ギャラリーのHTMLはどこに記述すればいいのでしょうか？というのが最大の疑問です。 自分の憶測なのですが… AJAXやPHPが自動で生成してくれるのか？PHPのプログラム内に変わった時の写真ギャラリー部分のHTMLを記述させておいて、2番を押したらそのHTML部分を呼び出す仕様にしているのか？ 因みに参考にしているサイトさんは違いますが、 自分が今作ってるサイトは写真をクリックした時はlightboxを使用しています。 もう一度、お力添えをお願いします。すいません！
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
返事とても遅くなってしまってすいませんでした！ 乗船して頂いたこと深く感謝します。 公式の？ページからlightboxをダウンロードしたものを使用した結果、なんとか共存させることに成功しました！ 多少の問題はあるんですが…；； 何から何までありがとうございました！