grailsとmosaic jquery pluginで画像の上に半透明のキャプションを表示する

grailsとmosaic jquery pluginで画像の上に半透明のキャプションを表示するには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言

modules = {
    application {
        resource url:'js/application.js'
    }
    // mosaicのモジュールを宣言
    mosaic {
        dependsOn 'jquery'
        resource url: 'js/mosaic.1.0.1.min.js'
        resource url: 'css/mosaic.css'
    }
}

mosaic.1.0.1.min.jsはweb-app/jsに、mosaic.cssはweb-app/cssに
画像類はweb-app/imgに配置します。

2. 画像の大きさに合わせてmosaic.cssのmosaic-blockクラスのwidthとheightを変更します。 3. スライドするキャプションの高さは.bar .mosaic-overlayクラスのheightを変更します。 4. main.gspに以下のようにr:requireを使用してリソースを導入します。

  <g:layoutHead/>
<!-- mosaicを使用 -->
<r:require module="mosaic"/>
        <r:layoutResources />
 </head>

5. viewに以下のようなコードを追加します。

<div class="mosaic-block bar">
  <a href="#" target="_blank" class="mosaic-overlay">
    <div class="details">
      <h4>San Francisco</h4>
      <p>サンフランシスコです。</p>
    </div>
  </a>
  <div class="mosaic-backdrop"><img src="${resource(dir: 'images', file: 'SF.JPG')}"/></div>
</div>
<script type="text/javascript">
  $(function(){
    $('.bar').mosaic({
      animation : 'slide'
    });
  });
</script>

出力画面

動作環境
grails 2.0.1

関連情報
mosaic jquery pluginのホームページ
http://buildinternet.com/project/mosaic/