※ ChatGPTを利用し、要約された質問です（原文：Light Boxを正確に表示させるには？）
Light Boxを正確に表示させる方法
このQ&Aのポイント
ライトボックスを使用して画像を表示する方法について、詳しく説明します。
デジデジにアップロードする際に画像がオーバーレイで表示されず、別の画面に切り替わる問題について解決方法を教えます。
htmlファイルのソースについても詳しく解説し、正しいコードを提供します。
ＨＰでライトボックスを使って画像を表示したいと思っています。
初心者なのでいろいろ探したところ、一番わかりやすかった下記のＵＲＬにあった説明どおりにlightboxをＤＬしhtmlファイルを作ってやってみたところ、デジデジ（というＨＰ無料サイトを使っています）にアップロードする前に実験的に自分のＰＣ上だけで見てみたらうまく表示されました。
http://www.howto-lightbox.com/
（参考までに、こちらは説明があったサイトです）
でも、そのhtmlファイルやライトボックスの中に入っているファイル全てをデジデジにアップロードした状態では、画像がオーバーレイではなく、クリックしたサムネイル画像が並んでいた画面全体が、拡大画面そのものに完全に切り替わってしまうだけになります。（元にもどるためにはブラウザの【←】
を押すしかない状態になります）
アップロード前に試したときは、ひとつのフォルダに、htmlファイル、画像の複数のファイル、そしてライトボックスのCCS、IMAGES、 JSの３つのフォルダを収めている状態でした。
でもデジデジにアップロードするときは、フォルダのままアップできないようなので、CCS,IMAGES,JSの３つのフォルダをそれぞれ開いて、中にあるファイルをひとつづつ全てアップロードしてみたのです
このアップロードの操作が間違っているのでしょうか？それともライトボックスの３つのフォルダを開いてアップするなら、htmlファイルのソースもどこかで何か書き換えが必要なのでしょうか？
ちなみに
私が作ったｈｔｍｌファイルのソースは、冒頭に
<HEAD>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</HEAD>
と書いており、画像のところはサムネイルをtableタグで一覧を作っているので
たとえばその一か所の例をあげると
<TD>
<a href="55big.jpg"rel="lightbox[2012]" title="タイトル"><IMG SRC="55.jpg"BORDER="0"></a>
</TD>
というふうにしています。
（５５jpgは、サムネイルの画像ファイルで、拡大したいものが５５big.jpgです。グループ表示するために、グループ名は２０１２にしました）
シンプルなオーバーレイにしたいということと、あまり複雑な説明のものはうまく理解できないので（初心者なので、上記ＵＲＬの説明を解読するのが精いっぱいでした）ので、できれば上記のＵＲＬで紹介されたものを使って、うまく表示できればと思っています。
アップロード時に何かが間違っていたのであれば正しいアップロードの方法を教えていただければと思います。
あるいはhtmlファイルのソースの書き換えが必要ならば、具体的に書き換えたソースを
コピーアンドペーストで使わせていただけるように、解答欄に書いていただければとても助かります。
お知恵、アドバイスをいただけたら幸いです。どうぞ、よろしくお願いいたします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
お返事遅くなり失礼いたしました。 教えていただいたことで解決できそうです。とても助かりました。 ご丁寧に誠にありがとうございました！