RailsでLightWindowを使う方法

rails js

How to use the Script

Firstly we need to include our required javascript and css files in our page like so:

お手軽にギャラリーを作れるjsを http://f32.aaa.livedoor.jp/~azusa/index.php?t=ajax&p=prototype_plugin_imagegallery で探して、LightWindowを使ってみたのですが、Railsで使うときにあとちょっとのところがあったので補足。

  1. LightWindowのアーカイブをダウンロードして、scriptaculous.jsとlightwindow.jsをpublic/javascriptsに、lightwindow.cssをpublic/stylesheetsに、imagesの下の画像をpublic/imagesにコピー。
  2. 以下のような記述をapp/views/layouts/application.html.erbなどに記述
    <%= stylesheet_link_tag 'lightwindow.css' %>
    <%= javascript_include_tag 'prototype.js' %>
    <%= javascript_include_tag 'scriptaculous.js?load=effects' %>
    <%= javascript_include_tag 'lightwindow.js' %>

これだけだと lightwindow.jsの内部に書いてある、images/black.png が相対パスになっているので、URLによってはちゃんとロードできません。よって、以下の記述を先ほど追加した部分の下に追加します。

<script>
Event.stopObserving(window, 'load', lightwindowInit);
Event.observe(window, 'load', function(){
  myLightWindow = new lightwindow({
    overlay: {
        opacity : 0.7,
        image : '/images/black.png',
        presetImage : '/images/black-70.png'
    }
  });
  myLightWindow.options.skin.loading = 
    '<div id="lightwindow_loading">'+
      '<img src="/images/ajax-loading.gif" alt="loading" />'+
      '<span>Loading or <a href="javascript: myLightWindow.deactivate();">Cancel</a></span>'+
      '<iframe name="lightwindow_loading_shim" id="lightwindow_loading_shim" src="javascript:false;" frameBorder="0" scrolling="no"></iframe>'+
    '</div>';
}, false);
</script>

という風にimagesの下の画像を相対パスで使用している設定を上書きしてやるとバッチリのはずっす。