画像拡大機能の実装について
解決済
回答 2
投稿 ・編集
- 評価
- クリップ 5
- VIEW 1,730
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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+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
以上、長くなってしまいましたが、なにかひとつでも参考になれば幸いです
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
checkベストアンサー
+2
同じコードを試しましたが、ちゃんと動作しました。
ただし、jQueryとelevateZoom（のそれぞれjsファイル）を正しく読み込めていればの話です。
その部分でちょっとしたミスをしている可能性はありませんか？
あと、デバッグ機能かエラーが表示できる環境であれば、エラーメッセージが分かればもっと回答しやすくなります。
（追記）
完全に余談ですが、Amazonでズーム機能を実現していますね。（というのに今気づいたので...）
そういったことをやりたい方は、この質問が参考になるかと思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 90.48%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2014/10/14 12:06
丁寧な回答ありがとうございます。
2014/10/14 13:49
何か解決法ありましたらお願いします
2014/10/14 16:33
2014/10/14 16:51
2014/10/14 17:08
何度も本当にありがとうございました！