Rails初めてまもないです。
Railsで実装しようと色々試したのですが上手くいきません。
どなたか、助けて頂けると大変ありがたいです・・・
lang
1<div id="header"> 2<h1>商品一覧</h1> 3</div> 4 5<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/> 6 7<script> 8 $('#zoom_01').elevateZoom({ 9 zoomType: "inner", 10cursor: "crosshair", 11zoomWindowFadeIn: 500, 12zoomWindowFadeOut: 750 13 }); 14</script> 15<div id="footer"> 16<h2>続々入荷!</h2> 17</div> 18</body>> 19コード
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
便利そうなツールなので、私の方でも試してみました
セットアップ
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 を初期化するスクリプトを書きます
lang
1$(function() { 2 // ID 決め打ち 3 $('#zoom_01').elevateZoom(); 4 $('#zoom_02').elevateZoom(); 5 $('#zoom_03').elevateZoom(); 6 7 // elevate zoom を利用したいクラス群を探して初期化する 8 $('.zoom').each(function(element) { 9 $(this).elevateZoom(); 10 }); 11});
テストのために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/13 10:46
総合スコア2321
0
ベストアンサー
まず、これはRailsの問題ではなく、jQueryの問題だと思います。
同じコードを試しましたが、ちゃんと動作しました。
ただし、jQueryとelevateZoom(のそれぞれjsファイル)を正しく読み込めていればの話です。
その部分でちょっとしたミスをしている可能性はありませんか?
あと、デバッグ機能かエラーが表示できる環境であれば、エラーメッセージが分かればもっと回答しやすくなります。
(追記)
完全に余談ですが、Amazonでズーム機能を実現していますね。(というのに今気づいたので...)
そういったことをやりたい方は、この質問が参考になるかと思います。
投稿2014/10/13 05:04
総合スコア9388
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2014/10/14 03:06
2014/10/14 04:49
2014/10/14 07:33
2014/10/14 07:51
2014/10/14 08:08