- 締切済み
light boxが上手く表示されない
はじめまして。 ホームページ作成初心者の者です。 今独学でホームページを作成してまして写真をlightboxを使って表示させたいのですが上手く拡大されず、そのままのサイズで中途半端に表示されます。 HTML内の<head>～</head>タグ内の記述は以下になります。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <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" /> <link rel="stylesheet" href="style.css" type="text/css"/> <title>写真ギャラリー</title> </head> 以下1部省略 <div id="gallery-boxA"> <p> <a href="images/ナゴラン.jpg"rel="lightbox" title="ナゴラン"><img src="images/ナゴラン.jpg" width="200" height="180" /></a> <a href="images/ケイタイオウフウラン.jpg"rel="lightbox" title="ケイタイオウフウラン"><img src="images/ケイタイオウフウラン.jpg" width="200" height="180" /></a> <a href="images/サガリラン.jpg"rel="lightbox" title="サガリラン"><img src="images/サガリラン.jpg" width="200" height="180" /></a> </p> </div>になります。 初めての質問でどう説明していいのかも解からずこういう質問の仕方で申し訳なく思っております。 上手く拡大表示するにはどうしたらいいのでしょうか？ 何かしら思い当たる点がございましたら参考までに教えて頂けたらと思います。 よろしくお願いします。
- kyo-white
- お礼率50% (1/2)
- その他([技術者向] コンピューター)
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- h-seria
- ベストアンサー率44% (198/442)
補足です。 間違えて送信ボタンを押してしまったので、尻切れになってしまいました。 http://serennz.sakura.ne.jp/toybox/lightbox/ 上記からDLしたcssを解凍し使用したいページが存在するのと同じ場所にUPしておきます。 そして実際に使用するページに先の記述をMETA内に記述します。 URLは相対バスでもOKです。 ただ、現行のLight BoxはPlusにバージョンが上がっていましたので、先の記述では上手く動かないかもしれませんので、現行のLight Box Plusの記述も記載しておきます。 <META> <link rel="stylesheet" type="text/css" href="./resource/lightbox.css" media="screen,tv"> <script type="text/javascript" charset="UTF-8" src="./resource/spica.js"></script> <script type="text/javascript" charset="UTF-8" src="./resource/lightbox_plus.js"></script> <META> 上記を参考にして下さい。 cssファイルまでのバスが正しければ動くと思います。 ダウンロードしたファイルはそのままUPしても問題はありませんが、不要なファイルも含まれています「jojo.cssとsample.css」のでこだわるようでしたら削除しても問題ありません。 どちらのLight Boxを使用しているかが解かりませんので両方記載してみました。 この場合でもscr="の後に貴方のURLを記載してもOKですし、当然相対バスの記載でも構いません。 返って解かりづらいかもしれませんね。 ごめんなさい。 参考URLにてlightboxと検索してみて下さい。 詳細な設置ガイドを見る事が出来ますよ。
- 参考URL：
- http://allabout.co.jp/
- h-seria
- ベストアンサー率44% (198/442)
<META> <LINK rel="stylesheet" type="text/css" href="貴方のURL/resource/lightbox.css" media="screen,tv"> <SCRIPT type="text/javascript" charset="UTF-8" src="貴方のURL/resource/spica.js"></SCRIPT> <SCRIPT type="text/javascript" charset="UTF-8" src="貴方のURL/resource/lightbox_plus.js"></SCRIPT> <META> こんな記述だったと思いますが…貴方のURLが記述されていない為、反映できていないのではないでしょうか。
お礼
迅速にお答え頂き本当に有難う御座います。 早速自宅に戻り試してみようと思います。 お忙しい中大変貴重なご意見有難う御座いました。 また機会がございましたら宜しくお願いしますm(__)m