RubyはJavascriptと一緒にうまく遊べる

ブラウザの中でRubyが動くなんて本当にすごい。でも真実を語ろう。僕はJavascriptも好きだ。なんといってもJavascriptには死ぬほどライブラリがあるから。

"clicking on an image"をちゃんとしたい。いまは単純に新しいページをオープンするだけで，検索結果はなくなってしまうので「戻る」ボタンは意味が無い。イメージをクリックしたときにクールな視覚効果が使えたり，実際のFlickrのイメージへのリンクを持てたら素晴らしい。そんなライブラリがあればの話だけど…

http://www.huddletogether.com/projects/lightbox2/

前にも言ったとおり，Lightboxは素晴らしい。イメージをズームアップするにはLightboxを使う。まずindex.htmlに戻り，Lightboxを読み込む。

<script type="text/javascript" src="lightbox/js/prototype.js"></script> 
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects"></script> 
<script type="text/javascript" src="lightbox/js/lightbox.js"></script> 
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />

Lightboxは，アンカータグの特殊なプロパティを使って，イメージがコレクションの一部かどうか，イメージのタイトルは何かなどの情報を格納している。Render#photoメソッドに戻って，:titleと:relの値を:aタグに追加しよう。

tag(:a)の呼び出しはこんな風になる。

tag(:a, {
  :href  => "#{img}",  
  :title => "&lt;a href=&quot;http://www.flickr.com/photos/#{p['owner']}/#{p['id']}&quot; target=&quot;_blank&quot;&gt;#{p['title']}&lt;/a&gt;", 
  :rel   => "lightbox[#{@tags}]" 
}) do 
  tag(:img, :src => "#{thumb}") 
end

最後に，レスポンスを受信したときにLightboxを初期化する。app.rbのshowメソッドreder呼び出しの後ろに以下のコードを追加する。

if document.overlay && document.lightbox 
  document.overlay.parent.remove_child document.overlay 
  document.lightbox.parent.remove_child document.lightbox 
end
HtmlPage.window.eval("initLightbox()")

最後の行は最高に美しいとは言えないが，イメージは全て美しい。