elevateZoom不是在轨工作相当

Question

我用我下载我的Rails应用程序前端模板，大多能正常工作，但我不能让elevateZoom功能正常。

这里是他们的代码：

<div class="thumbnails-show grid_6 omega">
    <img src="images/details-thumb-1.jpg" data-zoom-image="images/details-1.jpg" />
</div>

这里是我的：

<div class="thumbnails-show grid_6 omega">
    <img src="<%= image_tag(@product.avatar.url(:medium)) %>" data-zoom-image="<%= image_tag(@product.avatar.url(:large)) %>" />
</div>

这是相关的JS：

var zoom_config = {zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 500,
            lensFadeIn: 500,
            lensFadeOut: 500,
            tint:true,
            tintColour:'#ebebeb',
            tintOpacity:0.5,
            borderSize: 0,
            zoomWindowWidth:100,
            zoomWindowHeight:300,
            lensBorderSize: 3,
            lensBorderColour: '#66bdc2', };

    $('.thumbnails-show img').elevateZoom(zoom_config);

    $('.thumbnails a').click(function(){
        var img = $('img', $(this)).clone();
        img.attr('data-zoom-image', $(this).attr('href'));

        img.elevateZoom(zoom_config);

        $('.thumbnails-show').html(img);
        return false;
    });

基本上发生的事情是这样的文字仍然在视图中显示：“数据放大图像=”” />随着一个unfound图像的图像，第二个‘放大’图像无法正常显示。

任何人都可以看到我要去哪里错了或者教我如何使其正常表现为在原有的模板？它好像一个神秘的额外“在某种程度上被添加，但我不知道为什么或如何。

谢谢你的帮助...

Answer 1

我不能相信这并没有得到回答了5年！你不能写

<img src="<%= image_tag

因为

image_tag(pic.url, ...)

将呈现为HTML

<img src="pic.url" ../> 

所以你需要写的是：

<img src= "<%= asset_path(@product.image_url) %>" data-zoom-image="<%=asset_path(@product.big_image_url) %>" class="img-zoom"/>

Answer 2

这是我的代码和我的作品

<script type="text/javascript">
  $(document).ready(function(){
    $('#bg').elevateZoom({
      gallery: 'gallery',
      zoomType: "inner",
      cursor: "crosshair",
      zoomWindowFadeIn: 200,
      zoomWindowFadeOut: 750
    })
  });
</script>

 <%= image_tag @car.image2.url ,id:"bg" , "data-zoom-image" => @car.image2.url %>