質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

88.23%

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

解決済

回答 2

投稿 ・編集

  • 評価
  • クリップ 5
  • VIEW 2,676
tsk691481

tsk691481

score 33

Rails初めてまもないです。
Railsで実装しようと色々試したのですが上手くいきません。
どなたか、助けて頂けると大変ありがたいです・・・ 
<div id="header">
<h1>商品一覧</h1>
</div>

<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>

<script>
    $('#zoom_01').elevateZoom({
    zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
   }); 
</script>
<div id="footer">
<h2>続々入荷！</h2>
</div>
</body>＞
コード

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2 件

link

+4

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

# セットアップ

## 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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2014/10/14 16:33

    GitHub にリポジトリを作成しました ( https://github.com/gouf/test_elevate_zoom )ので、そちらの状態と見比べてみてください

    キャンセル

  • 2014/10/14 16:51

    すいません何度もありがとうございます。

    キャンセル

  • 2014/10/14 17:08

    今試したら無事成功しました。
    何度も本当にありがとうございました！

    キャンセル

link

checkベストアンサー

+2

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2014/10/13 14:10

    回答ありがとうございます。
    ミスの可能性が高いです(^^;
    再度見直して試してみます！

    キャンセル

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 88.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る