yuga.jsに入ってるthickbox.jsを使いやすくしてみる

画像やHTMLをポップアップ表示する、「thickbox」というjQueryライブラリがあります。

ThickBox 3.1

ウェブサイトでよく使われる演出をまとめた「yuga.js」に組み込まれているため、目にする機会が多くなりました。
今年の「ライジングサンロックフェスティバル」のサイトでも、アーティスト紹介に利用されています。

ですが先日、WEB屋ではない友人に
「ライジングサンのアーティスト写真の閉じ方がわからなかった」
と言われました。「右上に閉じるボタンがない」ため、戸惑ってしまったらしいです。

http: //blog.webbingstudio.com/2009/07/rising_sun.html（後半）

私もこのブログの画像ポップアップに、thickboxを使っています。
確かにこれはわかりにくいです。

そこでこのように、閉じるボタンが右上に出るように改造してみました。
手順は追記以下で。

1. CSSの読み込み順を変える

もしhead内で「thickbox.css」を最後に読み込むようにしていたら、linkの順番を変えて自分のサイトのCSSが最後になるように直します。
これをしないと、thickboxの基本CSSを上書きできません。

<link rel="stylesheet" type="text/css" href="css/thickbox.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/styles.css" media="all" />

2. thickbox.jsを直す

できれば元ライブラリはいじりたくないのですが、HTML出力部分の修正が必要です。

thickbox.js内、三か所に以下のような記述があるので

<a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key

こう書き換えます。

<a href='#' id='TB_closeWindowButton' title='Close'>X</a> close to Esc Key

閉じるのリンクを大文字の「X」にすることに抵抗がある方は、別途閉じるボタンを用意して、3.でCSSを追加するときに画像置換などで対応してください。

3. CSSを上書きする

自分のサイトのCSSに、以下の記述を追加します。

#TB_window #TB_closeAjaxWindow {<br /> margin-right: 35px;<br /> }</p> <p>#TB_window #TB_closeWindow a,<br /> #TB_window #TB_closeAjaxWindow a {<br /> position: absolute;<br /> top: -10px;<br /> right: -12px;<br /> width: 40px;<br /> padding: 2px 0;<br /> line-height: 1.1;<br /> font-size: 32px;<br /> font-weight: bold;<br /> font-family: Tahoma, “Century Gothic”, Verdana, sans-serif;<br /> text-align: center;<br /> -webkit-border-top-left-radius: 22px;<br /> -webkit-border-top-right-radius: 22px;<br /> -webkit-border-bottom-left-radius: 22px;<br /> -webkit-border-bottom-right-radius: 22px;<br /> -moz-border-radius: 22px;<br /> }</p> <p>#TB_window #TB_closeWindow a:link,<br /> #TB_window #TB_closeWindow a:visited,<br /> #TB_window #TB_closeAjaxWindow a:link,<br /> #TB_window #TB_closeAjaxWindow a:visited {<br /> color: #333;<br /> background-color: #FFF;<br /> border: 3px solid #666;<br /> text-decoration: none;<br /> }</p> <p>#TB_window #TB_closeWindow a:hover,<br /> #TB_window #TB_closeWindow a:focus,<br /> #TB_window #TB_closeWindow a:active,<br /> #TB_window #TB_closeAjaxWindow a:hover,<br /> #TB_window #TB_closeAjaxWindow a:focus,<br /> #TB_window #TB_closeAjaxWindow a:active {<br /> color: #EEE;<br /> background-color: #000;<br /> }

大文字のXにグロテスク系（文字の線全体に太さの差がない）のフォントを指定し、右上に絶対配置することで疑似的に「閉じるボタン」を作っています。

角丸のスタイルは、Firefox・Safari・Cromeのみ有効で、「幅÷2＋10%」くらいの値を指定すると、ほぼ丸になります。
Safari・Crome用の-webkit-border-radiusはショートハンドが有効にならないようです。上下左右個別に指定しなければならない点に注意してください。

IE6以降の主要ブラウザで確認済。
yuga.js・thickboxを使っている方はお試しください。

—–
EXTENDED BODY: