レイルに乗ってみた〜Rails of Ruby on Rails その12「ライトボックス系JSライブラリ〜ちょいと躓いた(つдT)」

レイルに乗ってみた〜 目次
書籍『Rails of Ruby on Rails ~Case of LOCUSANDWONDERS.COM~』で勉強してみた（P140〜）

ライトボックス系JSライブラリを使って商品画像を効果的に見せる ライブラリの追加

ProtoThickBox | ソーシャルWebシステム開発 | スプーキーズからprotothickbox-js-3.1.3.zipをダウンロード・解凍して /locus/public/javascripts/ ディレクトリにいれる。

1. protothickbox.js

で一部書き換える。

// var tb_pathToImage = "../images/loadingAnimation.gif";
var tb_pathToImage = "/images/loadingAnimation.gif";

http://jquery.com/demo/thickbox/から次のファイルをダウンロード。

1. thickbox.css
2. loadingAnimation.gif
3. macFFBgHack.png

/locus/public/stylesheets/ ディレクトリに

• thickbox.css
• macFFBgHack.png

/locus/public/images/ ディレクトリに

• loadingAnimation.gif

をいれる。

ファイル修正変更。

• /locus/app/views/layouts/products.html.erb
• /locus/app/views/layouts/entries.html.erb

書籍と同じなので略。

ビュー修正

/locus/app/views/products/show.html.erbを修正。

    <%= image_tag(
        url_for_file_column(@product, :image, 'middle')) %>

のところが

    <%= link_to(image_tag(
        url_for_file_column(@product, :image, 'middle')),
        url_for_file_column(@product, :image),
          :class => 'thickbox',
          :title => @product.title) %>

となるのでは？（書籍P143では1、2行目の表示が...）

ブラウザで動作確認

http://localhost:3000/

とりあえずの商品画像が小さくて分りにくいかもしれないけど見栄えするよね(・∀・)

メモ

• JSライブラリがいい感じ。そのうち勉強するかも。prototype.jsとjQueryどっちらがよいかな？