
お世話になります。
thickboxのカスタマイズに関して質問させてください。
現在、自社サイトで画像を大きく表示するためにthickboxを使用ししており、ダウンロード時での標準デザインを自社の雰囲気に合うようにカスタマイズしています。ところがいろいろ調べてもどうしても分からないことがあります。CLOSEボタンの設置です。
標準では、「close or Esc Key」というリンクで閉じるように設計されていると思いますが、これが気に入らないのでTB_Windowの右上端に画像で設置させたいと考えています。
その際、添付画像のほうにTB_Window枠からちょうど半分はみだすような位置に設置させたいです。
具体的にはMySpaceのログインをせずにしばらく試聴したりしてると「ログインまたは登録してください」と要求する表示が出ますがそのような表示をしたいと考えています。
これはどうしれば可能になるのでしょうか。
jsのほうをいじると思うのですが、jsソースはよく分からないので、ご教授いただけたら幸いです。よろしくお願いします。

No.2ベストアンサー
- 回答日時:
#1です。
◆thickboxについて
補足の方法だと背景に画像を指定しているので、サイズがピッタリにならないし、不要な「close or Esc key」g表示されたままではないでしょうか?
#1で示した部分はスクリプト内ではありますが、HTMLに書き加えているデータの部分なので、HTMLと同じです。(但し、改行を入れてはいけません)
それなので、例えば
<a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key
となっているものを
<a href='#' id='TB_closeWindowButton' title='Close'><img src="xxx" alt=""></a>
とすれば、表示される内容が画像になります。(xxxは画像のurl)
CSSの背景画像指定は不要になりますね。
リンクタグは必ずしも必要ではないので、
<img id='TB_closeWindowButton' src="xxx" alt="">
でもいけるはずです。こちらの場合はマウスが乗ってもカーソルが変わらないので、CSSで
cursor:pointer;
を付け加えてあげるとか…
◆fancyboxについて
すみませんが、fancyboxを知らないしDLしてテストしている時間が今はないので確認できません。(thickboxも知らないけど)
元々の機能として持っているサンプルの表示でよいということですから、(↑)のような小細工をしなくてもそのままで設定できるはずです。
なので、javascriptというよりライブラリの利用方法の問題。
>ウィンドウとオーバーレイは作動するのですが、Closeボタンや
>次の画像などの矢印ボタン画像が適用されていないようです。
>あと、タイトル部分の枠もレイアウトが変です。
>これはどうしてなのでしょうか。
とりあえず画像の表示はできているようなので、全体の環境設定はできているのだと推測します。
単に、どこかオプションの指定が間違っているだけではないのでしょうか?(表示できないとかいうのであれば別)
全部を同時にやろうとすると何が悪いか分からないので、まず、オプションを設定しない状態で表示させて表示状態を確認してください。
次に、以下のオプションの説明を見ながら、オプション指定を1つずつ追加していって表示させ、結果が思い通りであることを確認する。
…という手順を順次踏んで行けば、どこで勘違いしているのかすぐ分かりますし、オプションも大した量ではないので設定できるはずと思います。
<オプションの説明>
http://fancybox.net/api
丁寧な回答ありがとうございます。<a href='#' id='TB_closeWindowButton' title='Close'><img src="xxx" alt=""></a>と記述してみましたが、理由は分かりませんが、thickbox自体作動しなくなってしまいました。それで、困っていろいろ過去の質問とか見ていたら同じような質問があり→http://okwave.jp/qa/q6154188.html
こちらを参考にして、
CSSーーー
#TB_closeWindow{
position:absolute;
width:30px;
height:30px;
top:-15px;
right:-15px;
}
#TB_closeWindowButton{
background-image:url(../images/button-thickbox-close.png);
position:absolute;
width:30px;
height:30px;
}
jsーーー
<div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'></a></div>
としたところ、きちんと配置されました。
過去ログを読む限りだと、thicbox自体があえて<img>の挿入は止めてるみたいで、<a>の子要素に<img>入れるとまずいのかも知れません。ということのようです。
それでもちゃんと理想の形にデザインすることができました。丁寧なアドバイスありがとうございます。
それと、fancyboxのほうですが、時間を作っていろいろやってみたいです。
個人的にはfancyboxのシンプルなボタンと、thickboxのオーバーレイの黒さをミックスした感じが欲しかったので、これで満足です。ありがとうございます。
No.1
- 回答日時:
ざっと見ただけなので、考え方だけですが…
>具体的にはMySpaceのログインをせずにしばらく試聴したりしてると「ログインまたは登録してください」
>と要求する表示が出ますがそのような表示をしたいと考えています。
MySpaceを知らないのでどのようなイメージなのかわかりませんが、添付の画像をたよりに…
>TB_Window枠からちょうど半分はみだすような位置に
画像はTB_Windowから全部はみだしているように見えますが、それは調整していただくとして…
拡大表示されているときのDOMは以下のような構成になっているようです。
<div id="TB_overlay" class="TB_overlayBG"></div> ←オーバレイ(背景)
<div id="TB_window"> ←表示用div
<a id="TB_ImageOff"><img id="TB_Image"></a> ←拡大画像
<div id="TB_caption"></div> ←キャプション
<div id="TB_closeWindow"></div> ←closeの文字
</div>
#TB_closeWindowがご質問の対象の部分ということになります。
そのままコード内に文字列で記述されていますので、構成は読み取れると思います。
#TB_closeWindowの内容を任意の画像表示(<img~~>)に置換えて、CSSで表示位置を調整すればできそうですね。
拡大画像のサイズはthickboxが調整していますが、幸いにもラッパーとして#TB_windowがあるので、これに対して右上にはみ出して表示されるようにしておけば画像サイズが変わっても相対的に同じ位置に表示されるでしょう。
具体的には、
1)スクリプトの128行目あたりで(↑)のソースが設定されていますので、「close or Esc Key」
の文字の代わりに画像を差し替え。
2)そのクリック時の処理が次の行で、#TB_closeWindowButtonに対して設定されてい
ますので、それを生かすのであれば、#TB_closeWindowButtonは残しておく。
(画像にidを設定すればOK)
以上でスクリプトの修正は終わりで、位置の調整はCSSで上記の画像に対して、
3) position:absolute; top:-10px; right:-10px;
のような設定をすれば、右上にはみ出たようになります。(数値は適当に調整)
気になったのが、回答を書くためにthickboxのサイトを見たら、「他のものを使ってください」みたいなことが最初に書いてあった。
http://jquery.com/demo/thickbox/
んで、見てみたら『fancybox』というのが、丁度ご提示の画像とほとんどおなじなんだけれど…
http://fancybox.net/
この回答への補足
ご回答ありがとうございます。感謝します。
(3)に関してですが、ご指摘のとおりにしたらCLOSE表示が画面の右上に移動することはできました!
ただ、自分はjsの知識は全くといっていいほどなく、(1)(2)の問題はちょっと自分の知識だけでは難しかったです。最後のところの
~<a href=' ' id='TB_closeWindowButton' title='Close'>close</a>or Esc Key</div>"); を、
<a href='../images/button-thickbox-close.png' id='TB_closeWindowButton' title='Close'>close</a></div>"); に変更してみましたが...?って感じです。
CSSは以下の記述です。
#TB_closeWindow{
background-image:url(../images/button-thickbox-close.png);
position:absolute;
width:30px;
height:30px;
top:-10px;
right:-10px;
}
もしよければ具体的にどのように記述したらいいのか教えていただけるでしょうか。ご迷惑おかけします。
ーーーーーーーーーーーーーーーー
んで、見てみたら『fancybox』というのが、丁度ご提示の画像とほとんどおなじなんだけれど…
ーーーーーーーーーーーーーーーー
まさにMySpaceのデザインはこの「fancybox」そのまま使用していました。全然気が付かなかったです。ご指摘ありがとうございます!
それで、このfancyboxも一応導入してみたのですが、
ウィンドウとオーバーレイは作動するのですが、Closeボタンや次の画像などの矢印ボタン画像が適用されていないようです。あと、タイトル部分の枠もレイアウトが変です。これはどうしてなのでしょうか。個人的には、http://fancybox.net/の「Example」ページのDifferent title positions - 'inside' のような表示デザインにしたいのですが...。
これはどうしてでしょうか?
もしよければ教えてください。
<link type="text/css" rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/run.js"></script>
<script type=”text/javascript”>
$(document).ready(function() {
//Activate FancyBox
$(“#resultList .fancybox”).fancybox({
‘hideOnContentClick’: true,
‘overlayShow’: true,
‘Different animations’: 'elastic',
‘Different title positions’: 'inside',
'padding' : 10,
'autoScale' : true,
'titlePosition' : 'outside',
'overlayColor' : '#000',
'type' : 'iframe',
'overlayOpacity' : 0.8
});
});
</script>
run.jsはネットで導入方法についてのページを参考にして↓のように記述しました。
jQuery(function($){
$('a[href$=".jpg"] , a[href$=".gif"] , a[href$=".png"]').fancybox();
//画像ファイルはfancyboxで開く
});
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- 防犯カメラ・監視カメラ・小型カメラ VHSを高画質な動画ファイルにしたいです。 3 2022/05/06 12:08
- Windows 10 Windows10 の設定?について (長文ですがよろしくお願いします)m(_ _)m 3 2022/05/14 12:22
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- HTML・CSS svgクリップパスの応用コーディング方法 2 2022/04/09 09:07
- BTOパソコン PCケースのHDD設置方法につきまして 3 2023/06/08 14:19
- プリンタ・スキャナー 封筒印刷 差出人印刷ずれる 4 2022/05/01 10:12
- 一戸建て 現在、新築の照明計画をしているところです。 住宅メーカーからの照明計画の図面がこれでいいのかさっぱり 4 2022/10/01 22:05
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
バナーの貼り方とバナーにリン...
-
ボタンを押したままにする。
-
背景が透明なリンクボタンで、...
-
期間ごとに画像表示を切り替え...
-
クリックしても、リンクに飛ば...
-
アクセスカウンタのタグはどこ...
-
areaタグのマウスオーバー時に枠線
-
スライドショーの上にロゴマー...
-
IMGタグでTIFF画像を表示
-
複数のボタンで1つのエリアに...
-
datepickerを使ってカレンダー...
-
イメージマップを貼った画像の...
-
alt属性だけでツールチップが表...
-
htmlでのpdf資料のリンク方法
-
cssのtext-indentでテキストを...
-
画像クリックでクリップボード...
-
form以外でのpostってできますか?
-
右クリック禁止が効かないのですが
-
クリッカブルMAP領域が分かる様...
-
PDFの保存ボタンが表示されません
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スライドショーの上にロゴマー...
-
クリックしても、リンクに飛ば...
-
IMGタグでTIFF画像を表示
-
ボタンを押したままにする。
-
バナーの貼り方とバナーにリン...
-
form以外でのpostってできますか?
-
背景が透明なリンクボタンで、...
-
クリッカブルMAP領域が分かる様...
-
イメージマップを貼った画像の...
-
タイトルバーに画像を入れるHTM...
-
WEBサイトの一部コンテンツがス...
-
期間ごとに画像表示を切り替え...
-
<area></area> 部分にボーダー...
-
thickboxでcloseボタン右上配置...
-
複数のボタンで1つのエリアに...
-
HTMLだけで画像をクリックして...
-
windowsは画像にマウスオンで画...
-
onmouseoverに複数の命令を書き...
-
マウスオンの画像の切り替え
-
携帯用HPのダウンロードページ...
おすすめ情報