写真をモーダルエフェクトで、スライドショー表示する これはprototype.js用の、Lightbox.jsを使っていた。これと、全く同じ動きをしてくれるjQuery のプラグインがありました。 jQuery lightBox plugin 利用方法は簡単。ライブラリをサーバーにアップして、内で読み込む。そして、lightbox 表示するHTMLオブジェクト（タグを囲んでいるタグ）を、jQueryセレクタで選択する。 $('a[@rel*=lightbox]').lightBox(); と記述すると、prototype.js 用のlightbox.js で指定する方法と同じになるので、今までのブログ記事を修正しなくても、そのままjQueryプラグインでスライドショー表示できます。これは便利。

ブログで使っているprototype.js を jQuery へ移行（スライドショー, ハイライトなど）：Goodpic

- with GroveLog

これまでThickBoxを使っていたけれど、こっちの方が、エフェクトがかっこいいなぁ。

いま、某バイクメーカーの新商品関連のフォトギャラリーサイトを作成していて、やはり、ThickBoxを使って構築したのだけれど、いまから変更したい気持ちが。。とはいえ、なにしろアップ直前だからなぁ。

このブログでも近々Flickrの写真を見せたいと思っているので、その際はこっちを使ってみます。

jQuery lightBox plugin

GroveLogでは、最新のQuoteをXMLでfeedしています。これを読み込んで、ブログのサイドバーにその内容を表示してやろうという、よくあるブログパーツです。

実現するにあたって考慮しないといけないのは、javaScriptのクロスドメインの問題と、XMLのパースの問題。
クロスドメインの対応は今回は、当ブログのサーバ上にプロキシCGIを設置しました。（一応、レスポンスを返すドメインを制限する機能くらいはあります。）
XMLのパースにあたってはこれを使わせてもらいました。

JKL.ParseXML クラスは、サーバ上の XML 形式ファイルをダウンロード～解析して、 JavaScript オブジェクト（配列やマップ）に変換するライブラリです。 複雑な DOM 操作なく簡単なスクリプトで XML 形式ファイルを扱えるため、 Amazon など XML を出力する既存の Web サービスや、 CGI と連携することで ajax ページを手軽に構築できます。 IE・Firefox・Opera・Safari のクロスブラウザに対応しています。 XML を JSONのように手軽に扱える他、 JSON／CSV／LoadVars 形式ファイルなどのテキストファイルも利用可能です。

[ajax] JKL.ParseXML／ajax通信処理ライブラリ

- with GroveLog

ループ処理で最新の10件分だけ抽出するようにしています。
とりあえずなので、汎用的ではないです。
時期バージョンではJSONを利用してプロキシCGIなしで、どこでも設置可能なブログパーツに改良するつもりです。（ローディングのアニメーションくらいあったほうが親切かな）

このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。

ブロックレベル要素の高さを揃えるheightLine.js[to-R]

- with GroveLog

以前、角丸ライブラリかなにかで、角取りつつ高さも揃える・・みたいなのがあったような気がしたのだけれど、覚えておらず。
改めてGoogleしてみたところ、よさそうなのを発見。
ただ、個人的にはｊQueryを利用しているので、ｊQuery版みたいのがあれば、そっちの方がすっきりするかなと思い、「ｊQuery　高さ揃え」で、再度Google。すると、今度はこれを発見。

ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。

jQueryでブロック要素の高さを揃えてみる - 徒書

- with GroveLog

今回はこっちを使うことに。
問題なくうまく行きました。一点、jqcorner.jsも併用しているのだけれど、先に.flatHeights()で高さを揃えてから、.corner("5px")としないと変なところで角丸されてしまいます。

角丸とか、高さを揃えるとか、昨今のウェブデザインではよく使う手法だけれど、普通にやろうとすると、余計なdivが増えたり、cssを多くかかないといけなかったり、どんどん複雑になる傾向があります。こうった便利なjsを使うとソースも綺麗に保てるし、なにより、ずっと楽になります。重宝します。