Highslide JS導入

WordPerss
http://vikjavev.no/highslide/

画像をクリックすると拡大してくれるAjaxライブラリです。

似たようなものにLightboxというものがありますが、試用したところIE7だけ背景が透けずに真っ黒になってしまったりしてしまった為やめました。

その後色々調べているうちにHighslide JSを発見。こちらの方が気に入ったので導入してみました。

下の画像をクリックしみると動作がわかります。2007年12月の高幡不動の紅葉です。

2007/12/02 高幡不動の紅葉 (1) 2007/12/02 高幡不動の紅葉 (2) 2007/12/02 高幡不動の紅葉 (3)

開いたウィンドウはドラッグして移動できます。右上のコントロールボックス内の矢印で次の画像や前の画像へ移動したりできます(キーボードのカーソルキーも使えるっぽい)。×か画像をクリックすると元の大きさに戻ります。

面白いので全部の画像に適用しました。難点はタグの要素を追加しないといけないこと。これが結構面倒です。気が向いたら自動で設定されるようにしたいですなぁ。

WebクリエイティブのためのCMSテンプレートデザイン (Web Designing BOOKS) 次世代ブログ WordPressで一歩先をいく 実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips

コメント