Light Boxを正確に表示させるには?
HPでライトボックスを使って画像を表示したいと思っています。
初心者なのでいろいろ探したところ、一番わかりやすかった下記のURLにあった説明どおりにlightboxをDLしhtmlファイルを作ってやってみたところ、デジデジ(というHP無料サイトを使っています)にアップロードする前に実験的に自分のPC上だけで見てみたらうまく表示されました。
http://www.howto-lightbox.com/
(参考までに、こちらは説明があったサイトです)
でも、そのhtmlファイルやライトボックスの中に入っているファイル全てをデジデジにアップロードした状態では、画像がオーバーレイではなく、クリックしたサムネイル画像が並んでいた画面全体が、拡大画面そのものに完全に切り替わってしまうだけになります。(元にもどるためにはブラウザの【←】
を押すしかない状態になります)
アップロード前に試したときは、ひとつのフォルダに、htmlファイル、画像の複数のファイル、そしてライトボックスのCCS、IMAGES、 JSの3つのフォルダを収めている状態でした。
でもデジデジにアップロードするときは、フォルダのままアップできないようなので、CCS,IMAGES,JSの3つのフォルダをそれぞれ開いて、中にあるファイルをひとつづつ全てアップロードしてみたのです
このアップロードの操作が間違っているのでしょうか?それともライトボックスの3つのフォルダを開いてアップするなら、htmlファイルのソースもどこかで何か書き換えが必要なのでしょうか?
ちなみに
私が作った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>
というふうにしています。
(55jpgは、サムネイルの画像ファイルで、拡大したいものが55big.jpgです。グループ表示するために、グループ名は2012にしました)
シンプルなオーバーレイにしたいということと、あまり複雑な説明のものはうまく理解できないので(初心者なので、上記URLの説明を解読するのが精いっぱいでした)ので、できれば上記のURLで紹介されたものを使って、うまく表示できればと思っています。
アップロード時に何かが間違っていたのであれば正しいアップロードの方法を教えていただければと思います。
あるいはhtmlファイルのソースの書き換えが必要ならば、具体的に書き換えたソースを
コピーアンドペーストで使わせていただけるように、解答欄に書いていただければとても助かります。
お知恵、アドバイスをいただけたら幸いです。どうぞ、よろしくお願いいたします。
お礼
ありがとうございました。