はじめまして。
ホームページ作成初心者の者です。
今独学でホームページを作成してまして写真をlightboxを使って表示させたいのですが上手く拡大されず、そのままのサイズで中途半端に表示されます。
HTML内の<head>~</head>タグ内の記述は以下になります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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>になります。
初めての質問でどう説明していいのかも解からずこういう質問の仕方で申し訳なく思っております。
上手く拡大表示するにはどうしたらいいのでしょうか?
何かしら思い当たる点がございましたら参考までに教えて頂けたらと思います。
よろしくお願いします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
補足です。
間違えて送信ボタンを押してしまったので、尻切れになってしまいました。
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/
迅速にお答え頂き本当に有難う御座います。
早速自宅に戻り試してみようと思います。
お忙しい中大変貴重なご意見有難う御座いました。
また機会がございましたら宜しくお願いしますm(__)m
No.1
- 回答日時:
<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が記述されていない為、反映できていないのではないでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
DreamWeaverでJS
-
サイトにアクセスした際、数秒...
-
jqueryのcolorboxを読込直後に...
-
<script>タグというのはどこか...
-
jQueryの基本的なことについて...
-
文字サイズの大中小について
-
画像をゆっくりと切り替える方法
-
マウスオーバー+クリカブルマッ...
-
noscript内にlinkは間違い?
-
<a href="#" …>の意味を教えて...
-
onLoadをbodyタグ以外で使用する
-
bodyにidをつける理由は何ですか?
-
HTMLタグでマウスポインタを変...
-
javascriptとApacheの設定
-
Dreamweaver で 外部JSを読み込...
-
JavaScriptでiframeの内容を「...
-
テキストボックス内にハイパー...
-
1から100までの平方根を表示す...
-
ひとつの外部ファイルに複数の...
-
変数の代入値を外部の.txtファ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
base64encodeでの文字化けについて
-
複数のjavascriptを使うと動か...
-
Base64に変換したHTMLの<script...
-
シャドウボックスとjQueryを共...
-
lightboxの動作に関して
-
音楽再生用jQueryプラグイン「j...
-
CrossSlideのスライドショーが...
-
htmlで別ファイルのjavascript...
-
ebayの返信で『 Message may no...
-
jQueryの基本的なことについて...
-
DreamWeaverでJS
-
プラグイン無しでContactform7...
-
パソコンでホームページを作成...
-
document.lastChild.appendChil...
-
サイトにアクセスした際、数秒...
-
dojo(ライブラリ)のカレンダ...
-
jqeryのslicksliderのパスにつ...
-
Javascriptの外部サーバーから...
-
jQueryのfilterについて
-
マウスオーバー+クリカブルマッ...
おすすめ情報