質問: thickboxでcloseボタン右上配置する方法 お世話になります。 thickboxのカスタマイズに関して質問させてください。 現在、自社サイトで画像を大きく表示するためにthickboxを使用ししており、ダウンロード時での標準デザインを自社の雰囲気に合うようにカスタマイズしています。ところがいろいろ調べてもどうしても分からないことがあります。closeボタンの設置です。 標準では、「close or esc key」というリンクで閉じるように設計されていると思いますが、これが気に入らないのでtb_windowの右上端に画像で設置させたいと考えています。 その際、添付画像のほうにtb_window枠からちょうど半分はみだすような位置に設置させたいです。 具体的にはmyspaceのログインをせずにしばらく試聴したりしてると「ログインまたは登録してください」と要求する表示が出ますがそのような表示をしたいと考えています。 これはどうしれば可能になるのでしょうか。 jsのほうをいじると思うのですが、jsソースはよく分からないので、ご教授いただけたら幸いです。よろしくお願いします。
回答: #1です。 ◆thickboxについて 補足の方法だと背景に画像を指定しているので、サイズがピッタリにならないし、不要な「close or esc key」g表示されたままではないでしょうか? #1で示した部分はスクリプト内ではありますが、htmlに書き加えているデータの部分なので、htmlと同じです。(但し、改行を入れてはいけません) それなので、例えば close or esc key となっているものを ! とすれば、表示される内容が画像になります。(xxxは画像のurl) cssの背景画像指定は不要になりますね。 リンクタグは必ずしも必要ではないので、 ! でもいけるはずです。こちらの場合はマウスが乗ってもカーソルが変わらないので、cssで cursor:pointer; を付け加えてあげるとか... ◆fancyboxについて すみませんが、fancyboxを知らないしdlしてテストしている時間が今はないので確認できません。(thickboxも知らないけど) 元々の機能として持っているサンプルの表示でよいということですから、(↑)のような小細工をしなくてもそのままで設定できるはずです。 なので、javascriptというよりライブラリの利用方法の問題。 >ウィンドウとオーバーレイは作動するのですが、closeボタンや >次の画像などの矢印ボタン画像が適用されていないようです。 >あと、タイトル部分の枠もレイアウトが変です。 >これはどうしてなのでしょうか。 とりあえず画像の表示はできているようなので、全体の環境設定はできているのだと推測します。 単に、どこかオプションの指定が間違っているだけではないのでしょうか?(表示できないとかいうのであれば別) 全部を同時にやろうとすると何が悪いか分からないので、まず、オプションを設定しない状態で表示させて表示状態を確認してください。 次に、以下のオプションの説明を見ながら、オプション指定を1つずつ追加していって表示させ、結果が思い通りであることを確認する。 ...という手順を順次踏んで行けば、どこで勘違いしているのかすぐ分かりますし、オプションも大した量ではないので設定できるはずと思います。 <オプションの説明> http://fancybox.net/api