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

WebbingStudio — Sun, 09 Aug 2009 13:45:49 +0000

画像や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を上書きできません。

2. thickbox.jsを直す

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

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

close or Esc Key

こう書き換えます。

X close to Esc Key

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

3. CSSを上書きする

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

#TB_window #TB_closeAjaxWindow {
	margin-right: 35px;
}

#TB_window #TB_closeWindow a,
#TB_window #TB_closeAjaxWindow a {
	position: absolute;
	top: -10px;
	right: -12px;
	width: 40px;
	padding: 2px 0;
	line-height: 1.1;
	font-size: 32px;
	font-weight: bold;
	font-family: Tahoma, "Century Gothic", Verdana, sans-serif;
	text-align: center;
	-webkit-border-top-left-radius: 22px;
	-webkit-border-top-right-radius: 22px;
	-webkit-border-bottom-left-radius: 22px;
	-webkit-border-bottom-right-radius: 22px;
	-moz-border-radius: 22px;
}

	#TB_window #TB_closeWindow a:link,
	#TB_window #TB_closeWindow a:visited,
	#TB_window #TB_closeAjaxWindow a:link,
	#TB_window #TB_closeAjaxWindow a:visited {
		color: #333;
		background-color: #FFF;
		border: 3px solid #666;
		text-decoration: none;
	}
	
	#TB_window #TB_closeWindow a:hover,
	#TB_window #TB_closeWindow a:focus,
	#TB_window #TB_closeWindow a:active,
	#TB_window #TB_closeAjaxWindow a:hover,
	#TB_window #TB_closeAjaxWindow a:focus,
	#TB_window #TB_closeAjaxWindow a:active {
		color: #EEE;
		background-color: #000;
	}

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

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

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

Twitterで記事を紹介して下さい（-人-）

北海道開発オフ：jQueryでスマートなブログを考えてみる

WebbingStudio — Sun, 21 Sep 2008 13:30:21 +0000

北海道開発オフへ行ってきました。

ノートパソコンを持参して参加したはじめての勉強会。なのに、肝心のOSが真っ青な画面になってしまって動きません…
買って一ヶ月しか経ってないんですけど＠＠；

PHPを勉強するつもりだったのですが、仕方なく予定変更。
会場（@smokeymonkeyさんの会社）のパソコンからMovableTypeにアクセスして、やや仕事がらみの開発をすることになりました。

ときどき、ウェブサイト的なワンカラムレイアウトのブログ構築をすることがあります。
ワンカラムは目に入る文章量が少なく、ブログ的なデザインを打ち破れるのですが、各記事を移動するときにいちいちページの読み込みが発生してしまいます。

最近勉強している、jQueryを利用して、デザインもインターフェースもスマートなブログが作りたいなーと考えてみました。
（もう既出だろうけど、開発オフなのでそこは無問題 :P）

結局今日は、MovableTypeとjQueryでこんなものができました。
（ソースをコピーして、静的HTMLに直しています）

http://webbingstudio.com/souvenir/jquery_test/

メインカラム下に、JavaScriptが有効にならなかった場合のページへのリンクも貼ってあります。お暇な方は比較してみてください。

今回は右下にすぽーんと投げ捨てるようなページ切り替えになっていますが、jQueryはアニメーションの追加ライブラリが豊富なので、柔らかいフェードイン・フェードアウトや、MacOSX風ぐるりん切り替えなんかも良さげ。

現段階ではほんとうにさわりだけで、しかもFirefoxでしかチェックしてませんwww
Ajaxでの過去ログ読み込みもつけることも考えると、シンプルな見た目の割になかなか難儀そうです。また時間があるときに考えてみます。