こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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ファイルのソースの書き換えが必要ならば、具体的に書き換えたソースを
コピーアンドペーストで使わせていただけるように、解答欄に書いていただければとても助かります。

お知恵、アドバイスをいただけたら幸いです。どうぞ、よろしくお願いいたします。

投稿日時 - 2013-05-02 08:27:20

QNo.8069165

困ってます

質問者が選んだベストアンサー

実際がどうなっているのかわかりませんが、ご質問文の状況から推測すると、(lightboxが機能していなくて)クリックした時は通常のリンクタグの機能としてリンク先が表示されているだけのように思えます。
 > <a href="55big.jpg"rel="lightbox[2012]" title="タイトル"><IMG SRC="55.jpg"BORDER="0"></a>

これから、現象から推測するとjsファイルが正しく読み込めていないのではないかと懸念されます。
サーバへアップ後の、各jsファイルやフォルダの位置関係とscriptタグ内のアドレスは正しく調整できているでしょうか?
このあたりが一番怪しそうなので、再チェックなさることをお勧めします。

投稿日時 - 2013-05-02 09:44:40

お礼

お返事遅くなり失礼いたしました。
教えていただいたことで解決できそうです。とても助かりました。
ご丁寧に誠にありがとうございました!

投稿日時 - 2013-06-12 09:38:27

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問