- 締切済み
ThickboxでHTMLを指定サイズで表示したい
ThickboxでHTMLページを指定したサイズで表示させたい。 お世話になります。 自社サイトでthickboxを使用したいと考えています。既に画像をクリックして大きな画像を表示させる（オーバーレイ表示）ためにthickboxを導入しており、それは比較的簡単だったのですが、今回は別個に作成したHTMLページを同じようなデザインで表示させたいと思っています。 いろいろなサイトを参考にしてこのようなソースになりました。table{width:800px;height:600px}が記述されたsample01.htmlというページをやはりwidth:800px、height:600pxでthickboxでオーバーレイ表示させたいというのが目標です。 <head> <link href="css/thickbox.css" rel="stylesheet" type="text/css" media="all"/> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></script> </head> <body>～中略～ <a href="sample01.html?width=800px&height=600px" class="thickbox"><img src="images/sample02-small.jpg" alt="画像の説明" border="0"></a> </body> ところが、一応Thickboxは機能するのですが、キレイな形で表示されず、またその理由もよく分からず困っています。初心者なので、つまらないところで行きつまっているかもしれませんが、どうか知恵をお貸し下さい。 ※分からない点 (1)800×600px指定しているのに、小さいサイズで表示され、その文スクロールバーが表示される。インラインフレームのようなデザインにしたくない。 (2)上部にグレー部分ができる（Closeボタン用だと思われるがいらない）。既に画像を表示させる際の場合のように右上部に自分で制作したボタンを配置してCloseボタンとしたい。 既に作成したthickboc.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; } (3)表示させたHTMLが文字化けする。 <script type="text/javascript" charset="Shift_JIS"></script>指定しています。 以上です。どうかご教示よろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- 4017B
- ベストアンサー率73% (1336/1814)
乗りかかった船なので、一気に最後までやってみました(笑)。 ━ ココから ━━━━━━━━━━━━━━━━━━━━━━━━ #TB_title { height: 0; margin: 0; padding: 0; visibility: hidden; } #TB_ajaxWindowTitle { display: none; margin: 0; padding: 0; } #TB_closeAjaxWindow { height: 0; margin: 0; padding: 0; visibility: hidden; } #TB_closeWindowButton { visibility: visible; position: absolute; right: 0px; top: -30px; width: 30px; height: 30px; margin: 0; padding: 0; background-image:url('../images/button-thickbox-close.png'); } ━ ココまで ━━━━━━━━━━━━━━━━━━━━━━━━ ～以上の様に、thickbox.css の該当する部分を書き直してみて下さい。これで大体、ご希望のイメージ通りになるはずです。 あと注意点ですが、CSSの記述する順番は必ず例文の通りに書いて下さい。Defaultのままの位置で、中身だけ変更すると変になりますので。一旦、該当箇所を削除して、例文をそのままCSSファイルの末尾に追記する様な形で大丈夫だと思います。 で、何度も言いますが。CSS＆JavaScript＆HTMLは全てUTF-8でお願いします（出来ればBOM無し改行LFで）。
- 4017B
- ベストアンサー率73% (1336/1814)
とりあえず本家のThickBoxから最新版（v3.1）をDLして試用してみました。それでとりあえず気付いた点を1つ…。 まず、aタグ内のURLに付加する引数の記述式が、推奨されてる形と大幅に異なっています。？以降の“width=800px&height=600px”～の部分です。 自分の環境（WinXP＋Chrome）で色々試してみましたが、どうも引数のウィンドウサイズ指定値に余計な単位（px）が付いていると、実際のウィンドウサイズが可笑しくなる様です。 なので… <a href="sample01.html?keepThis=true&TB_iframe=true&width=800&height=600" class="thickbox"> ～と言う風に変更してみて下さい。何某か改善されるかもです。 ＞文字化け JavaScriptを使う以上、HTMLやCSSなども含めて、全てのファイルの文字コードを“UTF-8”で統一して下さい。出来ないのならJavaScriptを使う事自体諦めて下さい。ThickBoxやLightBox2はJavaScriptのライブラリであるjQueryに依存してますので、使うつもりなら同様です。 ＞ボタン表示位置 これは純粋にCSSの問題だと思われます。なので色々やってれば自力解決出来るとは思いますが、今はちょっと手が回らなかったので割愛。1週間くらい時間を貰えれば、暇を見て考えてみますが…。
