thickboxでcloseボタン右上配置する方法

質問

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

回答No.2

fujillin · ベストアンサー

#1です。

◆thickboxについて
補足の方法だと背景に画像を指定しているので、サイズがピッタリにならないし、不要な「close or Esc key」ｇ表示されたままではないでしょうか？
#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を知らないしＤＬしてテストしている時間が今はないので確認できません。（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

fujillin

ざっと見ただけなので、考え方だけですが…

＞具体的には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>　　　　　　　　　　　　←ｃloseの文字
</div>

#TB_closeWindowがご質問の対象の部分ということになります。
そのままコード内に文字列で記述されていますので、構成は読み取れると思います。
#TB_closeWindowの内容を任意の画像表示（<img～～>）に置換えて、CSSで表示位置を調整すればできそうですね。
拡大画像のサイズはthickboxが調整していますが、幸いにもラッパーとして#TB_windowがあるので、これに対して右上にはみ出して表示されるようにしておけば画像サイズが変わっても相対的に同じ位置に表示されるでしょう。

具体的には、
1）スクリプトの128行目あたりで（↑）のソースが設定されていますので、「close or Esc Key」
　　の文字の代わりに画像を差し替え。
2）そのクリック時の処理が次の行で、#TB_closeWindowButtonに対して設定されてい
　　ますので、それを生かすのであれば、#TB_closeWindowButtonは残しておく。
　（画像にidを設定すればＯＫ）

以上でスクリプトの修正は終わりで、位置の調整は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で開く
});