ズーム機能の実装

Question

http://www.elevateweb.co.uk/image-zoom/examples を使ってズーム機能の実装(Basic ZoomからInner Zoomへの変更)を行っているのですが、上手くいきません。
オプションを追加するとjsが発火しない事態に陥っています。

<table>
  <thead>
    <tr>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    
  </tbody>

<br>
<table>
<tr>
<td><%= image_tag('small_image.png', id: 'zoom_01',
'data-zoom-image' => '/assets/large_image.jpg') %>
<p>zoom画像</p></td>

<td><%= image_tag('small_image2.png', id: 'zoom_02',
'data-zoom-image'=> '/assets/large_image2.jpg') %>
<p>zoom画像</p></td>

<td><%= image_tag('small_image2.png', id: 'zoom_03',
'data-zoom-image'=> '/assets/large_image2.jpg') %>
<p>zoom画像</p></td>

<td><%= image_tag('small_image2.png', id: 'zoom_04',
'data-zoom-image'=> '/assets/large_image2.jpg') %>
<p>zoom画像</p></td>
</tr>＞

 $(function() {
  $('#zoom_01').elevateZoom();
  $('#zoom_02').elevateZoom();
  $('#zoom_03').elevateZoom();
  $('#zoom_04').elevateZoom();

$('.zoom').each (function(element){
    $(this).elevateZoom();
  });
});＞

Answer 1

JavaScriptのエラーが出て処理が止まっていたりしないでしょうか？
具体的にどのように変更したのかがわからないと何とも言えないのですが。

Comments

[tsk691481]

回答ありがとうございます。
特にエラーが出たりなどは有りませんでした。
$('.zoom').each (function(element){
$(this).elevateZoom(※);
※の中にオプションを記入するとズームが機能しなくなってしまいます。
まだまだ始めて間もないので説明下手で申し訳ないです…

[TaMaMhyu]

具体的にはどのように記述されたのでしょうか？

[tsk691481]

$('.zoom').each (function(element){
$(this).elevateZoom({zoomType :"inner": cursor: "crosshair"});
この様に記述しました。

[TaMaMhyu]

JavaScriptの構文エラーのように見受けられます。
elevateZoomの中は
{zoomType :"inner", cursor: "crosshair"}
だと思います。

実際、サイトに書かれているサンプルが
{
zoomType: "inner",
cursor: "crosshair"
}
こうなっていると思いますが。

[tsk691481]

解決しました。
ありがとうございます。