画像拡大機能の実装について

便利そうなツールなので、私の方でも試してみました

---

# セットアップ

## rails generate

今回は rails new image_zoom の後、rails generate scaffold image で簡単に初期化を済ませました

## 画像の配置

app/assets/images/ 配下に、サンプルとしてlarge_image.jpg, small_image.jpg を置きました

(実際に運用するときは、アップロードされた大きな画像を ひとつはそのまま保存、もうひとつはsmall と命名し縮小変換して保存するイメージでしょうか)

## view に画像を表示させる

app/views/images/index.html.slim の末尾にimage_tag とez_image_tag (後述)を追記しています

.container
  = image_tag('small_image.jpg', id: 'zoom_01',
  'data-zoom-image' => '/assets/large_image.jpg')
  = image_tag('small_image.jpg', id: 'zoom_02',
  'data-zoom-image' => '/assets/large_image.jpg')
  = image_tag('small_image.jpg', id: 'zoom_03',
  'data-zoom-image' => '/assets/large_image.jpg')
.container
  = image_tag('small_image.jpg', class: 'zoom',
  'data-zoom-image' => '/assets/large_image.jpg')
.container
  = ez_image_tag('large_image.jpg')
  = ez_image_tag('large_image.jpg')
  = ez_image_tag('large_image.jpg')

(※テンプレートエンジンにERB ではなくSlim を利用していますが、見るべきところに変わりはないでしょう)

## JavaScript の配置

最初に、app/assets/javascript 配下にjquery.elevatezoom.js をダウンロードします。
スクリプトはasset pipeline の機能によって、application.js を読み込みさえすれば、自動でview 処理時に読み込んでくれます。
(app/assets/javascripts/application.js 中の//= require_tree ., 読み込みは通常 app/views/layouts/application.html.erb 中の javascript_include_tag 'application' で実行される)

## elevate zoom を利用するスクリプトファイルを書く

app/assets/javascripts/ に、たとえばevZoom.js といった名前で、elevate zoom を初期化するスクリプトを書きます

$(function() {
  // ID 決め打ち
  $('#zoom_01').elevateZoom();
  $('#zoom_02').elevateZoom();
  $('#zoom_03').elevateZoom();

  // elevate zoom を利用したいクラス群を探して初期化する
  $('.zoom').each(function(element) {
    $(this).elevateZoom();
  });
});

テストのためにID 指定をすると確実ですが、elevate zoom を使う用のクラスの用意をしたほうが良いでしょう

## ヘルパーメソッド

※番外編のようなものです。

 ヘルパーメソッドの作成

data-zoom-image の指定とクラス名の指定を書くのが面倒なので、image_tag メソッドをすこし拡張した、ヘルパーメソッドを作成します

app/helpers/elevate_zoom_helper.rb

module ElevateZoomHelper
  def ez_image_tag(name, op = {})
    op['data-zoom-image'] = "/assets/#{name}"
    small_image = name.gsub(/^large_/, 'small_')

    op['class'] =
    if op['class'].nil?
      'zoom'
    else
      "#{op['class']} zoom"
    end

    image_tag(small_image, op)
    # => <img alt="Image" src="/assets/small_image.jpg" class="image brabra zoom" data-zoom-image="/assets/large_image.png">
  end
end

このヘルパーメソッドは大きな画像の方のファイル名を渡されることを期待していますが、もちろん、設計に応じて自由に書き換えることも出来ます

 ヘルパーメソッドの読み込み

作成したヘルパーメソッドをコントローラ側で読み込みます

app/controllers/images_controller.rb

class ImagesController < ApplicationController
  # helper :all # 面倒なら全読み込みも...
  helper :elevate_zoom
  # ....
end

これで、作成したヘルパーメソッドのez_image_tag が利用できるようになりました

## Rails Server を起動

の前にrake db:migrate を済ませておきます。
rails server で起動した後、http://localhost:3000/images/ で動作確認しましょう

---

## Links

* .each() | jQuery API Documentation
* image_tag - リファレンス - Railsドキュメント
* #64 Custom Helper Modules - RailsCasts

---

以上、長くなってしまいましたが、なにかひとつでも参考になれば幸いです

まず、これはRailsの問題ではなく、jQueryの問題だと思います。

同じコードを試しましたが、ちゃんと動作しました。
ただし、jQueryとelevateZoom（のそれぞれjsファイル）を正しく読み込めていればの話です。
その部分でちょっとしたミスをしている可能性はありませんか？
あと、デバッグ機能かエラーが表示できる環境であれば、エラーメッセージが分かればもっと回答しやすくなります。

---

（追記）
完全に余談ですが、Amazonでズーム機能を実現していますね。（というのに今気づいたので...）
そういったことをやりたい方は、この質問が参考になるかと思います。