画像に鏡面効果をつける

注目エントリで上がっている記事と似たようなことを自分で試したのでメモ。

こちらが上がっていた記事。依存するJSがないようなので、これ単体で動くのかな。こっちの方が楽かも。
http://blog.webcreativepark.net/2007/09/21-181239.html

こっちが私が試した版。
http://mir.aculo.us/stuff/reflector/reflector.html

ダウンロードリンクが見つからなかったのでサンプルのソースからコピペして使いました。

Railsで使いたい

また、Railsで使いたい場合はscript.aculo.usのアーカイブからbuilder.jsを持ってこないといけません。それぞれを以下のような感じで保存します。

 RAILS_ROOT/public/javascripts
                      +-- reflect.js <- コピペしたヤツ
                      +-- builder.js <- script.acoulo.us 1.5.0のアーカイブから引っ張りだしたヤツ

で、JSを読み込むようにapp/view/layout/application.rhtmlなどで設定します。

  ...
  <%= javascript_include_tag :defaults%>
  <%= javascript_include_tag 'builder'%>
  <%= javascript_include_tag 'reflector'%>
  ...

あとはどこかでスクリプトを実行するのみ。今回はreflectクラスの付いたimgタグにあらかた適用する作りにしてみました。

...
  <script type='text/javascript'>
    $$('img.reflect').each(function(img){ Reflector.reflect(img) });
  </script>
</body>

私はとりあえずlayout/application.rhtml一番下に書いてます。あとで整理するときにapplication.jsからbody.onloadにつっこむように移動するつもり。

おまけ

いままでに512人は作ったであろう、Railsの動的なページへ向けたimgタグを生成するヘルパーメソッド。
:reflect => trueにするとreflectクラスが付くので、上記のJSと併せて使います。

module ApplicationHelper
  def img_link_for(url_options, options={})
    if options.delete(:reflect)
      options[:class] ||= '' 
      options[:class] << ' reflect' 
    end
    tag('img', options.merge( :src => url_for(url_options) ))
  end
end

おまけ2

 <img src='...' onload='Reflector.reflect(this)' />

とかやってはいけない。一見動くけど重いよ。Firebugにtoo much recursionって怒られるよ。